:root {
  --ink: #101110;
  --paper: #f0eee8;
  --paper-deep: #e5e3dc;
  --line: #cfcec6;
  --muted: #85867f;
  --orange: #ee5b2d;
  --yellow: #f4c542;
  --blue: #4569e8;
  --green: #94b879;
  --white: #fbfaf6;
  --violet: #7869d8;
  --mono: "DM Mono", monospace;
  --display: "Space Grotesk", sans-serif;
  --mouse-x: 50vw;
  --mouse-y: 50vh;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body {
  margin: 0;
  background: var(--paper);
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.page-scrollbar {
  position: fixed;
  z-index: 70;
  top: 8px;
  right: 5px;
  bottom: 8px;
  width: 6px;
  opacity: 0.78;
  cursor: pointer;
  transition:
    opacity 0.16s ease,
    width 0.16s ease;
}
.page-scrollbar:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 1px;
  background: rgba(16, 17, 16, 0.13);
}
.page-scrollbar span {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  min-height: 42px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), 0 100%);
  box-shadow: 0 0 0 1px rgba(240, 238, 232, 0.32);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.page-scrollbar span:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 12px;
  background: var(--orange);
}
.page-scrollbar:hover,
.page-scrollbar.dragging,
.page-scrollbar:focus-visible {
  width: 9px;
  opacity: 1;
  outline: none;
}
.page-scrollbar:hover span,
.page-scrollbar.dragging span,
.page-scrollbar:focus-visible span {
  width: 8px;
}
.page-scrollbar.inactive,
body.boot-active .page-scrollbar,
body.modal-open .page-scrollbar {
  opacity: 0;
  pointer-events: none;
}
html.modal-open,
body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}
body.custom-cursor,
body.custom-cursor * {
  cursor: none !important;
}
body.custom-cursor.native-cursor-active,
body.custom-cursor.native-cursor-active *,
body.custom-cursor.system-cursor-dialog,
body.custom-cursor.system-cursor-dialog * {
  cursor: auto !important;
}
body.native-cursor-active .cursor-system,
body.system-cursor-dialog .cursor-system {
  opacity: 0 !important;
}
/* Chromium 的原生滚动条不会持续向页面派发 pointermove；隐藏命中轨道，避免双光标和冻结。 */
body.custom-cursor * {
  scrollbar-width: none;
}
body.custom-cursor *::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.native-cursor-zone,
.native-cursor-zone * {
  cursor: auto !important;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
.hidden {
  display: none !important;
}
.noise-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  contain: strict;
}
.cursor-system {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  transform: translate3d(-80px, -80px, 0);
  will-change: transform;
  contain: layout style;
}
.custom-cursor .cursor-system {
  opacity: 1;
}
.cursor-system span {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}
#cursorCore {
  width: 5px;
  height: 5px;
  background: var(--orange);
  box-shadow: 0 0 12px rgba(238, 91, 45, 0.8);
}
#cursorFrame {
  width: 29px;
  height: 29px;
  border: 1px solid var(--ink);
  transition:
    width 0.11s,
    height 0.11s,
    border-color 0.11s,
    transform 0.11s;
  transform: translate(-50%, -50%) rotate(45deg);
}
#cursorFrame:before,
#cursorFrame:after {
  content: "";
  position: absolute;
  background: var(--orange);
}
#cursorFrame:before {
  width: 1px;
  height: 9px;
  left: -1px;
  top: -1px;
}
#cursorFrame:after {
  height: 1px;
  width: 9px;
  right: -1px;
  bottom: -1px;
}
.cursor-system.hover #cursorFrame {
  width: 42px;
  height: 42px;
  border-color: var(--orange);
  transform: translate(-50%, -50%) rotate(0deg);
}
.cursor-system.click #cursorFrame {
  width: 48px;
  height: 48px;
  border-color: var(--yellow);
  transition-duration: 0.055s;
}
#cursorLabel {
  font: 8px var(--mono);
  letter-spacing: 0.08em;
  margin: 24px 0 0 22px;
  color: var(--orange);
}
#cursorCoordinates {
  margin: 35px 0 0 22px;
  color: #777970;
  font: 6px var(--mono);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.app-shell {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: 242px;
  flex: 0 0 242px;
  min-height: 0;
  height: 100dvh;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--ink);
  color: #f4f1e9;
  padding: 28px 19px 22px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.brand {
  font: 11px/1.05 var(--mono);
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 8px 74px;
}
.brand b {
  font-weight: 500;
  font-size: 13px;
  color: var(--yellow);
}
.brand-mark {
  width: 28px;
  height: 28px;
  border: 1px solid var(--yellow);
  display: grid;
  place-items: center;
  color: var(--yellow);
  font-size: 14px;
  transform: rotate(-8deg);
}
.brand-dot {
  width: 5px;
  height: 5px;
  background: var(--orange);
  margin-left: auto;
}
.side-label {
  color: #777870;
  font: 10px var(--mono);
  letter-spacing: 0.16em;
  border-bottom: 1px solid #343632;
  padding: 0 8px 12px;
  margin-bottom: 9px;
}
.side-label-lower {
  margin-top: 46px;
}
.nav-list {
  display: grid;
  gap: 3px;
}
.module-list {
  display: grid;
  gap: 3px;
  max-height: 168px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--orange) transparent;
}
.module-list .nav-item {
  color: #d3d1c5;
}
.module-add {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  color: var(--yellow);
  font: 9px var(--mono);
  text-align: left;
}
.module-add svg {
  width: 13px;
}
.module-add:hover {
  color: var(--orange);
}
.side-label-module-groups {
  margin-top: 22px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #a5a69f;
  width: 100%;
  padding: 11px 9px;
  text-align: left;
  font-size: 13px;
  transition:
    color 0.18s,
    background 0.18s,
    transform 0.18s;
  position: relative;
}
.nav-item:after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  clip-path: inset(0 100% 100% 0);
  transition:
    clip-path 0.22s,
    border-color 0.22s;
}
.nav-item:hover,
.nav-item.active {
  background: #292b28;
  color: var(--white);
}
.nav-item:hover:after,
.nav-item.active:after {
  border-color: var(--orange);
  clip-path: inset(0 0 0 0);
}
.nav-item.active {
  border-left: 2px solid var(--orange);
  padding-left: 7px;
}
.nav-item svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
}
.nav-item b {
  margin-left: auto;
  color: #666961;
  font: 10px var(--mono);
}
.nav-item.active b {
  color: var(--orange);
}
.side-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  border-top: 1px solid #343632;
  padding: 17px 8px 0;
  color: #777870;
  font: 9px var(--mono);
  letter-spacing: 0.06em;
}
.side-footer b {
  font-weight: 400;
  color: var(--green);
  margin-left: auto;
}
.status-led {
  width: 6px;
  height: 6px;
  background: var(--green);
  box-shadow: 0 0 9px var(--green);
}
.main-content {
  flex: 1;
  min-width: 0;
  margin-left: 242px;
  padding: 0 5vw 28px;
  overflow: hidden;
}
.topbar {
  height: 78px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.crumb,
.eyebrow,
.card-kicker,
.feature-meta small,
.preview-meta,
.main-footer,
.section-heading small {
  font: 10px var(--mono);
  letter-spacing: 0.08em;
}
.crumb {
  color: #777870;
}
.crumb span {
  padding: 0 8px;
  color: var(--orange);
}
.crumb b {
  font-weight: 500;
  color: var(--ink);
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 10px var(--mono);
  color: #75766f;
}
.sync {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sync svg {
  color: var(--green);
  width: 14px;
}
.account-button {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #676860;
  font: 10px var(--mono);
  padding: 0;
}
.account-button:hover {
  color: var(--ink);
}
.avatar {
  width: 30px;
  height: 30px;
  background: var(--ink);
  color: var(--yellow);
  display: grid;
  place-items: center;
  font-size: 10px;
  transition: 0.2s;
}
.account-button:hover .avatar {
  transform: rotate(-8deg);
  box-shadow: 4px 4px 0 var(--orange);
}
.edit-mode-toggle {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--orange);
  padding: 0 10px;
  color: var(--orange);
  font: 9px var(--mono);
  letter-spacing: 0.06em;
}
.toggle-led {
  width: 5px;
  height: 5px;
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange);
}
.edit-mode-toggle.on {
  background: var(--orange);
  color: var(--ink);
}
.edit-mode-toggle.on .toggle-led {
  background: var(--ink);
  box-shadow: none;
}
.intro-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 53px 0 39px;
}
.eyebrow {
  color: #777870;
  margin: 0 0 13px;
}
.eyebrow span {
  color: var(--orange);
}
h1 {
  font-size: clamp(49px, 6.3vw, 88px);
  line-height: 0.84;
  letter-spacing: -0.08em;
  margin: 0;
  font-weight: 600;
}
h1 em {
  font-style: normal;
  color: var(--orange);
}
.edit-mode #moduleTitleMain[contenteditable="true"],
.edit-mode #moduleTitleAccent[contenteditable="true"] {
  outline: 0;
  border-bottom: 1px solid var(--orange);
  cursor: text;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.edit-mode #moduleTitleMain[contenteditable="true"]:focus,
.edit-mode #moduleTitleAccent[contenteditable="true"]:focus {
  background: rgba(242, 82, 43, 0.08);
  border-color: var(--yellow);
}
.module-edit-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  color: var(--orange);
  font: 9px var(--mono);
  letter-spacing: 0.08em;
}
.module-edit-controls select {
  min-width: 146px;
  color: var(--ink);
  border-color: rgba(25, 26, 24, 0.35);
}
.glitch-text {
  position: relative;
  display: inline-block;
}
.glitch-text:before,
.glitch-text:after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.glitch-text:before {
  color: var(--orange);
  transform: translate(-2px, 0);
  clip-path: inset(0 0 68% 0);
}
.glitch-text:after {
  color: var(--blue);
  transform: translate(2px, 0);
  clip-path: inset(68% 0 0 0);
}
.prompt-card:hover .glitch-text:before,
.prompt-card:hover .glitch-text:after,
.glitch-text:hover:before,
.glitch-text:hover:after {
  animation: text-break 0.42s steps(2, end) 1 both;
}
@keyframes text-break {
  0% {
    opacity: 0;
    transform: translate(0);
  }
  12% {
    opacity: 0.78;
    transform: translate(-5px, 1px);
  }
  38% {
    opacity: 0.7;
    transform: translate(4px, -1px);
  }
  66% {
    opacity: 0.62;
    transform: translate(-2px, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0);
  }
}
.intro-copy {
  width: 195px;
  margin-bottom: 3px;
  position: relative;
}
.intro-copy p {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 18px;
}
.intro-copy strong {
  color: var(--orange);
  font-weight: 600;
}
.index-number {
  font: 10px var(--mono);
  color: var(--orange);
  display: block;
  margin-bottom: 12px;
}
.text-button {
  font: 11px var(--mono);
  border-bottom: 1px solid var(--ink);
  padding: 0 0 6px;
  display: inline-flex;
  gap: 16px;
  align-items: center;
}
.text-button svg {
  width: 13px;
}
.featured-card {
  background: var(--orange);
  min-height: 430px;
  display: grid;
  grid-template-columns: 1.13fr 0.87fr;
  position: relative;
  overflow: hidden;
}
.featured-card:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(16, 17, 16, 0.35);
  clip-path: inset(0 100% 100% 0);
  animation: trim-card 7s steps(1, end) infinite;
}
.feature-art {
  background: #1b1c1b;
  position: relative;
  min-height: 430px;
  overflow: hidden;
  color: var(--yellow);
}
.feature-art:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 70% 45%,
      rgba(244, 197, 66, 0.12),
      transparent 30%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 29px,
      rgba(244, 197, 66, 0.05) 30px,
      transparent 31px
    );
  animation: orbit-breathe 10s ease-in-out infinite;
}
.art-sun {
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--yellow);
  right: 23%;
  top: 42px;
  box-shadow: 0 0 60px rgba(244, 197, 66, 0.25);
  animation: sun-pulse 5s ease-in-out infinite;
  transition:
    transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.36s ease;
}
.art-orbit {
  position: absolute;
  border: 1px solid rgba(244, 197, 66, 0.63);
  border-radius: 50%;
  transform: rotate(-25deg);
  transition:
    transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.38s ease;
}
.orbit-one {
  width: 400px;
  height: 160px;
  right: 4%;
  top: 50px;
  animation: orbit-tilt 8s ease-in-out infinite;
}
.orbit-two {
  width: 280px;
  height: 110px;
  right: 16%;
  top: 83px;
  animation: orbit-tilt 6s ease-in-out infinite reverse;
}
.art-coord {
  position: absolute;
  top: 20px;
  left: 22px;
  font: 9px/1.5 var(--mono);
  color: #d3cfb0;
}
.art-stamp {
  position: absolute;
  right: 22px;
  top: 18px;
  border: 1px solid var(--orange);
  color: var(--orange);
  font: 9px/1.12 var(--mono);
  padding: 6px 7px;
  transform: rotate(8deg);
}
.art-stamp b {
  color: var(--yellow);
  font-weight: 400;
}
.art-title {
  position: absolute;
  bottom: 19px;
  left: 22px;
  font: 500 31px/0.85 var(--display);
  letter-spacing: -0.07em;
  transition:
    transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
    text-shadow 0.34s ease;
}
.art-title i {
  color: var(--orange);
  font-style: normal;
  font-size: 21px;
}

/* 顶部技术视效：鼠标定位、轨道视差和短促故障反馈。 */
.feature-art {
  --hero-x: 50%;
  --hero-y: 50%;
  --hero-dx: 0;
  --hero-dy: 0;
  --hero-angle: 0deg;
  isolation: isolate;
  perspective: 700px;
  cursor: crosshair;
}
.feature-art:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  border: 1px solid rgba(244, 197, 66, 0.24);
  clip-path: polygon(
    0 0,
    15% 0,
    15% 1px,
    43% 1px,
    43% 0,
    100% 0,
    100% 22%,
    calc(100% - 1px) 22%,
    calc(100% - 1px) 80%,
    100% 80%,
    100% 100%,
    62% 100%,
    62% calc(100% - 1px),
    18% calc(100% - 1px),
    18% 100%,
    0 100%
  );
  transition: border-color 0.18s ease;
}
.art-grid {
  position: absolute;
  inset: -22%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(244, 197, 66, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 197, 66, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  transform: translate3d(calc(var(--hero-dx) * -8px), calc(var(--hero-dy) * -8px), 0)
    rotateX(calc(var(--hero-dy) * -1.2deg))
    rotateY(calc(var(--hero-dx) * 1.5deg));
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.art-points {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  transition: transform 0.2s ease;
}
.art-points b {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--yellow);
  box-shadow: 0 0 8px rgba(244, 197, 66, 0.65);
  transform: translate3d(calc(var(--hero-dx) * var(--point-shift-x)), calc(var(--hero-dy) * var(--point-shift-y)), 0);
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.art-points b:nth-child(1) { left: 18%; top: 22%; --point-shift-x: -10px; --point-shift-y: -8px; }
.art-points b:nth-child(2) { left: 32%; top: 63%; --point-shift-x: 8px; --point-shift-y: -12px; }
.art-points b:nth-child(3) { left: 56%; top: 21%; --point-shift-x: -7px; --point-shift-y: 10px; }
.art-points b:nth-child(4) { left: 72%; top: 76%; --point-shift-x: 12px; --point-shift-y: 6px; }
.art-points b:nth-child(5) { left: 84%; top: 30%; --point-shift-x: 9px; --point-shift-y: -9px; }
.art-points b:nth-child(6) { left: 46%; top: 84%; --point-shift-x: -12px; --point-shift-y: 8px; }
.art-readout {
  position: absolute;
  right: 20px;
  bottom: 18px;
  z-index: 7;
  color: #777b70;
  font: 8px var(--mono);
  letter-spacing: 0.08em;
  pointer-events: none;
}
.art-readout b {
  color: var(--yellow);
  font-weight: 400;
}
.hero-active .feature-art:after {
  border-color: rgba(244, 197, 66, 0.72);
}
.hero-active .art-grid,
.hero-active .art-points b {
  transition-duration: 0.12s;
}
.hero-active .art-sun {
  transform: translate3d(calc(var(--hero-dx) * 10px), calc(var(--hero-dy) * 8px), 18px) scale(1.02);
  box-shadow: 0 0 75px rgba(244, 197, 66, 0.38);
}
.hero-active .orbit-one {
  transform: translate3d(calc(var(--hero-dx) * 12px), calc(var(--hero-dy) * 8px), 0)
    rotate(calc(-25deg + var(--hero-angle)));
}
.hero-active .orbit-two {
  transform: translate3d(calc(var(--hero-dx) * -9px), calc(var(--hero-dy) * -6px), 0)
    rotate(calc(-25deg - var(--hero-angle)));
}
.hero-active .art-title {
  transform: translate3d(calc(var(--hero-dx) * -6px), calc(var(--hero-dy) * -4px), 0);
  text-shadow: 2px 0 rgba(242, 82, 43, 0.55), -2px 0 rgba(244, 197, 66, 0.3);
}
.hero-impact .feature-art {
  animation: hero-glitch-hit 0.16s steps(2, end) 1;
}
.hero-click .feature-art {
  animation: hero-click-impact 0.2s steps(3, end) 1;
}
@keyframes hero-glitch-hit {
  0%, 100% { transform: none; }
  30% { transform: translate3d(-2px, 0, 0); }
  55% { transform: translate3d(2px, 0, 0); }
}
@keyframes hero-click-impact {
  0%, 100% { transform: none; }
  35% { transform: translate3d(-1px, 0, 0); }
  70% { transform: translate3d(1px, 0, 0); }
}
.feature-info {
  padding: 37px 40px 28px;
  display: flex;
  flex-direction: column;
}
.card-kicker {
  color: #6f2614;
}
.card-kicker span {
  float: right;
  color: #191a18;
}
.feature-info h2 {
  font-size: 34px;
  letter-spacing: -0.07em;
  line-height: 0.92;
  margin: 30px 0 13px;
}
.feature-info > p {
  font-size: 13px;
  line-height: 1.55;
  max-width: 265px;
  margin: 0;
}
.hero-signal {
  background: #d84f2d;
}
.hero-signal .feature-art {
  background: #161a23;
}
.hero-signal .feature-art:before {
  background:
    linear-gradient(110deg, transparent 0 42%, rgba(69, 105, 232, 0.5) 42.2% 42.6%, transparent 42.8%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(69, 105, 232, 0.09) 28px, transparent 29px);
}
.hero-signal .art-sun {
  width: 125px;
  height: 125px;
  border-radius: 0;
  transform: rotate(45deg);
  background: var(--blue);
  box-shadow: 0 0 55px rgba(69, 105, 232, 0.42);
}
.hero-blueprint {
  background: #4569e8;
}
.hero-blueprint .feature-art {
  background: #111827;
}
.hero-blueprint .feature-art:before {
  background:
    radial-gradient(circle at 65% 44%, rgba(244, 197, 66, 0.22), transparent 20%),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(126, 165, 255, 0.12) 29px, transparent 30px);
}
.hero-blueprint .art-sun {
  width: 145px;
  height: 145px;
  border: 1px solid var(--yellow);
  background: transparent;
  box-shadow: inset 0 0 0 16px rgba(244, 197, 66, 0.08), 0 0 36px rgba(244, 197, 66, 0.24);
}
.hero-terminal {
  background: #8bab68;
}
.hero-terminal .feature-art {
  background: #111b17;
}
.hero-terminal .feature-art:before {
  background:
    linear-gradient(135deg, transparent 0 49%, rgba(148, 184, 121, 0.28) 49.2% 49.6%, transparent 49.8%),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(148, 184, 121, 0.1) 25px, transparent 26px);
}
.hero-terminal .art-sun {
  width: 185px;
  height: 96px;
  top: 72px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--green);
  box-shadow: 0 0 60px rgba(148, 184, 121, 0.28);
}

/* 三套替代顶部主题：每套拥有独立的信息图形、排版和运动语言。 */
.featured-card.hero-signal {
  background: #e45a32;
}
.hero-signal .feature-art {
  background: #111a2a;
  color: #8eb7ff;
}
.hero-signal .feature-art::before,
.hero-signal .feature-art::after {
  background: none;
}
.signal-radar {
  position: absolute;
  inset: 28px 22% 28px 22px;
  border: 1px solid rgba(142, 183, 255, 0.35);
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(69, 105, 232, 0.2), transparent 48%);
}
.signal-scope,
.signal-scope::before,
.signal-scope::after {
  position: absolute;
  content: "";
  inset: 12%;
  border: 1px solid rgba(142, 183, 255, 0.55);
  border-radius: 50%;
}
.signal-scope::before { inset: 16%; }
.signal-scope::after { inset: 33%; border-color: rgba(244, 197, 66, 0.72); }
.signal-sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48%;
  height: 1px;
  transform-origin: left center;
  background: var(--yellow);
  box-shadow: 0 0 15px var(--yellow);
  animation: signal-sweep 2.8s linear infinite;
}
.signal-sweep::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  background: var(--orange);
}
.signal-target {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--orange);
  transform: rotate(45deg);
}
.target-one { left: 63%; top: 26%; }
.target-two { left: 28%; top: 66%; border-color: var(--yellow); }
.signal-ping {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff0ad;
  box-shadow: 0 0 9px #fff0ad;
  animation: signal-ping 2s ease-in-out infinite;
}
.ping-one { left: 71%; top: 34%; }
.ping-two { left: 39%; top: 48%; animation-delay: .4s; }
.ping-three { left: 22%; top: 27%; animation-delay: .8s; }
.signal-axis {
  position: absolute;
  right: 18px;
  top: 24px;
  bottom: 24px;
  width: 74px;
  border-left: 1px solid rgba(142, 183, 255, 0.32);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 9px;
  color: #8096bd;
  font: 7px var(--mono);
}
.signal-axis b { color: var(--orange); font-weight: 400; writing-mode: vertical-rl; }
.signal-axis i { height: 34%; border-left: 1px dashed var(--yellow); }
.signal-bars {
  position: absolute;
  left: 22px;
  bottom: 21px;
  display: flex;
  align-items: end;
  gap: 4px;
  height: 32px;
}
.signal-bars i { width: 3px; height: 12px; background: var(--orange); animation: signal-bars 1.2s ease-in-out infinite alternate; }
.signal-bars i:nth-child(2) { height: 25px; animation-delay: .12s; }
.signal-bars i:nth-child(3) { height: 18px; animation-delay: .22s; }
.signal-bars i:nth-child(4) { height: 29px; animation-delay: .34s; }
.signal-bars i:nth-child(5) { height: 14px; animation-delay: .45s; }
.signal-bars i:nth-child(6) { height: 22px; animation-delay: .56s; }
.signal-readout,
.blueprint-readout,
.terminal-readout { position: absolute; right: 19px; bottom: 18px; color: #7d91b7; font: 8px var(--mono); z-index: 4; }
.signal-readout b,
.blueprint-readout b,
.terminal-readout b { color: var(--yellow); font-weight: 400; }
.hero-signal .art-title { color: #d9e5ff; }

.featured-card.hero-blueprint { background: #5f79ce; }
.hero-blueprint .feature-art { background: #152442; color: #bdd1ff; }
.hero-blueprint .feature-art::before,
.hero-blueprint .feature-art::after { background: none; }
.blueprint-rulers { position: absolute; inset: 0 0 auto; height: 20px; display: flex; justify-content: space-around; color: rgba(189, 209, 255, .58); font: 7px var(--mono); border-bottom: 1px solid rgba(189, 209, 255, .24); }
.blueprint-rulers span { padding-top: 5px; }
.blueprint-board { position: absolute; inset: 45px 32px 38px; border: 1px solid rgba(189, 209, 255, .62); background: linear-gradient(rgba(189,209,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(189,209,255,.1) 1px, transparent 1px); background-size: 20px 20px; }
.blueprint-window { position: absolute; left: 13%; top: 18%; width: 59%; height: 52%; border: 1px solid var(--yellow); padding: 10px; color: var(--yellow); font: 7px var(--mono); }
.blueprint-window i { display: block; width: 72%; height: 1px; margin-top: 16px; background: rgba(189,209,255,.72); }
.blueprint-window i:nth-of-type(2) { width: 44%; margin-top: 8px; }
.blueprint-window i:nth-of-type(3) { width: 57%; margin-top: 8px; }
.blueprint-window em { position: absolute; right: -9px; bottom: -9px; width: 17px; height: 17px; border: 1px solid var(--orange); background: #152442; transform: rotate(45deg); }
.blueprint-route { position: absolute; height: 1px; background: var(--orange); transform-origin: left center; }
.route-a { width: 28%; left: 69%; top: 34%; transform: rotate(23deg); }
.route-b { width: 27%; left: 70%; top: 70%; transform: rotate(-22deg); background: var(--yellow); }
.blueprint-node { position: absolute; width: 7px; height: 7px; border: 1px solid var(--orange); background: #152442; transform: rotate(45deg); }
.node-a { left: 94%; top: 46%; }.node-b { left: 94%; top: 62%; border-color: var(--yellow); }
.blueprint-caption { position: absolute; left: 22px; bottom: 19px; color: #9fb9ed; font: 8px/1.5 var(--mono); }.blueprint-caption b { color: var(--orange); font-weight: 400; }
.hero-blueprint .art-title { color: #f4f0de; }

.featured-card.hero-terminal { background: #a8bb7d; }
.hero-terminal .feature-art { background: #0c211d; color: #9bd18b; }
.hero-terminal .feature-art::before,
.hero-terminal .feature-art::after { background: none; }
.terminal-head { position: absolute; inset: 20px 22px auto; display: flex; justify-content: space-between; color: #668b6b; font: 8px var(--mono); border-bottom: 1px solid rgba(155,209,139,.35); padding-bottom: 8px; }.terminal-head b { color: var(--yellow); font-weight: 400; }
.terminal-console { position: absolute; left: 22px; right: 45px; top: 58px; bottom: 45px; border-left: 2px solid var(--green); padding: 15px 17px; background: rgba(10, 34, 27, .65); font: 8px/1.8 var(--mono); }
.terminal-command b { color: var(--yellow); font-weight: 400; }.terminal-command span { color: #6d9d75; }
.terminal-lines { display: grid; gap: 5px; margin-top: 18px; color: #9bc39b; }.terminal-lines i { font-style: normal; }.terminal-lines i::before { content: "// "; color: var(--orange); }
.terminal-meter { height: 3px; margin-top: 18px; background: rgba(155,209,139,.18); }.terminal-meter b { display: block; width: 67%; height: 100%; background: var(--yellow); animation: terminal-progress 2.2s ease-in-out infinite alternate; }.terminal-console small { display: block; margin-top: 8px; color: #587a61; font-size: 7px; }.terminal-cursor { position: absolute; right: 27px; top: 65px; color: var(--orange); font: 17px var(--mono); animation: terminal-blink .75s steps(1) infinite; }.hero-terminal .art-title { color: #e7f0d5; }
.hero-signal .hero-layer,
.hero-blueprint .hero-layer,
.hero-terminal .hero-layer { transition: transform .34s cubic-bezier(.2,.8,.2,1); }
.hero-active .hero-layer { transform: translate3d(calc(var(--hero-dx) * 5px), calc(var(--hero-dy) * 4px), 0); }
@keyframes signal-sweep { to { transform: rotate(360deg); } }
@keyframes signal-ping { 0%,100% { opacity: .3; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.8); } }
@keyframes signal-bars { from { transform: scaleY(.6); } to { transform: scaleY(1); } }
@keyframes terminal-progress { from { width: 42%; } to { width: 82%; } }
@keyframes terminal-blink { 50% { opacity: 0; } }

/* Programmer Runtime：将独立效果文件的代码编辑器、内核图和状态读数压缩进顶部卡片。 */
.featured-card.hero-runtime { background: var(--orange); }
.hero-runtime .feature-art { background: #090c0b; color: var(--paper); }
.hero-runtime .feature-art::before { background: repeating-linear-gradient(90deg, transparent 0 31px, rgba(238,231,213,.055) 32px 33px), repeating-linear-gradient(0deg, transparent 0 31px, rgba(238,231,213,.055) 32px 33px); opacity: .72; }
.runtime-fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.runtime-editor { position: absolute; z-index: 2; inset: 20px 39% 20px 20px; border-left: 1px solid rgba(238,231,213,.18); background: linear-gradient(90deg, rgba(5,8,7,.95), rgba(8,11,9,.62)); font: 7px/1.55 var(--mono); overflow: hidden; }
.runtime-filebar { height: 20px; display: flex; align-items: center; gap: 7px; padding: 0 8px; border-bottom: 1px solid rgba(238,231,213,.13); color: #737a71; white-space: nowrap; overflow: hidden; }
.runtime-filebar b { color: var(--paper); font-weight: 500; }.runtime-filebar span { overflow: hidden; text-overflow: ellipsis; }
.runtime-code { padding: 10px 8px 0 30px; color: #bfc7b9; white-space: nowrap; }.runtime-code-line { display: block; min-height: 1.55em; }.runtime-code-line > i { display: inline-block; width: 20px; margin-left: -24px; color: #4f584f; font-style: normal; }.runtime-code b { color: var(--orange); font-weight: 400; }.runtime-code em { color: var(--yellow); font-style: normal; }.runtime-code u { color: var(--green); text-decoration: none; }.runtime-comment { color: #596159; }
.runtime-meter { position: absolute; inset: auto 8px 8px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px solid rgba(238,231,213,.11); color: #737a71; font-size: 6px; }.runtime-meter > i { height: 2px; background: rgba(238,231,213,.1); }.runtime-meter > i > b { display: block; width: 62%; height: 100%; background: linear-gradient(90deg, var(--orange), var(--amber)); animation: runtime-meter 1.8s ease-in-out infinite alternate; }.runtime-meter strong { color: var(--green); font-size: 6px; font-weight: 500; }
.runtime-kernel { position: absolute; z-index: 3; inset: 25px 17px 30px auto; width: 29%; border: 1px solid rgba(238,231,213,.14); background: rgba(16,20,16,.55); overflow: hidden; }.runtime-kernel-label { position: absolute; left: 7px; top: 7px; color: #858d82; font: 6px var(--mono); letter-spacing: .07em; }.runtime-cross { position: absolute; left: 50%; top: 52%; background: rgba(238,231,213,.18); }.cross-h { width: 100%; height: 1px; transform: translate(-50%,-50%); }.cross-v { width: 1px; height: 100%; transform: translate(-50%,-50%); }.runtime-orbit { position: absolute; left: 50%; top: 53%; width: 125%; height: 38%; border: 1px solid rgba(255,213,63,.36); border-radius: 50%; transform: translate(-50%,-50%) rotate(-25deg); animation: runtime-orbit 4.2s ease-in-out infinite alternate; }.runtime-orbit-b { width: 86%; height: 26%; border-color: rgba(255,91,50,.4); animation-delay: -.9s; animation-direction: alternate-reverse; }.runtime-core { position: absolute; left: 50%; top: 53%; width: 27px; height: 27px; transform: translate(-50%,-50%); border: 1px solid var(--yellow); border-radius: 50%; box-shadow: 0 0 24px rgba(255,213,63,.23); }.runtime-core i { position: absolute; inset: 8px; background: var(--amber); border-radius: 50%; animation: runtime-core 1.5s ease-in-out infinite alternate; }.runtime-node { position: absolute; z-index: 2; color: #737a71; font: 6px var(--mono); }.runtime-node b { color: var(--amber); font-weight: 400; }.runtime-n1 { left: 7px; top: 35%; }.runtime-n2 { right: 6px; bottom: 28%; text-align: right; }.runtime-kernel-status { position: absolute; left: 7px; bottom: 7px; color: var(--green); font: 6px var(--mono); }.runtime-readout { position: absolute; right: 17px; bottom: 16px; color: #778078; font: 7px var(--mono); z-index: 4; }.runtime-readout b { color: var(--yellow); font-weight: 400; }.hero-runtime .art-title { color: var(--paper); }
.hero-runtime .art-title i { color: var(--orange); }.hero-runtime .hero-layer { transition: transform .34s cubic-bezier(.2,.8,.2,1); }.hero-active .runtime-editor,.hero-active .runtime-kernel { transform: translate3d(calc(var(--hero-dx) * 4px), calc(var(--hero-dy) * 3px), 0); }.hero-runtime .feature-art::after { border-color: rgba(255,213,63,.3); }
@keyframes runtime-meter { from { width: 42%; } to { width: 86%; } }
@keyframes runtime-orbit { to { transform: translate(-50%,-50%) rotate(-16deg) scaleY(1.12); } }
@keyframes runtime-core { to { transform: scale(.72); filter: brightness(1.2); } }
.featured-card.hero-runtime { display: grid; grid-template-columns: 1.13fr .87fr; min-height: 430px; background: var(--orange); }
.hero-runtime .feature-art { width: auto; height: auto; min-height: 430px; background: #090c0b; }
.hero-runtime .feature-info { display: flex; }
.runtime-iframe { display: block; width: 100%; height: 100%; min-height: 430px; border: 0; background: #090c0b; }
.featured-card.hero-runtime::after,
.hero-runtime .feature-art::before,
.hero-runtime .feature-art::after { display: none; }
body.runtime-frame-cursor-hide .cursor-system { opacity: 0; }
.feature-meta {
  margin-top: auto;
  display: flex;
  gap: 24px;
  border-top: 1px solid rgba(16, 17, 16, 0.23);
  padding-top: 13px;
}
.feature-meta span {
  display: grid;
  gap: 6px;
}
.feature-meta b {
  font: 10px var(--mono);
  font-weight: 500;
}
.feature-meta small {
  font-size: 8px;
  color: #8c2c18;
}
.light-button {
  align-self: flex-start;
  background: var(--ink);
  color: var(--yellow);
  padding: 12px 15px;
  margin-top: 20px;
  font-size: 11px;
  display: flex;
  gap: 26px;
  align-items: center;
}
.light-button svg {
  width: 15px;
}
.feature-index {
  position: absolute;
  right: 20px;
  bottom: 15px;
  color: rgba(16, 17, 16, 0.48);
  font: 9px var(--mono);
}
.toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 52px;
  gap: 20px;
}
.section-heading {
  display: flex;
  align-items: baseline;
  gap: 15px;
}
.section-number {
  font: 10px var(--mono);
  color: var(--orange);
}
.section-heading h2 {
  font-size: 25px;
  letter-spacing: -0.05em;
  margin: 0;
}
.section-heading small {
  font-size: 9px;
  letter-spacing: 0.04em;
  color: #898a84;
  margin-left: 5px;
}
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-box {
  height: 36px;
  width: 210px;
  border-bottom: 1px solid #a6a69e;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8a8b84;
}
.search-box svg {
  width: 15px;
}
.search-box input {
  outline: 0;
  border: 0;
  background: transparent;
  width: 100%;
  font-size: 11px;
  color: var(--ink);
}
.search-box input::placeholder {
  color: #979890;
}
.toolbar-actions select {
  height: 36px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 10px;
  color: #66675f;
  padding: 0 9px;
  outline: 0;
}
.filter-strip {
  display: flex;
  align-items: end;
  gap: 26px;
  min-height: 41px;
  border-bottom: 1px solid var(--line);
  margin-top: 21px;
  overflow-x: auto;
  overflow-y: hidden;
}
.filter-label {
  padding-bottom: 13px;
  color: #a1a29a;
  font: 8px var(--mono);
  letter-spacing: 0.12em;
}
.filter {
  font: 10px var(--mono);
  padding: 0 0 12px;
  color: #8c8d85;
  border-bottom: 2px solid transparent;
}
.filter.active,
.filter:hover {
  color: var(--ink);
  border-color: var(--orange);
}
.filter-tag {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}
.filter-tag.deletable {
  padding-right: 14px;
}
.tag-delete {
  position: absolute;
  z-index: 2;
  right: 0;
  top: -5px;
  width: 14px;
  height: 14px;
  color: var(--orange);
  background: var(--paper);
  opacity: 0.82;
  transition:
    color 0.09s ease,
    transform 0.09s ease;
}
.tag-delete::before,
.tag-delete::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 8px;
  height: 1px;
  background: currentColor;
  transform-origin: center;
}
.tag-delete::before {
  transform: rotate(45deg);
}
.tag-delete::after {
  transform: rotate(-45deg);
}
.tag-delete:hover {
  color: #b63225;
  transform: scale(1.15);
}
.tag-create-inline {
  min-width: 250px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
}
.tag-create-inline input {
  width: 120px;
  height: 28px;
  border: 0;
  border-bottom: 1px solid var(--orange);
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 9px var(--mono);
}
.tag-create-inline button {
  height: 27px;
  padding: 0 7px;
  border: 1px solid var(--ink);
  font: 8px var(--mono);
}
.tag-create-inline button:first-of-type {
  background: var(--ink);
  color: var(--yellow);
}
.group-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 42px;
  border-bottom: 1px solid var(--line);
  overflow: auto;
}
.group-label {
  font: 9px var(--mono);
  color: #a1a29a;
  letter-spacing: 0.12em;
  margin-right: 2px;
}
.group-filter,
.group-add,
.tag-add {
  font: 10px var(--mono);
  color: #92938a;
  padding: 5px 0;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.group-filter.active,
.group-filter:hover {
  color: var(--ink);
  border-color: var(--yellow);
}
.group-add,
.tag-add {
  min-width: max-content;
  margin-left: auto;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border-bottom: 1px solid transparent;
  font: 9px var(--mono);
  line-height: 1;
}
.group-add {
  height: 41px;
}
.tag-add {
  height: 40px;
}
.group-add:hover,
.tag-add:hover {
  border-color: var(--orange);
}
.group-add svg,
.tag-add svg {
  width: 12px;
  height: 12px;
  display: block;
  flex: 0 0 12px;
}
.group-section {
  margin-top: 32px;
}
.group-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 13px;
}
.group-section-title {
  display: flex;
  align-items: baseline;
  gap: 11px;
}
.group-section-title h3 {
  font-size: 20px;
  letter-spacing: -0.06em;
  margin: 0;
}
.group-section-title span {
  color: #a0a19a;
  font: 9px var(--mono);
}
.group-section-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-action {
  font: 9px var(--mono);
  color: #9b9c94;
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
}
.edit-mode .section-action {
  color: var(--orange);
}
.section-action:hover {
  border-color: var(--orange);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 480px);
  justify-content: start;
  align-items: start;
  gap: 16px;
}
.prompt-card,
.add-tile {
  background: var(--paper-deep);
  border: 1px solid transparent;
  width: 100%;
  aspect-ratio: 3 / 2;
  align-self: start;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition:
    transform 0.2s,
    background 0.2s,
    border-color 0.2s;
  overflow: hidden;
}
.prompt-card:before,
.add-tile:before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--orange);
  clip-path: inset(0 100% 100% 0);
  pointer-events: none;
  z-index: 3;
}
.prompt-card:hover:before,
.add-tile:hover:before,
.prompt-card:focus-within:before {
  animation: trim-in 0.42s steps(4, end) forwards;
}
.prompt-card:hover,
.add-tile:hover {
  transform: translateY(-5px);
  border-color: var(--orange);
  background: var(--white);
}
.card-visual {
  width: 100%;
  height: auto;
  aspect-ratio: 13 / 5;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  color: #fbfaf6;
  background: #272c2a;
}
.card-grid-layer {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.8;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
  background-size: 23px 23px;
  animation: grid-drift 12s linear infinite;
}
/* 默认网格使用独立层，释放视觉层 ::before 给导入 CSS 的特效和事件动画。 */
.card-visual.has-custom-css .card-grid-layer,
.card-visual.has-image .card-grid-layer,
.card-visual.has-custom-css .visual-circle,
.card-visual.has-image .visual-circle {
  display: none;
}
.card-visual:after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  clip-path: inset(0 100% 100% 0);
  transition: clip-path 0.3s;
}
.prompt-card:hover .card-visual:after {
  clip-path: inset(0 0 0 0);
}
@property --preset-cycle-boundary {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 53%;
}
.card-visual[class*="theme-"] {
  --preset-cycle-boundary: 53%;
  --preset-cycle-left-start: var(--preset-cycle-a-start);
  --preset-cycle-left-end: var(--preset-cycle-a-end);
  --preset-cycle-right-start: var(--preset-cycle-b-start);
  --preset-cycle-right-end: var(--preset-cycle-b-end);
  background: linear-gradient(
    130deg,
    var(--preset-cycle-left-start) 0%,
    var(--preset-cycle-left-end) var(--preset-cycle-boundary),
    var(--preset-cycle-right-start) var(--preset-cycle-boundary),
    var(--preset-cycle-right-end) 100%
  );
}
.theme-technical-grid {
  --preset-cycle-a-start: #222827;
  --preset-cycle-a-end: #566059;
  --preset-cycle-b-start: #d97b43;
  --preset-cycle-b-end: #f0c548;
}
.theme-terminal-green {
  --preset-cycle-a-start: #13221c;
  --preset-cycle-a-end: #315b41;
  --preset-cycle-b-start: #91b87a;
  --preset-cycle-b-end: #27382d;
}
.theme-signal-orange {
  --preset-cycle-a-start: #2e2521;
  --preset-cycle-a-end: #ee5b2d;
  --preset-cycle-b-start: #f4c542;
  --preset-cycle-b-end: #29201d;
}
.theme-dark-orbit {
  --preset-cycle-a-start: #171a24;
  --preset-cycle-a-end: #30427e;
  --preset-cycle-b-start: #5f74e6;
  --preset-cycle-b-end: #202535;
  background:
    radial-gradient(circle at 62% 48%, #dbbf43 0 15%, transparent 16%),
    linear-gradient(
      130deg,
      var(--preset-cycle-left-start) 0%,
      var(--preset-cycle-left-end) var(--preset-cycle-boundary),
      var(--preset-cycle-right-start) var(--preset-cycle-boundary),
      var(--preset-cycle-right-end) 100%
    );
}
.theme-blueprint-blue {
  --preset-cycle-a-start: #182544;
  --preset-cycle-a-end: #4866cf;
  --preset-cycle-b-start: #a9bbed;
  --preset-cycle-b-end: #283a70;
}
.theme-noisy-paper {
  --preset-cycle-a-start: #c7c1b2;
  --preset-cycle-a-end: #eee7d9;
  --preset-cycle-b-start: #a7b0ab;
  --preset-cycle-b-end: #606a66;
}
.theme-acid-violet {
  --preset-cycle-a-start: #271f4c;
  --preset-cycle-a-end: #7667d6;
  --preset-cycle-b-start: #e3c65e;
  --preset-cycle-b-end: #302a5d;
}
.theme-aurora-noir {
  --preset-cycle-a-start: #071416;
  --preset-cycle-a-end: #15464a;
  --preset-cycle-b-start: #8ce6c4;
  --preset-cycle-b-end: #101e35;
  background:
    radial-gradient(
      ellipse at 78% 18%,
      rgba(123, 241, 207, 0.62),
      transparent 30%
    ),
    radial-gradient(
      ellipse at 19% 84%,
      rgba(82, 54, 169, 0.52),
      transparent 36%
    ),
    repeating-linear-gradient(
      116deg,
      rgba(255, 255, 255, 0.055) 0 1px,
      transparent 1px 13px
    ),
    linear-gradient(
      130deg,
      var(--preset-cycle-left-start) 0%,
      var(--preset-cycle-left-end) var(--preset-cycle-boundary),
      var(--preset-cycle-right-start) var(--preset-cycle-boundary),
      var(--preset-cycle-right-end) 100%
    );
}
.theme-ember-haze {
  --preset-cycle-a-start: #160f16;
  --preset-cycle-a-end: #6b2630;
  --preset-cycle-b-start: #ffb45b;
  --preset-cycle-b-end: #28151c;
  background:
    radial-gradient(
      ellipse at 72% 32%,
      rgba(255, 142, 60, 0.74),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 15% 76%,
      rgba(154, 35, 78, 0.52),
      transparent 38%
    ),
    repeating-radial-gradient(
      ellipse at 70% 35%,
      rgba(255, 211, 125, 0.09) 0 1px,
      transparent 1px 9px
    ),
    linear-gradient(
      130deg,
      var(--preset-cycle-left-start) 0%,
      var(--preset-cycle-left-end) var(--preset-cycle-boundary),
      var(--preset-cycle-right-start) var(--preset-cycle-boundary),
      var(--preset-cycle-right-end) 100%
    );
}
.theme-cobalt-mist {
  --preset-cycle-a-start: #071220;
  --preset-cycle-a-end: #2558a0;
  --preset-cycle-b-start: #b9ddff;
  --preset-cycle-b-end: #161b3b;
  background:
    radial-gradient(
      ellipse at 74% 20%,
      rgba(176, 221, 255, 0.72),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 28% 78%,
      rgba(43, 100, 221, 0.5),
      transparent 34%
    ),
    conic-gradient(
      from 210deg at 62% 45%,
      transparent 0 22%,
      rgba(111, 191, 255, 0.12) 28%,
      transparent 38% 100%
    ),
    linear-gradient(
      130deg,
      var(--preset-cycle-left-start) 0%,
      var(--preset-cycle-left-end) var(--preset-cycle-boundary),
      var(--preset-cycle-right-start) var(--preset-cycle-boundary),
      var(--preset-cycle-right-end) 100%
    );
}
.theme-plasma-rose {
  --preset-cycle-a-start: #160d27;
  --preset-cycle-a-end: #66277d;
  --preset-cycle-b-start: #ff9bc7;
  --preset-cycle-b-end: #2a103d;
  background:
    radial-gradient(
      ellipse at 76% 26%,
      rgba(255, 147, 202, 0.68),
      transparent 27%
    ),
    radial-gradient(
      ellipse at 14% 82%,
      rgba(113, 65, 231, 0.55),
      transparent 37%
    ),
    repeating-linear-gradient(
      28deg,
      transparent 0 18px,
      rgba(255, 255, 255, 0.055) 19px,
      transparent 20px 39px
    ),
    linear-gradient(
      130deg,
      var(--preset-cycle-left-start) 0%,
      var(--preset-cycle-left-end) var(--preset-cycle-boundary),
      var(--preset-cycle-right-start) var(--preset-cycle-boundary),
      var(--preset-cycle-right-end) 100%
    );
}
.card-visual.background-cycle-running:not(.has-image):not(.has-custom-css) {
  animation: preset-background-cycle 0.62s cubic-bezier(0.87, 0, 0.13, 1) 1 both;
}
@keyframes preset-background-cycle {
  0% {
    --preset-cycle-boundary: 53%;
    --preset-cycle-left-start: var(--preset-cycle-a-start);
    --preset-cycle-left-end: var(--preset-cycle-a-end);
    --preset-cycle-right-start: var(--preset-cycle-b-start);
    --preset-cycle-right-end: var(--preset-cycle-b-end);
  }
  30% {
    --preset-cycle-boundary: 100%;
    --preset-cycle-left-start: var(--preset-cycle-a-start);
    --preset-cycle-left-end: var(--preset-cycle-a-end);
    --preset-cycle-right-start: var(--preset-cycle-b-start);
    --preset-cycle-right-end: var(--preset-cycle-b-end);
  }
  30.01% {
    --preset-cycle-boundary: 0%;
    --preset-cycle-left-start: var(--preset-cycle-b-start);
    --preset-cycle-left-end: var(--preset-cycle-b-end);
    --preset-cycle-right-start: var(--preset-cycle-a-start);
    --preset-cycle-right-end: var(--preset-cycle-a-end);
  }
  68% {
    --preset-cycle-boundary: 100%;
    --preset-cycle-left-start: var(--preset-cycle-b-start);
    --preset-cycle-left-end: var(--preset-cycle-b-end);
    --preset-cycle-right-start: var(--preset-cycle-a-start);
    --preset-cycle-right-end: var(--preset-cycle-a-end);
  }
  68.01% {
    --preset-cycle-boundary: 0%;
    --preset-cycle-left-start: var(--preset-cycle-a-start);
    --preset-cycle-left-end: var(--preset-cycle-a-end);
    --preset-cycle-right-start: var(--preset-cycle-b-start);
    --preset-cycle-right-end: var(--preset-cycle-b-end);
  }
  100% {
    --preset-cycle-boundary: 53%;
    --preset-cycle-left-start: var(--preset-cycle-a-start);
    --preset-cycle-left-end: var(--preset-cycle-a-end);
    --preset-cycle-right-start: var(--preset-cycle-b-start);
    --preset-cycle-right-end: var(--preset-cycle-b-end);
  }
}
.visual-word {
  position: absolute;
  z-index: 1;
  color: var(--card-visual-title-color, #fbfaf6) !important;
  font-size: 34px;
  line-height: 0.82;
  letter-spacing: -0.08em;
  font-weight: 600;
  bottom: 14px;
  left: 15px;
}
.prompt-card.system-visual-title-color .card-visual .visual-word,
.prompt-card.system-visual-title-color .card-visual .visual-word::before,
.prompt-card.system-visual-title-color .card-visual .visual-word::after {
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
  filter: none !important;
}
.visual-word small {
  display: block;
  font: 9px var(--mono);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}
.visual-number {
  font: 34px var(--mono);
  position: absolute;
  right: 14px;
  top: 14px;
  opacity: 0.72;
  z-index: 1;
}
.visual-circle {
  width: 93px;
  height: 93px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  position: absolute;
  right: 24px;
  bottom: -26px;
  z-index: 1;
  animation: circle-float 5s ease-in-out infinite;
}
.lineage-mark {
  position: absolute;
  right: 12px;
  bottom: 11px;
  z-index: 2;
  background: var(--ink);
  color: var(--yellow);
  padding: 4px 6px;
  font: 9px var(--mono);
  display: flex;
  align-items: center;
  gap: 4px;
}
.lineage-mark svg {
  width: 11px;
}
.card-info {
  padding: 15px 15px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.card-topline {
  display: flex;
  justify-content: space-between;
  color: #8a8b84;
  font: 9px var(--mono);
  text-transform: uppercase;
  gap: 10px;
}
.card-topline .category {
  color: var(--orange);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prompt-card h3 {
  color: var(--card-title-color, var(--ink));
  font-size: 18px;
  line-height: 1.02;
  letter-spacing: -0.05em;
  margin: 12px 0 8px;
  font-weight: 600;
}
.prompt-card p {
  font-size: 11px;
  line-height: 1.45;
  color: #777870;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-bottom {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font: 9px var(--mono);
  color: #96978f;
}
.card-bottom .file-type {
  color: var(--ink);
  border: 1px solid #c0c0b8;
  padding: 4px 5px;
  white-space: nowrap;
}
.card-bottom .size-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-arrow {
  width: 22px;
  height: 22px;
  border: 1px solid #c0c0b8;
  display: grid;
  place-items: center;
  color: #777870;
  flex: 0 0 22px;
}
.card-arrow svg {
  width: 12px;
}
.add-tile {
  border: 1px dashed #aaa99f;
  background: transparent;
  align-items: center;
  justify-content: center;
  color: #8d8e86;
  gap: 10px;
}
.add-tile:hover {
  background: #e8c7b7;
  color: var(--ink);
}
.add-tile .plus-frame {
  width: 54px;
  height: 54px;
  border: 1px solid currentColor;
  display: grid;
  place-items: center;
  position: relative;
}
.add-tile .plus-frame:before,
.add-tile .plus-frame:after {
  content: "";
  position: absolute;
  background: currentColor;
}
.add-tile .plus-frame:before {
  height: 1px;
  width: 17px;
}
.add-tile .plus-frame:after {
  width: 1px;
  height: 17px;
}
.add-tile b {
  font: 11px var(--mono);
  letter-spacing: 0.1em;
}
.add-tile small {
  font: 9px var(--mono);
  color: #a1a29a;
}
.inline-create {
  grid-column: span 1;
  background: var(--white);
  border: 1px solid var(--orange);
  padding: 18px;
  display: grid;
  gap: 9px;
  min-height: 260px;
  position: relative;
}
.inline-create h4 {
  font-size: 19px;
  letter-spacing: -0.05em;
  margin: 0;
}
.inline-create label {
  display: grid;
  gap: 4px;
  font: 9px var(--mono);
  color: #777870;
}
.inline-create input,
.inline-create select,
.inline-create textarea {
  border: 0;
  border-bottom: 1px solid #aaa99f;
  background: transparent;
  padding: 6px 2px;
  outline: 0;
  font-size: 11px;
  color: var(--ink);
}
.inline-create textarea {
  resize: vertical;
  min-height: 42px;
}
.inline-create .create-actions {
  display: flex;
  gap: 7px;
  align-items: end;
}
.inline-create button {
  font: 10px var(--mono);
  padding: 8px 10px;
}
.inline-create .primary {
  background: var(--ink);
  color: var(--yellow);
}
.empty-state {
  padding: 80px 0;
  text-align: center;
  color: #888980;
}
.empty-state svg {
  width: 30px;
  margin-bottom: 12px;
  color: var(--orange);
}
.empty-state h3 {
  font-size: 20px;
  margin: 0 0 6px;
}
.empty-state p {
  font: 11px var(--mono);
  margin: 0;
}
.main-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 62px;
  border-top: 1px solid var(--line);
  padding-top: 15px;
  color: #989991;
  font-size: 9px;
}
.main-footer b {
  color: var(--ink);
  font-weight: 500;
}
.main-footer kbd {
  font: 9px var(--mono);
  color: var(--ink);
  border: 1px solid #aaa99f;
  padding: 2px 5px;
}
.modal-backdrop {
  position: fixed;
  z-index: 60;
  inset: 0;
  background: rgba(16, 17, 16, 0.74);
  display: grid;
  place-items: center;
  padding: clamp(10px, 1.25vw, 24px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  overscroll-behavior: contain;
}
.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  position: relative;
  background: var(--paper);
  width: min(600px, 100%);
  padding: 37px 40px;
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.2);
}
.modal:before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--orange);
  pointer-events: none;
  clip-path: inset(0 100% 100% 0);
  animation: trim-modal 0.42s steps(4, end) forwards;
}
.modal-close {
  position: absolute;
  right: 17px;
  top: 17px;
  color: #6f7069;
  z-index: 2;
}
.modal-close svg {
  width: 18px;
}
.modal h2 {
  font-size: 38px;
  letter-spacing: -0.07em;
  line-height: 1;
  margin: 0 0 10px;
}
.modal-subtitle {
  font-size: 12px;
  line-height: 1.55;
  color: #797a72;
  max-width: 500px;
  margin: 0 0 26px;
}
.auth-modal {
  width: min(460px, 100%);
}
.auth-modal form {
  display: grid;
  gap: 17px;
}
.auth-modal label {
  display: grid;
  gap: 6px;
  font: 10px var(--mono);
  color: #777870;
}
.auth-modal input {
  height: 42px;
  border: 0;
  border-bottom: 1px solid #a7a79f;
  background: transparent;
  outline: 0;
  padding: 0 4px;
  font-size: 13px;
}
.auth-modal input:focus {
  border-color: var(--orange);
}
.switch-auth {
  font: 10px var(--mono);
  color: var(--orange);
  border-bottom: 1px solid var(--orange);
  padding: 0 0 4px;
  margin-top: 18px;
}
.upload-confirm {
  width: 100%;
  background: var(--ink);
  color: var(--yellow);
  height: 43px;
  margin-top: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  font-size: 12px;
}
.preview-modal {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 26px 32px 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.preview-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 21px;
  flex: 0 0 auto;
}
.preview-head h2 {
  font-size: 32px;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.06em;
}
.preview-meta {
  color: #888980;
  margin-top: 12px;
  font-size: 9px;
}
.preview-actions {
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.copy-button {
  height: 37px;
  background: var(--ink);
  color: var(--yellow);
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 10px var(--mono);
  transition: 0.2s;
}
.copy-button:hover,
.copy-button.copied {
  background: var(--orange);
  color: var(--ink);
}
.copy-button svg {
  width: 14px;
}
.icon-button {
  width: 37px;
  height: 37px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: #61625a;
}
.icon-button:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.icon-button.danger:hover {
  border-color: #b53d2d;
  color: #b53d2d;
}
.icon-button svg {
  width: 15px;
}
.preview-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(340px, 0.9fr);
  grid-template-rows: minmax(180px, 1fr) var(--timeline-pane-size, 280px);
  gap: 12px;
  min-height: 0;
  flex: 1;
  margin-top: 14px;
  overflow: hidden;
}
.preview-modal.card-editor-active {
  padding: 18px;
  background: #101211;
}
.preview-modal.card-editor-active > .modal-close,
.preview-modal.card-editor-active > .preview-head,
.preview-modal.card-editor-active > .preview-layout {
  display: none;
}
.card-visual-editor {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: #ebe9df;
  background: #101211;
  animation: card-editor-enter 0.16s cubic-bezier(0.22, 0.82, 0.24, 1) both;
}
@keyframes card-editor-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 5px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.card-editor-head {
  min-height: 70px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid #3b3e39;
  background: #171918;
}
.card-editor-head span,
.editor-node-code,
.editor-preview-readout,
.editor-preview-foot {
  font: 8px var(--mono);
  letter-spacing: 0.1em;
}
.card-editor-head span {
  color: #777b74;
}
.card-editor-head h3 {
  margin: 3px 0 0;
  color: var(--white);
  font-size: 23px;
  line-height: 1;
  letter-spacing: -0.06em;
}
.card-editor-head-actions {
  display: flex;
  gap: 7px;
}
.card-editor-head-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #555951;
  color: #aeb1aa;
  font: 9px var(--mono);
  transition:
    color 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}
.card-editor-head-actions button:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.card-editor-head-actions button.primary {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--orange);
  background: var(--orange);
  color: #111312;
}
.card-editor-head-actions button.primary:hover {
  border-color: var(--ink);
  background: var(--yellow);
  color: var(--ink);
}
.card-editor-head-actions button.primary svg {
  width: 12px;
}
.card-editor-head-actions button:disabled {
  opacity: 0.6;
}
.card-editor-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns:
    minmax(270px, 1fr) minmax(330px, 390px)
    minmax(270px, 1fr);
  grid-template-rows: minmax(220px, 1fr) minmax(220px, 1fr);
  align-items: center;
  gap: 30px clamp(34px, 4vw, 64px);
  padding: 30px clamp(26px, 4vw, 60px);
  background-color: #101211;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(238, 91, 45, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 91, 45, 0.035) 1px, transparent 1px);
  background-size:
    20px 20px,
    20px 20px,
    100px 100px,
    100px 100px;
}
.card-editor-stage::before,
.card-editor-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 38px;
  height: 38px;
  border-color: var(--orange);
}
.card-editor-stage::before {
  left: 10px;
  top: 10px;
  border-left: 1px solid var(--orange);
  border-top: 1px solid var(--orange);
}
.card-editor-stage::after {
  right: 10px;
  bottom: 10px;
  border-right: 1px solid var(--orange);
  border-bottom: 1px solid var(--orange);
}
.editor-control-node {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 360px;
  padding: 12px 0;
  color: #ebe9df;
}
.editor-node-copy,
.editor-node-surface {
  justify-self: end;
}
.editor-node-taxonomy,
.editor-node-source {
  justify-self: start;
}
.editor-node-copy {
  grid-column: 1;
  grid-row: 1;
}
.editor-node-taxonomy {
  grid-column: 3;
  grid-row: 1;
}
.editor-node-surface {
  grid-column: 1;
  grid-row: 2;
}
.editor-node-source {
  grid-column: 3;
  grid-row: 2;
}
.editor-node-code {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--orange);
}
.editor-node-code::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(238, 91, 45, 0.35);
}
.editor-control-node label {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  color: #8c9088;
  font: 8px var(--mono);
}
.editor-control-node input,
.editor-control-node select,
.editor-control-node textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #565a53;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #f2f0e8;
  padding: 8px 24px 8px 2px;
  font: 11px var(--mono);
  transition:
    border-color 0.14s ease,
    color 0.14s ease;
}
.editor-control-node select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #ebe9df 50%),
    linear-gradient(135deg, #ebe9df 50%, transparent 50%);
  background-position:
    calc(100% - 8px) calc(50% - 1px),
    calc(100% - 4px) calc(50% - 1px);
  background-size:
    4px 4px,
    4px 4px;
  background-repeat: no-repeat;
}
.editor-control-node textarea {
  min-height: 64px;
  resize: vertical;
  line-height: 1.45;
}
.editor-title-color {
  margin-top: 11px;
  padding-bottom: 10px;
  border-bottom: 1px solid #565a53;
}
.editor-title-color-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8c9088;
  font: 8px var(--mono);
}
.editor-title-color-head output {
  color: #d7d9d1;
  letter-spacing: 0.08em;
}
.editor-title-color-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
}
.editor-title-color-controls > button {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1px solid #4c504a;
  background: var(--title-color-swatch);
  transition:
    transform 0.12s ease,
    border-color 0.12s ease;
}
.editor-title-color-controls > button::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid transparent;
  pointer-events: none;
}
.editor-title-color-controls > button:hover {
  transform: translateY(-2px);
  border-color: #f1efe7;
}
.editor-title-color-controls > button.active::after {
  border-color: var(--orange);
  clip-path: polygon(0 0, 48% 0, 48% 1px, 1px 1px, 1px 48%, 0 48%, 0 0, 100% 0, 100% 100%, 52% 100%, 52% calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) 52%, 100% 52%);
}
.editor-color-picker {
  position: relative;
  min-width: 82px;
  height: 20px;
  margin: 0 0 0 auto !important;
  padding: 0 8px;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 6px !important;
  border: 1px solid #4c504a;
  color: #a9aca4 !important;
  overflow: hidden;
}
.editor-color-picker:hover {
  border-color: var(--orange);
  color: var(--orange) !important;
}
.editor-color-picker input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
}
.editor-color-picker svg {
  width: 10px;
  height: 10px;
  pointer-events: none;
}
.editor-color-picker span {
  font: 7px var(--mono);
  letter-spacing: 0.08em;
  pointer-events: none;
}
.editor-control-node input:focus,
.editor-control-node select:focus,
.editor-control-node textarea:focus {
  border-color: var(--orange);
}
.card-editor-preview-shell {
  position: relative;
  z-index: 5;
  grid-column: 2;
  grid-row: 1 / 3;
  width: 100%;
  align-self: center;
}
.editor-preview-readout,
.editor-preview-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #777b74;
}
.editor-preview-readout {
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid #41443f;
}
.editor-preview-readout b,
.editor-preview-foot b {
  color: var(--orange);
  font-weight: 500;
}
.editor-preview-foot {
  margin-top: 8px;
}
.editor-preview-foot i {
  flex: 1;
  height: 1px;
  margin: 0 9px;
  background: #41443f;
}
#cardEditorPreview {
  position: relative;
  box-shadow: 9px 9px 0 rgba(238, 91, 45, 0.2);
}
.card-editor-live-card {
  width: 100%;
  pointer-events: auto;
  cursor: default;
}
.editor-theme-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  margin-top: 10px;
}
.theme-chip {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid #474a45;
  color: #8c9088;
  text-align: left;
  font: 7px var(--mono);
}
.theme-chip i {
  width: 22px;
  height: 9px;
  flex: 0 0 22px;
}
.theme-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.theme-chip.active {
  border-color: var(--orange);
  color: #f2f0e8;
}
.theme-chip.active::after {
  content: "SELECTED";
  margin-left: auto;
  color: var(--orange);
  font-size: 6px;
}
.editor-import-control {
  grid-template-columns: 36px 1fr !important;
  align-items: center;
  gap: 9px !important;
  min-height: 45px;
  margin-top: 0 !important;
  border-top: 1px solid #474a45;
  border-bottom: 1px solid #474a45;
  color: #ebe9df !important;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    color 0.16s ease;
}
.editor-import-control:hover {
  border-color: var(--orange);
  color: var(--orange) !important;
}
.editor-import-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.editor-import-icon {
  height: 28px;
  display: grid;
  place-items: center;
  border-right: 1px solid #474a45;
}
.editor-import-icon svg {
  width: 14px;
}
.editor-import-copy {
  display: grid;
  gap: 2px;
}
.editor-import-copy b {
  font: 9px var(--mono);
  font-weight: 500;
}
.editor-import-copy small {
  color: #777b74;
  font: 7px var(--mono);
}
.editor-file-readout {
  min-height: 30px;
  display: grid;
  grid-template-columns: 12px 1fr;
  align-items: center;
  gap: 7px;
  padding-top: 7px;
  color: #777b74;
  font: 8px/1.4 var(--mono);
}
.editor-file-readout i {
  width: 6px;
  height: 6px;
  border: 1px solid var(--orange);
  transform: rotate(45deg);
}
.editor-source-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.editor-source-download {
  min-height: 28px;
  padding: 0 0 0 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-left: 1px solid #474a45;
  color: var(--yellow);
  font: 7px var(--mono);
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition:
    color 0.14s ease,
    border-color 0.14s ease;
}
.editor-source-download svg {
  width: 11px;
  height: 11px;
}
.editor-source-download:hover:not(:disabled) {
  color: var(--orange);
  border-color: var(--orange);
}
.editor-source-download:disabled {
  color: #4f524d;
  cursor: not-allowed;
}
.workspace-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  transition:
    opacity 0.28s ease,
    transform 0.38s cubic-bezier(0.22, 0.82, 0.24, 1),
    filter 0.28s ease;
}
.workspace-pane-head {
  height: 35px;
  flex: 0 0 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 12px;
  border-bottom: 1px solid var(--line);
  color: #7e8078;
  background: #e6e3da;
  font: 8px var(--mono);
  letter-spacing: 0.09em;
}
.workspace-pane-head button {
  height: 23px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 7px;
  border: 1px solid #aaa99f;
  color: var(--ink);
  font: 7px var(--mono);
}
.workspace-pane-head button:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.workspace-pane-head svg {
  width: 11px;
}
.workspace-pane-head b {
  color: var(--orange);
  font-weight: 500;
}
.preview-main {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.preview-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-top: 0;
  background: #1a1c1b;
  color: #e9e6d8;
  padding: 38px 48px;
  font: 13px/1.85 var(--mono);
  white-space: normal;
  scrollbar-color: #4b4e47 #1a1c1b;
}
.preview-body pre {
  white-space: pre-wrap;
  margin: 0;
}
.preview-body h1,
.preview-body h2,
.preview-body h3 {
  color: var(--yellow);
  font-family: var(--display);
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 18px;
}
.preview-body h1 {
  font-size: 42px;
}
.preview-body h2 {
  font-size: 29px;
}
.preview-body h3 {
  font-size: 21px;
}
.preview-body p {
  margin: 0 0 15px;
}
.preview-body strong {
  color: #fff;
}
.preview-body code {
  color: #f38b5d;
  background: #282b28;
  padding: 2px 4px;
}
.preview-body ul {
  padding-left: 20px;
}
.preview-body blockquote {
  border-left: 2px solid var(--orange);
  margin: 10px 0;
  padding-left: 18px;
  color: #cfcabd;
}
.preview-loading {
  display: grid;
  gap: 12px;
  padding-top: 8px;
}
.preview-loading span {
  display: block;
  width: 100%;
  height: 9px;
  overflow: hidden;
  background: #2b2e2b;
}
.preview-loading span:nth-child(2) {
  width: 82%;
}
.preview-loading span:nth-child(3) {
  width: 64%;
}
.preview-loading span::after {
  content: "";
  display: block;
  width: 42%;
  height: 100%;
  background: var(--orange);
  transform: translate3d(-110%, 0, 0);
  animation: preview-load 0.9s steps(8, end) infinite;
}
@keyframes preview-load {
  to {
    transform: translate3d(360%, 0, 0);
  }
}
.preview-footer {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #92938a;
  font: 9px var(--mono);
  padding: 0 11px;
  background: var(--paper);
}
.preview-footer kbd {
  border: 1px solid #aaa99f;
  color: var(--ink);
  padding: 2px 4px;
}
.preview-rail {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  min-height: 0;
}
.preview-rail > .cluster-list {
  flex: 1;
  min-height: 48px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 8px;
  scrollbar-color: var(--orange) #d7d4cb;
}
.preview-rail > .cluster-drop-zone {
  flex: 0 0 auto;
  margin: 7px 8px 9px;
}
.preview-rail.file-drag-active::after {
  content: "DROP FILES / ADD TO CURRENT NODE";
  position: absolute;
  z-index: 7;
  inset: 35px 0 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--orange);
  background: rgba(16, 18, 17, 0.91);
  color: var(--yellow);
  font: 9px var(--mono);
  letter-spacing: 0.09em;
  pointer-events: none;
  clip-path: polygon(
    0 0,
    92% 0,
    92% 7px,
    100% 7px,
    100% 100%,
    8% 100%,
    8% calc(100% - 7px),
    0 calc(100% - 7px)
  );
}
.preview-rail > .inline-edit-panel {
  position: absolute;
  z-index: 8;
  inset: 35px 0 0;
  margin: 0;
  padding: 14px;
  overflow: auto;
  background: var(--paper);
}
.rail-block {
  padding: 3px 0 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.rail-title {
  display: flex;
  justify-content: space-between;
  color: #85867f;
  font: 9px var(--mono);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.rail-title span {
  color: var(--orange);
}
.version-list {
  display: grid;
  gap: 3px;
}
.cluster-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
}
.cluster-folder {
  position: relative;
  padding-left: calc(var(--folder-depth, 0) * 12px);
  border-left: 2px solid #c8a83b;
  background: rgba(228, 224, 211, 0.42);
}
.cluster-folder-row {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid #c9c5b9;
}
.cluster-folder-toggle {
  width: 100%;
  min-height: 41px;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  color: #383b36;
  text-align: left;
  font: 9px var(--mono);
}
.cluster-folder-toggle:hover,
.cluster-folder.drop-target > .cluster-folder-row {
  color: var(--orange);
  background: #d8d3c5;
}
.cluster-folder-toggle svg {
  width: 14px;
  height: 14px;
}
.cluster-folder-toggle span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cluster-folder-toggle small {
  color: #999a92;
  font: 7px var(--mono);
  white-space: nowrap;
}
.cluster-folder-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 6px;
}
.cluster-folder-actions button,
.cluster-root-row > button,
.cluster-folder-create button {
  min-width: 25px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  color: #7d7f77;
}
.cluster-folder-actions button:hover,
.cluster-root-row > button:hover,
.cluster-folder-create button:hover {
  color: var(--orange);
  background: #cfc9bb;
}
.cluster-folder-actions svg,
.cluster-root-row svg,
.cluster-folder-create svg {
  width: 13px;
  height: 13px;
}
.cluster-folder-children {
  display: block;
  padding-left: 10px;
  background: rgba(247, 245, 238, 0.48);
}
.cluster-folder.is-collapsed > .cluster-folder-children {
  display: none;
}
.cluster-dragging {
  opacity: 0.42;
}
.cluster-root-row {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid #b9b5a9;
  border-left: 3px solid var(--orange);
  background: #d9d5ca;
  color: #555850;
  font: 8px var(--mono);
}
.cluster-root-row > span,
.cluster-root-row > button {
  display: flex;
  align-items: center;
  gap: 7px;
}
.cluster-root-row > button {
  font: 7px var(--mono);
}
.cluster-root-row.drop-target {
  border-color: var(--orange);
  background: #efc6b7;
}
.cluster-folder-create {
  min-height: 38px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 27px 27px;
  align-items: center;
  gap: 5px;
  padding: 5px 6px 5px calc(8px + var(--folder-depth, 0) * 10px);
  border-bottom: 1px solid var(--orange);
  background: #f1eee5;
  color: var(--orange);
}
.cluster-folder-create input {
  min-width: 0;
  height: 27px;
  border: 0;
  border-bottom: 1px solid #8d8e87;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 9px var(--mono);
}
.version-item,
.cluster-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  padding: 9px 6px;
  color: #777870;
}
.version-item:hover,
.version-item.active,
.cluster-item:hover,
.cluster-item.active {
  background: #e1ded5;
  color: var(--ink);
}
.version-item i {
  width: 12px;
  margin-left: auto;
}
.version-item svg,
.cluster-item svg {
  width: 13px;
}
.version-item b {
  display: block;
  font: 11px var(--mono);
  color: inherit;
}
.version-item small {
  display: block;
  font: 9px var(--mono);
  color: #999a92;
  margin-top: 4px;
}
.version-dot {
  width: 6px;
  height: 6px;
  background: #aaa99f;
  flex: 0 0 6px;
}
.version-item.active .version-dot {
  background: var(--orange);
  box-shadow: 0 0 9px var(--orange);
}
.cluster-item span {
  font: 10px var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cluster-item {
  position: relative;
  min-height: 52px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 8px 9px 8px calc(9px + var(--file-depth, 0) * 18px);
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.cluster-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: #aaa99f;
}
.cluster-item:hover,
.cluster-item.active {
  transform: none;
  background: #dcd9d0;
}
.cluster-item.active::before {
  background: var(--orange);
}
.cluster-file-index {
  color: #9a9b94;
  font: 8px var(--mono) !important;
}
.cluster-file-copy {
  min-width: 0;
}
.cluster-file-copy b,
.cluster-file-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cluster-file-copy b {
  color: var(--ink);
  font: 10px var(--mono);
  font-weight: 500;
}
.cluster-file-copy small {
  margin-top: 4px;
  color: #999a92;
  font: 7px var(--mono);
}
.cluster-item > svg {
  width: 14px;
  color: #85877f;
}
.rail-empty {
  color: #aaa9a0;
  font: 9px var(--mono);
  padding: 8px 5px;
}
.inline-edit-panel {
  display: grid;
  gap: 10px;
}
.inline-edit-panel label {
  display: grid;
  gap: 6px;
  font: 9px var(--mono);
  color: #777870;
}
.inline-edit-panel input,
.inline-edit-panel select,
.inline-edit-panel textarea {
  height: 34px;
  border: 0;
  border-bottom: 1px solid #a7a79f;
  background: transparent;
  outline: 0;
  padding: 0 4px;
  color: var(--ink);
  font-size: 11px;
}
.inline-edit-panel textarea {
  height: 60px;
  resize: vertical;
  padding-top: 8px;
}
.edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 3px;
}
.edit-actions button {
  font: 10px var(--mono);
  padding: 8px 10px;
}
.edit-actions button:first-child {
  border: 1px solid var(--line);
}
.edit-actions button:last-child {
  background: var(--ink);
  color: var(--yellow);
}
.drop-action-modal {
  width: min(520px, 100%);
  overflow: hidden;
}
.drop-actions {
  display: grid;
  gap: 7px;
}
.drop-actions button {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  border: 1px solid var(--line);
  padding: 13px 14px;
  transition: 0.18s;
}
.drop-actions button:hover {
  border-color: var(--orange);
  background: var(--white);
  transform: translateX(4px);
}
.drop-actions svg {
  width: 20px;
  color: var(--orange);
}
.drop-actions b,
.drop-actions small {
  display: block;
}
.drop-actions b {
  font: 12px var(--display);
}
.drop-actions small {
  font: 9px var(--mono);
  color: #8b8c84;
  margin-top: 4px;
}
.drop-step-label,
.drop-target-head,
.drop-target-hint {
  font: 8px var(--mono);
  letter-spacing: 0.08em;
}
.drop-step-label {
  margin: 18px 0 8px;
  color: var(--orange);
}
.drop-target-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 10px;
  color: var(--orange);
}
.drop-target-head button {
  padding: 6px 8px;
  border: 1px solid var(--line);
  color: var(--ink);
  font: 8px var(--mono);
}
.drop-target-hint {
  margin-bottom: 12px;
  color: #777870;
}
.drop-target-nodes {
  max-height: 310px;
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  padding: 4px 7px 10px 9px;
  padding-right: 7px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.22);
  scrollbar-color: var(--orange) #d7d4cb;
}
.drop-version-tree,
.drop-version-tree ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.drop-version-tree ul {
  margin-left: 24px;
  padding-left: 17px;
}
.drop-version-tree ul::before {
  content: "";
  position: absolute;
  left: 0;
  top: -8px;
  bottom: 29px;
  border-left: 1px solid #aaa99f;
}
.drop-tree-item {
  position: relative;
}
.drop-tree-item > .drop-target-node::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 50%;
  width: 17px;
  border-top: 1px solid #aaa99f;
}
.drop-target-node {
  position: relative;
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px 9px 17px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.drop-target-node:hover {
  color: var(--white);
  background: var(--ink);
  transform: translateX(4px);
}
.drop-node-line {
  display: none;
}
.drop-node-port {
  position: absolute;
  left: -6px;
  top: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border: 2px solid var(--orange);
  background: var(--paper);
  transform: rotate(45deg);
}
.drop-target-node b,
.drop-target-node small {
  display: block;
}
.drop-target-node b {
  font: 12px var(--display);
}
.drop-target-node small {
  margin-top: 4px;
  color: #85867f;
  font: 8px var(--mono);
}
.drop-target-node em {
  color: var(--orange);
  font: normal 7px var(--mono);
}
.drop-target-node:hover small {
  color: #b9bbb4;
}
.drop-tree-root > .drop-target-node::before {
  display: none;
}
.drop-target-node.branch .drop-node-port {
  border-color: var(--yellow);
}
.drop-target-node[aria-busy="true"] {
  pointer-events: none;
  color: var(--orange);
}
.toast {
  position: fixed;
  z-index: 110;
  right: 24px;
  bottom: 24px;
  background: var(--ink);
  color: var(--white);
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  font: 11px var(--mono);
  transform: translateY(15px);
  opacity: 0;
  transition: 0.2s;
  box-shadow: 7px 7px 0 rgba(238, 91, 45, 0.22);
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}
.toast svg {
  width: 14px;
  color: var(--green);
}
.drop-target {
  outline: 1px dashed var(--orange);
  outline-offset: 6px;
  background: #f6d8c8;
}
.dragging-card {
  opacity: 0.35;
  transform: scale(0.97);
}
.drag-ghost {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  width: 240px;
  background: var(--ink);
  color: var(--yellow);
  padding: 14px;
  box-shadow: 10px 10px 0 rgba(238, 91, 45, 0.28);
  font: 11px var(--mono);
  transform: rotate(-2deg);
  display: none;
}
.drag-ghost.show {
  display: block;
}
@keyframes trim-in {
  0% {
    clip-path: inset(0 100% 100% 0);
  }
  25% {
    clip-path: inset(0 0 100% 0);
  }
  50% {
    clip-path: inset(0 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes trim-card {
  0%,
  100% {
    clip-path: inset(0 100% 100% 0);
  }
  15%,
  70% {
    clip-path: inset(0 0 0 0);
  }
  85% {
    clip-path: inset(100% 0 0 100%);
  }
}
@keyframes trim-modal {
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes grid-drift {
  to {
    background-position: 46px 23px;
  }
}
@keyframes circle-float {
  50% {
    transform: translate(-8px, -5px) rotate(11deg);
  }
}
@keyframes orbit-breathe {
  50% {
    transform: scale(1.06);
    opacity: 0.78;
  }
}
@keyframes orbit-tilt {
  50% {
    opacity: 0.72;
    border-color: rgba(244, 197, 66, 0.82);
  }
}
@keyframes sun-pulse {
  50% {
    box-shadow: 0 0 82px rgba(244, 197, 66, 0.4);
  }
}
select:not([multiple]) {
  --select-surface: var(--paper);
  --select-text: var(--ink);
  --select-border: #aaa99f;
  appearance: none;
  border-radius: 0;
  color: var(--select-text);
  cursor: pointer;
  padding-right: 27px !important;
  background-image:
    linear-gradient(45deg, transparent 48%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 52%) !important;
  background-position:
    calc(100% - 12px) calc(50% - 1px),
    calc(100% - 8px) calc(50% - 1px) !important;
  background-size:
    4px 4px,
    4px 4px !important;
  background-repeat: no-repeat !important;
  transition:
    border-color 0.11s ease,
    color 0.11s ease,
    background-color 0.11s ease;
}
select:not([multiple]):hover,
select:not([multiple]):focus {
  border-color: var(--orange) !important;
  color: var(--orange);
}
select:not([multiple]) option {
  background: var(--select-surface);
  color: var(--select-text);
  font-family: var(--mono);
}
.card-visual-editor select {
  --select-surface: #171918;
  --select-text: #ebe9df;
  --select-border: #565a53;
  color-scheme: dark;
}
.select-ui-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.select-ui {
  --select-ui-surface: var(--paper);
  --select-ui-panel: #e3e1d9;
  --select-ui-text: var(--ink);
  --select-ui-muted: #85867f;
  --select-ui-line: #aaa99f;
  --select-ui-accent: var(--orange);
  --select-ui-height: 34px;
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 0;
  color: var(--select-ui-text);
  font: 10px var(--mono);
  text-align: left;
}
.select-ui.open {
  z-index: 75;
}
.select-ui-trigger {
  position: relative;
  width: 100%;
  height: var(--select-ui-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 9px 0 3px;
  border-bottom: 1px solid var(--select-ui-line);
  color: var(--select-ui-text);
  background: transparent;
  text-align: left;
  font: inherit;
  transition:
    color 0.11s ease,
    border-color 0.11s ease;
}
.select-ui-trigger::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--select-ui-accent);
  transition: width 0.16s ease;
}
.select-ui:hover .select-ui-trigger,
.select-ui.open .select-ui-trigger,
.select-ui-trigger:focus-visible {
  color: var(--select-ui-accent);
  border-color: var(--select-ui-accent);
  outline: 0;
}
.select-ui:hover .select-ui-trigger::before,
.select-ui.open .select-ui-trigger::before,
.select-ui-trigger:focus-visible::before {
  width: 100%;
}
.select-ui-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-ui-arrow {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.13s ease;
}
.select-ui.open .select-ui-arrow {
  transform: translateY(2px) rotate(225deg);
}
.select-ui-menu {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  display: none;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--select-ui-line);
  border-top-color: var(--select-ui-accent);
  background: var(--select-ui-surface);
  box-shadow: 6px 6px 0 rgba(16, 17, 16, 0.16);
}
.select-ui.open .select-ui-menu {
  display: block;
  animation: select-panel-in 0.12s cubic-bezier(0.22, 0.82, 0.24, 1) both;
}
.select-ui.drop-up .select-ui-menu {
  top: auto;
  bottom: calc(100% + 4px);
  transform-origin: bottom;
}
@keyframes select-panel-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.select-ui-menu [data-select-option] {
  position: relative;
  width: 100%;
  min-height: 31px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px;
  align-items: center;
  gap: 8px;
  padding: 0 9px 0 11px;
  border-bottom: 1px solid
    color-mix(in srgb, var(--select-ui-line) 42%, transparent);
  color: var(--select-ui-muted);
  background: var(--select-ui-surface);
  text-align: left;
  font: inherit;
}
.select-ui-menu [data-select-option]:last-child {
  border-bottom: 0;
}
.select-ui-menu [data-select-option]:hover,
.select-ui-menu [data-select-option]:focus-visible {
  outline: 0;
  color: var(--select-ui-text);
  background: var(--select-ui-panel);
}
.select-ui-menu [data-select-option].selected {
  color: var(--select-ui-accent);
}
.select-ui-menu [data-select-option] i {
  width: 5px;
  height: 5px;
  justify-self: end;
  background: transparent;
  transform: rotate(45deg);
}
.select-ui-menu [data-select-option].selected i {
  background: var(--select-ui-accent);
  box-shadow: 0 0 0 1px var(--select-ui-surface);
}
.select-ui-menu [data-select-option]:disabled {
  opacity: 0.35;
}
.select-ui.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.card-visual-editor .select-ui {
  --select-ui-surface: #171918;
  --select-ui-panel: #242724;
  --select-ui-text: #ebe9df;
  --select-ui-muted: #969a92;
  --select-ui-line: #565a53;
}
.card-visual-editor .select-ui-menu {
  box-shadow: 6px 6px 0 rgba(238, 91, 45, 0.2);
}
.toolbar-actions > .select-ui {
  --select-ui-height: 36px;
  width: 118px;
  font-size: 9px;
}
.editor-control-node .select-ui {
  --select-ui-height: 38px;
  font-size: 11px;
}
.inline-create .select-ui,
.inline-edit-panel .select-ui {
  --select-ui-height: 32px;
  font-size: 10px;
}
.group-inline-editor .select-ui {
  --select-ui-height: 29px;
  width: 150px;
}
.user-row .select-ui,
.group-row .select-ui {
  --select-ui-height: 31px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .cursor-system {
    display: none;
  }
}
@media (max-width: 1050px) {
  .sidebar {
    width: 210px;
    flex-basis: 210px;
  }
  .main-content {
    margin-left: 210px;
    padding: 0 30px;
  }
  .card-grid {
    grid-template-columns: min(480px, 100%);
  }
  .intro-row {
    padding-top: 40px;
  }
  .featured-card {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 880px) {
  .preview-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.8fr);
  }
  .preview-rail {
    display: flex;
    max-height: none;
  }
  .inline-edit-panel {
    grid-column: auto;
  }
  .preview-body {
    padding: 28px 25px;
  }
  .preview-modal {
    height: 100%;
  }
}
@media (max-width: 720px), (max-width: 1000px) and (pointer: coarse) {
  body.custom-cursor,
  body.custom-cursor * {
    cursor: auto !important;
  }
  .cursor-system {
    display: none;
  }
  .app-shell {
    display: block;
  }
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 16px 18px;
    display: block;
  }
  .brand {
    margin: 0 0 16px;
  }
  .side-label,
  .side-label-lower,
  .side-footer {
    display: none;
  }
  .nav-list {
    display: flex;
    overflow: auto;
    gap: 4px;
  }
  .module-list {
    display: flex;
    max-height: none;
    overflow: auto;
    gap: 4px;
  }
  .nav-item {
    white-space: nowrap;
    padding: 9px 10px;
    font-size: 11px;
  }
  .nav-item b {
    display: none;
  }
  .nav-item:not(.active) {
    background: #20221f;
  }
  .sidebar .nav-list:nth-of-type(3) {
    display: flex;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }
  .main-content {
    margin-left: 0;
    padding: 0 18px 24px;
  }
  .topbar {
    height: 60px;
  }
  .crumb {
    font-size: 8px;
  }
  .sync {
    display: none;
  }
  .intro-row {
    padding: 40px 0 30px;
    display: block;
  }
  .intro-copy {
    margin-top: 28px;
    width: auto;
  }
  .intro-copy p {
    display: inline-block;
    margin-right: 18px;
  }
  .featured-card {
    display: block;
  }
  .featured-card.hero-runtime {
    display: block;
    min-height: 0;
  }
  .feature-art {
    height: 240px;
    min-height: 0;
  }
  .hero-runtime .feature-art,
  .hero-runtime .runtime-iframe {
    height: 240px;
    min-height: 240px;
  }
  .feature-info {
    padding: 27px 24px 24px;
    min-height: 300px;
  }
  .feature-info h2 {
    font-size: 29px;
    margin-top: 25px;
  }
  .toolbar {
    display: block;
    margin-top: 38px;
  }
  .toolbar-actions {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr auto;
  }
  .search-box {
    width: auto;
  }
  .toolbar-actions select {
    max-width: 115px;
  }
  .filter-strip {
    gap: 18px;
    overflow: auto;
  }
  .filter {
    white-space: nowrap;
  }
  .group-strip {
    gap: 15px;
  }
  .group-section {
    margin-top: 25px;
  }
  .group-section-head {
    align-items: start;
  }
  .card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .main-footer {
    gap: 12px;
    flex-wrap: wrap;
  }
  .main-footer span:last-child {
    display: none;
  }
  .preview-modal {
    height: 100%;
    width: 100%;
    padding: 22px 16px 18px;
  }
  .preview-head {
    gap: 8px;
  }
  .preview-head h2 {
    font-size: 24px;
  }
  .preview-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .copy-button {
    font-size: 9px;
    padding: 0 9px;
  }
  .preview-layout {
    gap: 12px;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(280px, 1.45fr) minmax(150px, 0.65fr) minmax(
        210px,
        0.9fr
      );
  }
  .preview-main {
    grid-column: 1;
    grid-row: 1;
  }
  .preview-rail {
    grid-column: 1;
    grid-row: 2;
  }
  .lineage-panel {
    grid-column: 1;
    grid-row: 3;
  }
  .preview-body {
    margin-top: 12px;
    padding: 22px 17px;
    font-size: 11px;
  }
  .preview-body h1 {
    font-size: 29px;
  }
  .preview-footer {
    font-size: 8px;
  }
  .preview-rail {
    max-height: none;
  }
  .modal {
    padding: 30px 24px;
  }
  .modal h2 {
    font-size: 32px;
  }
  .inline-create {
    grid-column: auto;
  }
}

.mobile-workspace-tabs { display: none; }
.lineage-tools .mobile-node-zoom { display: none; }

.create-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.create-drop {
  border: 1px dashed #aaa99f;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  font: 9px var(--mono);
  color: #85867f;
}
.create-drop svg {
  width: 15px;
  color: var(--orange);
}
.create-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.file-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px dashed #aaa99f;
  padding: 11px;
  font: 10px var(--mono);
  color: #777870;
  margin: 18px 0;
}
.file-picker input {
  max-width: 190px;
  font-size: 9px;
}
.admin-body {
  background: var(--paper);
}
.admin-shell {
  display: flex;
  min-height: 100vh;
}
.admin-side {
  width: 300px;
  flex: 0 0 300px;
  background: var(--ink);
  color: var(--white);
  padding: 30px 28px 24px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: sticky;
  top: 0;
}
.admin-side .brand {
  margin: 0 0 100px;
}
.admin-side .eyebrow {
  color: #8d8e87;
}
.admin-side h1 {
  font-size: 68px;
  margin: 0 0 68px;
}
.admin-side h1 em {
  color: var(--orange);
  font-style: normal;
}
.admin-side nav {
  display: grid;
  gap: 5px;
}
.admin-nav {
  color: #a7a8a1;
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid #343632;
  font: 11px var(--mono);
  position: relative;
}
.admin-nav.active,
.admin-nav:hover {
  color: var(--yellow);
}
.admin-side .side-footer {
  margin-top: auto;
}
.admin-main {
  flex: 1;
  padding: 0 6vw 50px;
  min-width: 0;
}
.admin-top {
  height: 78px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #85867f;
  font: 9px var(--mono);
}
.admin-top .crumb span {
  color: var(--orange);
  padding: 0 8px;
}
.admin-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 66px 0 52px;
}
.admin-hero h2 {
  font-size: 59px;
  line-height: 0.88;
  letter-spacing: -0.08em;
  margin: 0;
}
.admin-hero h2 em {
  color: var(--orange);
  font-style: normal;
}
.admin-hero > p {
  width: 270px;
  color: #777870;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}
.admin-panel {
  border-top: 1px solid var(--ink);
  padding-top: 22px;
}
.panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 22px;
}
.panel-head h3 {
  font-size: 27px;
  letter-spacing: -0.06em;
  margin: 0;
}
.panel-head > span {
  font: 9px var(--mono);
  color: #898a83;
}
.panel-primary {
  background: var(--ink);
  color: var(--yellow);
  font: 10px var(--mono);
  padding: 10px 13px;
}
.user-table,
.group-table,
.audit-list {
  border-top: 1px solid var(--line);
}
.table-head,
.user-row,
.group-row,
.audit-row {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 1.3fr 0.9fr;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 15px 10px;
}
.table-head {
  font: 9px var(--mono);
  color: #999a92;
}
.user-row b,
.user-row small {
  display: block;
}
.user-row b {
  font-size: 14px;
}
.user-row small {
  font: 9px var(--mono);
  color: #92938b;
  margin-top: 5px;
}
.user-row select,
.group-row select,
.group-row input {
  height: 31px;
  border: 0;
  border-bottom: 1px solid #aaa99f;
  background: transparent;
  outline: 0;
  font: 10px var(--mono);
}
.permission-checks {
  display: flex;
  gap: 9px;
}
.permission-checks label {
  font: 8px var(--mono);
  color: #777870;
}
.row-actions {
  display: flex;
  gap: 6px;
}
.row-actions button,
.group-row button {
  background: var(--ink);
  color: var(--yellow);
  font: 9px var(--mono);
  padding: 8px;
}
.row-actions .warn {
  background: transparent;
  color: #ad3928;
  border: 1px solid #ad3928;
}
.group-row {
  grid-template-columns: 35px 1fr 200px 90px 60px;
}
.group-index {
  font: 10px var(--mono);
  color: var(--orange);
}
.group-count {
  font: 9px var(--mono);
  color: #898a83;
}
.audit-row {
  grid-template-columns: 170px 120px 200px 1fr;
  font: 9px var(--mono);
}
.audit-row span {
  color: #898a83;
}
.audit-row b {
  color: var(--orange);
  font-weight: 500;
}
.audit-row code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #777870;
}
.admin-loading {
  font: 11px var(--mono);
  color: #898a83;
  padding: 50px 0;
}
@media (max-width: 800px) {
  .admin-side {
    width: 220px;
    flex-basis: 220px;
    padding: 25px 18px;
  }
  .admin-side .brand {
    margin-bottom: 70px;
  }
  .admin-side h1 {
    font-size: 52px;
  }
  .admin-main {
    padding: 0 24px 35px;
  }
  .admin-hero {
    display: block;
    padding: 45px 0 35px;
  }
  .admin-hero h2 {
    font-size: 48px;
  }
  .admin-hero > p {
    width: auto;
    margin-top: 25px;
  }
  .table-head {
    display: none;
  }
  .user-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .permission-checks {
    grid-column: 1/-1;
  }
  .row-actions {
    grid-column: 1/-1;
  }
  .group-row {
    grid-template-columns: 25px 1fr;
    gap: 8px;
  }
  .group-row select,
  .group-count,
  .group-row button {
    grid-column: 2;
  }
  .audit-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .audit-row code {
    white-space: normal;
  }
}
.group-create-inline,
.group-inline-editor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 9px var(--mono);
}
.group-create-inline {
  margin-left: auto;
}
.group-create-inline input,
.group-inline-editor input,
.group-inline-editor select {
  height: 29px;
  border: 0;
  border-bottom: 1px solid var(--orange);
  background: transparent;
  color: var(--ink);
  outline: 0;
  padding: 0 5px;
  font: 10px var(--mono);
}
.group-create-inline button,
.group-inline-editor button {
  height: 29px;
  border: 1px solid var(--ink);
  padding: 0 8px;
  font: 9px var(--mono);
}
.group-create-inline button:first-of-type,
.group-inline-editor button:first-of-type {
  background: var(--ink);
  color: var(--yellow);
}
.group-inline-editor .inline-danger {
  border-color: #b63225;
  background: transparent;
  color: #b63225;
}
.group-inline-editor .inline-danger:hover {
  background: #b63225;
  color: var(--white);
}
.system-group-lock {
  height: 29px;
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  border: 1px dashed #999a92;
  color: #777870;
  font: 8px var(--mono);
}
.prompt-card.file-drop-target,
.add-tile.file-drop-target {
  transform: translateY(-7px) scale(0.985);
  border-color: var(--orange);
  background: #f1c4b1;
  box-shadow:
    7px 7px 0 var(--ink),
    -5px -5px 0 var(--yellow);
  animation: drop-impact 0.26s steps(3, end);
}
.prompt-card.file-drop-target::after,
.add-tile.file-drop-target::after {
  content: "DROP / COMMIT FILE";
  position: absolute;
  z-index: 6;
  inset: 9px;
  display: grid;
  place-items: center;
  border: 1px solid var(--orange);
  background: rgba(16, 17, 16, 0.91);
  color: var(--yellow);
  font: 11px var(--mono);
  letter-spacing: 0.12em;
  pointer-events: none;
  clip-path: polygon(
    0 0,
    88% 0,
    88% 5px,
    100% 5px,
    100% 100%,
    12% 100%,
    12% calc(100% - 5px),
    0 calc(100% - 5px)
  );
}
@keyframes drop-impact {
  0% {
    transform: translate(-5px, 2px);
  }
  45% {
    transform: translate(4px, -2px);
  }
  100% {
    transform: translateY(-7px) scale(0.985);
  }
}
.lineage-panel {
  grid-column: 2;
  grid-row: 2;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: #111312;
  display: flex;
  flex-direction: column;
}
.lineage-head {
  position: relative;
  z-index: 5;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid #343733;
  background: #171918;
  color: #8e918a;
  font: 8px var(--mono);
  letter-spacing: 0.08em;
}
.lineage-head > div:first-child {
  display: flex;
  gap: 12px;
  align-items: center;
}
.lineage-head b {
  color: var(--yellow);
  font-weight: 500;
}
.lineage-tools {
  display: flex;
  align-items: center;
  gap: 1px;
}
.lineage-tools button,
.lineage-tools span {
  min-width: 31px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 1px solid #3b3e3a;
  color: #b7b9b2;
  font: 8px var(--mono);
}
#timelineFullscreenBtn {
  min-width: 25px;
  width: 25px;
  padding: 0;
  border: 0;
  background: transparent;
}
#timelineFullscreenBtn:hover,
#timelineFullscreenBtn:focus-visible {
  border: 0;
  background: transparent;
  color: var(--yellow);
  transform: scale(1.12);
}
.lineage-tools button svg {
  width: 11px;
}
.lineage-tools button:hover {
  color: var(--yellow);
  border-color: var(--orange);
  background: #242724;
}
.lineage-tools span {
  min-width: 58px;
  color: var(--orange);
}
.lineage-tools .timeline-auto-fit {
  border-style: dashed;
  color: #7f837b;
}
.lineage-board {
  position: relative;
  height: auto;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  cursor: default;
  overscroll-behavior: contain;
  background-color: #101211;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(246, 85, 42, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 85, 42, 0.025) 1px, transparent 1px);
  background-size:
    20px 20px,
    20px 20px,
    100px 100px,
    100px 100px;
}
.lineage-board::after {
  content: "AUTO FRAME  /  FULLSCREEN: DOUBLE CLICK NODE TO EDIT";
  position: absolute;
  left: 12px;
  bottom: 9px;
  color: #555952;
  font: 7px var(--mono);
  pointer-events: none;
}
.lineage-viewport {
  position: relative;
  width: 100% !important;
  height: 100% !important;
}
.lineage-graph {
  position: absolute;
  transform-origin: 0 0;
}
.preview-layout.expanded-timeline .lineage-viewport {
  will-change: transform;
}
#timelineSvg,
#timelineNodes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.timeline-edge {
  fill: none;
  stroke: #656a63;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}
.timeline-edge.main {
  stroke: #c4c7be;
  stroke-dasharray: none;
}
.timeline-edge.branch {
  stroke: var(--orange);
  stroke-dasharray: 5 6;
  stroke-linecap: butt;
}
.timeline-edge.branch-serial {
  stroke: var(--orange);
  stroke-dasharray: none;
}
.timeline-node {
  position: absolute;
  width: 174px;
  height: 78px;
  padding: 0;
  border: 1px solid #5a5e57;
  background: #191c1a;
  text-align: left;
  color: #eef0e9;
  clip-path: polygon(
    0 0,
    calc(100% - 11px) 0,
    100% 11px,
    100% 100%,
    11px 100%,
    0 calc(100% - 11px)
  );
  transition:
    transform 0.14s steps(3, end),
    border-color 0.14s,
    background 0.14s,
    box-shadow 0.14s;
}
.timeline-node .node-select {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 23px 24px 9px 22px;
  text-align: left;
  color: inherit;
}
.timeline-node:hover {
  border-color: var(--orange);
  background: #232623;
  box-shadow: 4px 4px 0 rgba(246, 85, 42, 0.55);
}
.timeline-node.active {
  border-color: var(--yellow);
  background: var(--orange);
  color: #101110;
  box-shadow: 5px 5px 0 var(--yellow);
}
.timeline-node .node-input-port,
.timeline-node .node-output-port {
  position: absolute;
  top: 34px;
  width: 10px;
  height: 10px;
  background: #111312;
  border: 2px solid #aeb1a9;
}
.timeline-node .node-edit-trigger {
  position: absolute;
  z-index: 4;
  right: 4px;
  top: 5px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 0;
  color: #a4a79f;
  background: transparent;
  opacity: 0;
  transform: translateX(5px);
  transition: 0.15s steps(2, end);
}
.timeline-node:hover .node-edit-trigger,
.timeline-node .node-edit-trigger:focus-visible {
  opacity: 1;
  transform: none;
}
.timeline-node .node-edit-trigger:hover {
  color: var(--yellow);
  border: 0;
  background: transparent;
}
.timeline-node .node-edit-trigger svg {
  width: 10px;
}
.timeline-node .node-input-port {
  left: -6px;
}
.timeline-node .node-output-port {
  right: -6px;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(246, 85, 42, 0.14);
}
.timeline-node.active .node-output-port,
.timeline-node.active .node-input-port {
  border-color: var(--yellow);
  background: #111312;
}
.node-commit-dot {
  position: absolute;
  left: 8px;
  top: 34px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--orange);
  transform: rotate(45deg);
}
.node-branch-tag {
  position: absolute;
  left: 20px;
  top: 7px;
  max-width: 118px;
  color: var(--orange);
  font: 7px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timeline-node.active .node-branch-tag {
  color: #101110;
}
.timeline-node b,
.timeline-node small,
.timeline-node em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timeline-node b {
  font: 12px var(--display);
  letter-spacing: 0.02em;
}
.timeline-node small {
  margin-top: 4px;
  color: #969a92;
  font: 8px var(--mono);
}
.timeline-node em {
  margin-top: 3px;
  color: var(--orange);
  font: normal 7px var(--mono);
}
.timeline-node.active small {
  color: #2a2d29;
}
.timeline-node.active em {
  color: #101110;
}
.timeline-node.node-file-target {
  border-color: var(--yellow);
  box-shadow: 5px 5px 0 var(--orange);
}
.timeline-node.node-file-target::after {
  content: attr(data-drop-label);
  position: absolute;
  z-index: 6;
  inset: 4px;
  display: grid;
  place-items: center;
  border: 1px solid var(--yellow);
  background: rgba(16, 18, 17, 0.94);
  color: var(--yellow);
  font: 8px var(--mono);
  letter-spacing: 0.08em;
  pointer-events: none;
}
.timeline-node[data-drop-mode="cluster"]::after {
  clip-path: polygon(0 0, 42% 0, 42% 100%, 0 100%);
  justify-items: start;
  padding-left: 8px;
}
.timeline-node[data-drop-mode="version"]::after {
  clip-path: polygon(38% 0, 100% 0, 100% 50%, 38% 50%);
  align-items: start;
  justify-items: end;
  padding: 10px 8px;
}
.timeline-node[data-drop-mode="branch"]::after {
  clip-path: polygon(38% 50%, 100% 50%, 100% 100%, 38% 100%);
  align-items: end;
  justify-items: end;
  padding: 8px;
}
.preview-layout.expanded-text .preview-main,
.preview-layout.expanded-timeline .lineage-panel {
  position: relative;
  z-index: 20;
  inset: auto;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
}
.preview-layout.expanded-text > :not(.preview-main),
.preview-layout.expanded-timeline > :not(.lineage-panel) {
  opacity: 0;
  transform: scale(0.975);
  filter: blur(3px);
  pointer-events: none;
}
.preview-layout.expanded-text .preview-body {
  padding: clamp(42px, 6vw, 96px) clamp(44px, 10vw, 170px);
  font-size: 15px;
}
.preview-layout.expanded-timeline .lineage-board {
  min-height: 0;
  cursor: grab;
  touch-action: none;
}
.preview-layout.expanded-timeline .lineage-board.is-panning {
  cursor: grabbing;
}
.preview-layout.expanded-timeline .lineage-board::after {
  content: "WHEEL / ZOOM   DRAG / PAN   DOUBLE CLICK NODE / EDIT";
}
.preview-layout.expanded-timeline .timeline-auto-fit {
  color: var(--yellow);
  border-color: transparent;
}
.preview-layout.expanded-timeline .timeline-auto-fit::before {
  content: "FREE VIEW";
  font-size: 8px;
}
.preview-layout.expanded-timeline .timeline-auto-fit {
  font-size: 0;
}
.cluster-touch-move, .cluster-folder-actions .cluster-touch-move { display: none; }
.node-touch-create { display: none; }
.card-touch-drag { display: none; }
.cluster-move-picker { padding: 12px; background: var(--paper); border: 1px solid var(--orange); }
.cluster-move-picker > button { float: right; }
.cluster-move-picker > div { display: grid; gap: 4px; margin-top: 10px; max-height: 220px; overflow: auto; }
.cluster-move-picker button { min-height: 44px; padding: 8px; text-align: left; overflow-wrap: anywhere; border-bottom: 1px solid var(--line); }
.node-editor {
  position: absolute;
  z-index: 12;
  right: 0;
  top: 38px;
  bottom: 0;
  width: min(310px, 88%);
  padding: 13px;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 1px solid var(--orange);
  background: rgba(235, 232, 223, 0.985);
  color: var(--ink);
  box-shadow: -8px 0 0 rgba(0, 0, 0, 0.2);
  animation: node-editor-enter 0.26s steps(4, end);
  scrollbar-color: var(--orange) #d7d4cb;
}
.transfer-status {
  position: fixed;
  z-index: 90;
  right: 22px;
  bottom: 78px;
  width: min(330px, calc(100vw - 44px));
  padding: 11px 12px 12px;
  border-left: 3px solid var(--orange);
  background: #111312;
  color: #e8e7dd;
  box-shadow: 5px 5px 0 rgba(246, 85, 42, 0.36);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 0.16s,
    transform 0.2s cubic-bezier(0.2, 0.82, 0.24, 1);
}
.transfer-status.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.transfer-status.error {
  border-left-color: #d34835;
  box-shadow: 5px 5px 0 rgba(211, 72, 53, 0.28);
}
.transfer-status-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font: 8px var(--mono);
  letter-spacing: 0.08em;
}
.transfer-status-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transfer-status-head b {
  color: var(--yellow);
  font-weight: 500;
}
.transfer-status.error .transfer-status-head b {
  color: #ff8068;
}
.transfer-track {
  height: 3px;
  overflow: hidden;
  background: #3a3d39;
}
.transfer-track i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--orange);
  transform-origin: left center;
  transition: width 0.12s linear;
}
.transfer-status.error .transfer-track i {
  background: #d34835;
}
.group-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 560px;
}
.prompt-card:not(.motion-visible) *,
.featured-card:not(.motion-visible) *,
.add-tile:not(.motion-visible) * {
  animation-play-state: paused !important;
}
@keyframes node-editor-enter {
  from {
    transform: translateX(24px);
    opacity: 0;
    clip-path: inset(0 0 0 100%);
  }
  to {
    transform: none;
    opacity: 1;
    clip-path: inset(0);
  }
}

/* 管理后台重做：以库况、权限、结构和轨迹为四个清晰的操作面。 */
.admin-body {
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.admin-shell {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  background:
    linear-gradient(rgba(16, 17, 16, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 17, 16, 0.025) 1px, transparent 1px),
    var(--paper);
  background-size: 34px 34px;
}
.admin-side {
  width: 282px;
  position: fixed;
  inset: 0 auto 0 0;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  z-index: 20;
  padding: 30px 26px 24px;
  background: var(--ink);
  color: var(--white);
  display: flex;
  flex-direction: column;
}
.admin-side .brand {
  margin: 0 0 74px;
}
.admin-side-code {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #343632;
  color: #7e827a;
  font: 8px var(--mono);
  letter-spacing: 0.08em;
}
.admin-side-code b {
  color: var(--orange);
  font-weight: 500;
}
.admin-nav-list {
  display: grid;
  gap: 0;
  margin-top: 16px;
}
.admin-nav {
  width: 100%;
  min-height: 49px;
  display: grid;
  grid-template-columns: 19px 1fr auto;
  align-items: center;
  gap: 9px;
  position: relative;
  padding: 0 4px;
  border-bottom: 1px solid #343632;
  background: transparent;
  color: #9b9e96;
  text-align: left;
  font: 10px var(--mono);
  letter-spacing: 0.04em;
}
.admin-nav svg {
  width: 14px;
}
.admin-nav b {
  color: #676b64;
  font: 8px var(--mono);
  font-weight: 500;
}
.admin-nav::after {
  display: none;
}
.admin-nav > span {
  position: relative;
  display: inline-block;
}
.admin-nav > span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--orange);
  transition: width 0.18s ease;
}
.admin-nav:hover,
.admin-nav.active {
  color: var(--yellow);
}
.admin-nav.active > span::after,
.admin-nav:hover > span::after {
  width: 100%;
}
.admin-nav.active b {
  color: var(--orange);
}
.admin-side-note {
  display: grid;
  gap: 11px;
  margin-top: auto;
  padding: 16px 0 20px;
  border-bottom: 1px solid #343632;
  color: #777b73;
  font: 8px/1.5 var(--mono);
}
.admin-side-note a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--yellow);
  font: 9px var(--mono);
}
.admin-side-note svg {
  width: 11px;
}
.admin-side .side-footer {
  margin-top: 18px;
}
.admin-main {
  flex: 1;
  margin-left: 282px;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  padding: 0 clamp(26px, 5vw, 82px) 70px;
}
.admin-top {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  color: #7d7f78;
  font: 9px var(--mono);
  letter-spacing: 0.04em;
}
.admin-top .crumb span {
  padding: 0 8px;
  color: var(--orange);
}
.admin-session {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
}
.admin-session i {
  width: 7px;
  height: 7px;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(246, 85, 42, 0.12);
}
.admin-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 50px;
  padding: 62px 0 42px;
}
.admin-hero h1 {
  margin: 0;
  font-size: clamp(48px, 6vw, 82px);
  line-height: 0.84;
  letter-spacing: -0.09em;
}
.admin-hero h1 em {
  color: var(--orange);
  font-style: normal;
}
.admin-hero-readout {
  width: min(350px, 38%);
  padding-bottom: 4px;
  color: #777870;
  font-size: 12px;
  line-height: 1.65;
}
.admin-hero-readout span {
  display: block;
  margin-bottom: 10px;
  color: var(--orange);
  font: 9px var(--mono);
  letter-spacing: 0.08em;
}
.admin-hero-readout p {
  margin: 0;
}
.admin-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--ink);
  background: var(--ink);
}
.admin-stat {
  min-height: 126px;
  padding: 17px 16px 14px;
  background: rgba(239, 237, 229, 0.86);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.admin-stat span,
.admin-stat small {
  color: #7c7e77;
  font: 8px var(--mono);
  letter-spacing: 0.08em;
}
.admin-stat b {
  color: var(--ink);
  font: 38px var(--display);
  letter-spacing: -0.06em;
}
.admin-stat small {
  letter-spacing: 0;
}
.admin-stat.orange b {
  color: var(--orange);
}
.admin-stat.yellow {
  background: var(--yellow);
}
.admin-panel {
  min-height: 320px;
  padding-top: 34px;
  border-top: 1px solid var(--ink);
  margin-top: 28px;
}
.admin-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.admin-panel-head h2 {
  margin: 0;
  font-size: 31px;
  line-height: 1;
  letter-spacing: -0.07em;
}
.admin-panel-head > span {
  color: #85867f;
  font: 8px var(--mono);
}
.admin-overview-grid,
.admin-structure-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
  gap: 12px;
}
.admin-module {
  position: relative;
  min-width: 0;
  padding: 20px;
  border: 1px solid #c9c7bf;
  background: rgba(247, 245, 238, 0.72);
}
.admin-module::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 42px;
  height: 1px;
  background: var(--orange);
}
.admin-module-large {
  min-height: 260px;
}
.module-label {
  margin-bottom: 28px;
  color: var(--orange);
  font: 8px var(--mono);
  letter-spacing: 0.1em;
}
.admin-module h3 {
  margin: 0 0 20px;
  font-size: 24px;
  letter-spacing: -0.06em;
}
.admin-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #c9c7bf;
}
.admin-route-grid button,
.admin-route-grid a {
  min-height: 86px;
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-content: center;
  padding: 12px;
  background: var(--paper);
  text-align: left;
}
.admin-route-grid button:hover,
.admin-route-grid a:hover {
  background: var(--yellow);
}
.admin-route-grid svg {
  grid-row: 1 / -1;
  width: 14px;
  color: var(--orange);
}
.admin-route-grid b {
  font: 11px var(--display);
}
.admin-route-grid small {
  color: #85867f;
  font: 8px/1.4 var(--mono);
}
.admin-mini-log {
  display: grid;
}
.admin-mini-log > div {
  display: grid;
  grid-template-columns: 90px 70px 1fr;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font: 8px var(--mono);
}
.admin-mini-log span,
.admin-mini-log small {
  color: #85867f;
}
.admin-mini-log b {
  color: var(--orange);
  font-weight: 500;
}
.admin-table,
.admin-audit-list,
.admin-structure-list,
.admin-tag-list {
  border-top: 1px solid var(--ink);
}
.admin-table-head,
.admin-user-row {
  display: grid;
  grid-template-columns: 1.3fr 0.65fr 1.2fr 0.6fr 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 10px;
  border-bottom: 1px solid var(--line);
}
.admin-table-head {
  color: #85867f;
  font: 8px var(--mono);
}
.admin-user-name b,
.admin-user-name small {
  display: block;
}
.admin-user-name b {
  font: 13px var(--display);
}
.admin-user-name small {
  margin-top: 4px;
  color: #85867f;
  font: 8px var(--mono);
}
.admin-user-row select,
.admin-structure-row select,
.admin-structure-row input {
  height: 30px;
  max-width: 190px;
  border: 0;
  border-bottom: 1px solid #aaa99f;
  background: transparent;
  outline: 0;
  font: 9px var(--mono);
}
.admin-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-permissions label {
  color: #777870;
  font: 8px var(--mono);
}
.admin-status {
  font: 8px var(--mono);
}
.admin-status.online {
  color: #4d8a55;
}
.admin-status.offline {
  color: #a33f30;
}
.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.admin-row-actions button,
.admin-inline-create button,
.admin-structure-row button {
  padding: 8px 10px;
  background: var(--ink);
  color: var(--yellow);
  font: 8px var(--mono);
}
.admin-row-actions .danger {
  border: 1px solid #ae4433;
  background: transparent;
  color: #ae4433;
}
.admin-structure-grid {
  align-items: start;
}
.admin-module-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.admin-module-toolbar div {
  display: grid;
  gap: 6px;
}
.admin-module-toolbar b {
  font: 11px var(--display);
}
.admin-module-toolbar small {
  color: #85867f;
  font: 8px/1.5 var(--mono);
}
.admin-module-toolbar button,
.admin-module-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  background: var(--ink);
  color: var(--yellow);
  font: 8px var(--mono);
}
.admin-module-toolbar svg { width: 12px; }
.admin-module-registry {
  display: grid;
  gap: 12px;
}
.admin-module-card {
  position: relative;
  padding: 18px 20px 15px;
  border: 1px solid #c9c7bf;
  background: rgba(247, 245, 238, 0.72);
}
.admin-module-card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 58px;
  height: 1px;
  background: var(--orange);
}
.admin-module-card.is-system::before { width: 110px; background: var(--yellow); }
.admin-module-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  color: var(--orange);
  font: 8px var(--mono);
  letter-spacing: .08em;
}
.admin-module-card-head b { color: #85867f; font-weight: 400; }
.admin-module-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.admin-module-field,
.admin-module-fields label {
  display: grid;
  gap: 7px;
  color: #85867f;
  font: 8px var(--mono);
}
.admin-module-fields input,
.admin-module-fields select {
  width: 100%;
  height: 32px;
  min-width: 0;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid #aaa99f;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 10px var(--mono);
}
.admin-module-fields input:focus,
.admin-module-fields select:focus { border-color: var(--orange); }
.admin-module-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 18px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: #85867f;
  font: 8px var(--mono);
}
.admin-module-meta b { color: var(--orange); font-weight: 400; }
.admin-module-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
}
.admin-module-actions .admin-module-delete {
  border: 1px solid #ae4433;
  background: transparent;
  color: #ae4433;
}
.admin-module-system {
  color: #6b8b61;
  font: 8px var(--mono);
}
.admin-structure-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
  margin-bottom: 14px;
  color: #85867f;
  font: 8px var(--mono);
}
.admin-structure-switch select {
  min-width: 220px;
  height: 32px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid #aaa99f;
  background: transparent;
  color: var(--ink);
  outline: 0;
  font: 9px var(--mono);
}
.admin-structure-grid > .admin-module:first-child {
  grid-column: 1 / -1;
}
.admin-inline-create {
  display: flex;
  gap: 7px;
  margin-bottom: 14px;
}
.admin-inline-create input {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: 0;
  border-bottom: 1px solid #aaa99f;
  background: transparent;
  outline: 0;
  font: 10px var(--mono);
}
.admin-structure-row {
  display: grid;
  grid-template-columns: 35px minmax(120px, 1fr) 42px 52px;
  gap: 10px;
  align-items: center;
  min-height: 50px;
  border-bottom: 1px solid var(--line);
}
.admin-structure-row > span,
.admin-structure-row > b {
  color: var(--orange);
  font: 9px var(--mono);
}
.admin-structure-row > b {
  color: #85867f;
}
.admin-tag-list > div {
  display: grid;
  grid-template-columns: 10px 1fr auto 25px;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  border-bottom: 1px solid var(--line);
  font: 10px var(--mono);
}
.admin-tag-mark {
  width: 7px;
  height: 7px;
  background: var(--orange);
  transform: rotate(45deg);
}
.admin-tag-list small {
  color: #85867f;
  font: 7px var(--mono);
}
.admin-tag-list button {
  color: var(--orange);
  font: 17px var(--display);
}
.admin-audit-row {
  display: grid;
  grid-template-columns: 30px 150px 110px 190px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--line);
  color: #85867f;
  font: 8px var(--mono);
}
.admin-audit-row > span,
.admin-audit-row b {
  color: var(--orange);
}
.admin-audit-row b {
  font-weight: 500;
}
.admin-audit-row code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-empty,
.admin-loading {
  padding: 38px 0;
  color: #85867f;
  font: 9px var(--mono);
}
@media (max-width: 900px) {
  .admin-side {
    width: 220px;
    padding: 24px 18px;
  }
  .admin-side .brand {
    margin-bottom: 52px;
  }
  .admin-main {
    margin-left: 220px;
    padding: 0 24px 45px;
  }
  .admin-hero {
    display: block;
    padding: 46px 0 32px;
  }
  .admin-hero-readout {
    width: auto;
    max-width: 430px;
    margin-top: 28px;
  }
  .admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-overview-grid,
  .admin-structure-grid {
    grid-template-columns: 1fr;
  }
  .admin-module-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-structure-grid > .admin-module:first-child {
    grid-column: auto;
  }
  .admin-table-head {
    display: none;
  }
  .admin-user-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 8px;
  }
  .admin-permissions {
    grid-column: 1 / -1;
  }
  .admin-audit-row {
    grid-template-columns: 25px 1fr 1fr;
    gap: 8px;
    padding: 10px 0;
  }
  .admin-audit-row small,
  .admin-audit-row code {
    grid-column: 2 / -1;
  }
}
@media (max-width: 620px) {
  .admin-body {
    overflow: auto;
  }
  .admin-shell {
    display: block;
    height: auto;
    overflow: visible;
  }
  .admin-side {
    width: 100%;
    min-height: auto;
    position: relative;
    height: auto;
    overflow: visible;
  }
  .admin-side .brand {
    margin-bottom: 32px;
  }
  .admin-side-note,
  .admin-side .side-footer {
    display: none;
  }
  .admin-nav-list {
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: #343632;
  }
  .admin-nav {
    min-height: 54px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 4px;
    background: var(--ink);
    font-size: 7px;
  }
  .admin-nav b {
    display: none;
  }
  .admin-main {
    margin-left: 0;
    height: auto;
    overflow: visible;
    padding: 0 16px 36px;
  }
  .admin-top {
    height: 58px;
    font-size: 7px;
  }
  .admin-session span {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-hero h1 {
    font-size: 54px;
  }
  .admin-stats {
    gap: 1px;
  }
  .admin-stat {
    min-height: 104px;
    padding: 12px;
  }
  .admin-stat b {
    font-size: 30px;
  }
  .admin-module {
    padding: 14px;
  }
  .admin-module-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-module-fields {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .admin-module-card {
    padding: 15px;
  }
  .admin-module-actions,
  .admin-structure-switch {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-structure-switch select {
    min-width: 0;
  }
  .admin-route-grid {
    grid-template-columns: 1fr;
  }
  .admin-structure-row {
    grid-template-columns: 25px 1fr 40px;
  }
  .admin-structure-row select,
  .admin-structure-row button {
    grid-column: 2 / -1;
  }
}
.node-editor-head,
.node-editor-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--orange);
  font: 8px var(--mono);
  letter-spacing: 0.08em;
}
.node-editor-head {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.node-editor-head button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}
.node-editor-head svg {
  width: 12px;
}
.node-editor label {
  display: grid;
  gap: 5px;
  margin-top: 9px;
  color: #777870;
  font: 8px var(--mono);
}
.node-editor input,
.node-editor textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #999a92;
  background: transparent;
  padding: 7px 3px;
  color: var(--ink);
  outline: 0;
  font: 10px var(--mono);
}
.node-editor textarea {
  min-height: 48px;
  resize: vertical;
}
.node-editor input:focus,
.node-editor textarea:focus {
  border-color: var(--orange);
}
.node-editor-assets {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.node-editor-asset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px 24px;
  align-items: center;
  gap: 5px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.node-editor-asset span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 8px var(--mono);
}
.node-editor-asset button {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  color: var(--orange);
}
.node-editor-asset button:last-child {
  color: #a13628;
}
.node-editor-asset svg {
  width: 11px;
}
.node-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 13px;
}
.node-editor-actions button {
  min-height: 34px;
  padding: 5px;
  border: 1px solid var(--ink);
  font: 8px var(--mono);
}
.node-editor-actions button:last-child {
  background: var(--ink);
  color: var(--yellow);
}
.node-editor-actions .danger {
  border-color: #a13628;
  color: #a13628;
}
.cluster-drop-zone {
  position: relative;
  min-height: 48px;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 20px 1fr;
  align-content: center;
  column-gap: 8px;
  padding: 11px;
  border: 1px dashed #989a92;
  color: var(--ink);
  cursor: copy;
  clip-path: polygon(
    0 0,
    calc(100% - 11px) 0,
    100% 11px,
    100% 100%,
    11px 100%,
    0 calc(100% - 11px)
  );
  transition: 0.16s steps(3, end);
}
.cluster-drop-zone svg {
  grid-row: 1 / 3;
  align-self: center;
  width: 16px;
  color: var(--orange);
}
.cluster-drop-zone span {
  font: 10px var(--display);
}
.cluster-drop-zone small {
  margin-top: 3px;
  color: #85867f;
  font: 7px var(--mono);
}
.cluster-drop-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.cluster-drop-zone:hover,
.cluster-drop-zone.drag-active,
.cluster-drop-zone.uploading {
  border-style: solid;
  border-color: var(--orange);
  color: var(--yellow);
  background: var(--ink);
  transform: none;
  box-shadow: none;
}
.cluster-drop-zone.uploading {
  pointer-events: none;
  opacity: 0.72;
}
.context-file-picker {
  border: 1px dashed #aaa99f;
  padding: 8px;
}
.context-file-picker input {
  height: auto !important;
  border: 0 !important;
  padding: 5px 0 0 !important;
  font-size: 8px !important;
}
.card-visual.has-image {
  background-image:
    var(--card-image),
    linear-gradient(130deg, #222827, #566059 53%, #d97b43 54%, #f0c548);
  background-size: cover;
  background-position: center;
}
@media (max-width: 1120px) {
  .card-editor-stage {
    grid-template-columns: minmax(190px, 1fr) minmax(270px, 320px) minmax(
        190px,
        1fr
      );
    gap: 30px 42px;
    padding-inline: 22px;
  }
  .editor-control-node {
    padding: 7px 0;
  }
}
@media (max-width: 820px) {
  .preview-modal.card-editor-active {
    padding: 9px;
  }
  .card-editor-head {
    align-items: flex-start;
  }
  .card-editor-head h3 {
    font-size: 19px;
  }
  .card-editor-head-actions button {
    padding: 0 8px;
    font-size: 8px;
  }
  .card-editor-stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 18px;
  }
  .card-editor-preview-shell {
    order: -1;
    width: min(360px, 100%);
    margin: 0 auto 10px;
  }
  .editor-control-node {
    max-width: none;
  }
}

/* 附件媒体预览：图片、视频和音频直接在左侧预览区打开，未知格式保持可下载。 */
.asset-preview {
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0;
  background: #111312;
}
.asset-preview-image {
  flex-direction: column;
  gap: 12px;
  padding: 22px;
}
.asset-preview-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: auto;
}
.asset-preview-image figcaption,
.asset-preview-video > span,
.asset-preview-pdf > span {
  max-width: 90%;
  overflow: hidden;
  color: #9b9e96;
  font: 8px var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-preview-video {
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}
.asset-preview-video video {
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: #050606;
  object-fit: contain;
}
.asset-preview-audio {
  min-height: 190px;
  flex-direction: column;
  gap: 18px;
  padding: 30px;
}
.asset-preview-audio > svg {
  width: 48px;
  height: 48px;
  color: var(--orange);
  stroke-width: 1;
}
.asset-preview-audio b {
  max-width: 90%;
  overflow: hidden;
  color: var(--yellow);
  font: 15px var(--display);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-preview-audio audio {
  width: min(420px, 100%);
}
.asset-preview-pdf {
  display: block;
  padding-bottom: 30px;
  overflow: hidden;
}
.asset-preview-pdf iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
  background: #f4f2eb;
}
.asset-preview-pdf > span {
  position: absolute;
  left: 18px;
  bottom: 8px;
}
.asset-preview-word {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
  overflow: auto;
  padding: 24px;
  background: #d9d7d0;
  color: var(--ink);
  scrollbar-color: #777b73 #d9d7d0;
}
.word-preview-loading {
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: #777b73;
  text-align: center;
}
.word-preview-loading svg {
  width: 32px;
  height: 32px;
  color: var(--orange);
  stroke-width: 1;
}
.word-preview-loading b {
  color: var(--ink);
  font: 13px var(--display);
}
.word-preview-loading small,
.word-preview-name {
  color: #777b73;
  font: 8px var(--mono);
}
.word-preview-document {
  width: min(100%, 960px);
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 58px) clamp(26px, 6vw, 86px);
  background: #f8f7f2;
  color: #232522;
  box-shadow: 8px 8px 0 rgba(16, 18, 17, 0.12);
  font: 14px/1.85 Arial, "Microsoft YaHei", sans-serif;
}
.word-preview-document h1,
.word-preview-document h2,
.word-preview-document h3,
.word-preview-document h4,
.word-preview-document h5,
.word-preview-document h6 {
  color: #171917;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  line-height: 1.25;
  margin: 0 0 16px;
}
.word-preview-document h1 { font-size: 30px; }
.word-preview-document h2 { font-size: 24px; }
.word-preview-document h3 { font-size: 19px; }
.word-preview-document p,
.word-preview-document ul,
.word-preview-document ol,
.word-preview-document blockquote,
.word-preview-document table {
  margin: 0 0 15px;
}
.word-preview-document ul,
.word-preview-document ol {
  padding-left: 24px;
}
.word-preview-document blockquote {
  border-left: 2px solid var(--orange);
  padding-left: 16px;
  color: #656861;
}
.word-preview-document table {
  width: 100%;
  border-collapse: collapse;
}
.word-preview-document th,
.word-preview-document td {
  border: 1px solid #c8c7c0;
  padding: 7px 9px;
  text-align: left;
}
.word-preview-document th {
  background: #e9e7df;
}
.word-preview-name {
  display: block;
  margin-top: 10px;
  text-align: center;
}
.asset-preview-fallback {
  width: 100%;
  height: 100%;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  color: #9b9e96;
  text-align: center;
  box-sizing: border-box;
}
.asset-preview-fallback > svg {
  width: 36px;
  height: 36px;
  color: var(--orange);
  stroke-width: 1;
}
.asset-preview-fallback b {
  color: var(--yellow);
  font: 15px var(--display);
}
.asset-preview-fallback small {
  max-width: 90%;
  overflow: hidden;
  font: 8px var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-preview-fallback > span {
  color: #6f736b;
  font: 8px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.asset-preview-fallback a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  background: var(--orange);
  color: var(--ink);
  font: 9px var(--mono);
}
.asset-preview-fallback a svg {
  width: 13px;
  height: 13px;
}
.asset-preview-fallback a:hover {
  background: var(--yellow);
}

/* 预览增强：代码语法、媒体铺满和文件集群的直接操作。 */
.preview-body.media-mode {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: #111312;
  overflow: hidden;
}
.preview-body.media-mode .asset-preview {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.preview-body.media-mode .asset-preview-fallback {
  flex: 1 1 auto;
  min-width: 100%;
  min-height: 100%;
}
.preview-body.media-mode .asset-preview-image,
.preview-body.media-mode .asset-preview-video {
  padding: 0;
  gap: 0;
}
.preview-body.media-mode .asset-preview-image img,
.preview-body.media-mode .asset-preview-video video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #111312;
}
.preview-body.media-mode .asset-preview-image figcaption,
.preview-body.media-mode .asset-preview-video > span {
  position: absolute;
  left: 12px;
  bottom: 10px;
  max-width: calc(100% - 24px);
  padding: 4px 7px;
  background: rgba(17, 19, 18, 0.82);
  color: #d8d7cb;
}
.preview-body.media-mode .asset-preview-pdf {
  padding-bottom: 0;
}
.preview-body.media-mode .asset-preview-pdf iframe {
  min-height: 0;
}
.preview-layout.expanded-text .preview-body.media-mode {
  padding: 0;
}
.code-highlight {
  min-height: 100%;
  color: #e7e5d9;
  tab-size: 2;
  counter-reset: code-line;
}
.code-highlight code {
  display: block;
  color: inherit;
  background: transparent;
  padding: 0;
}
.syntax-comment {
  color: #777d73;
}
.syntax-string {
  color: #f0b85a;
}
.syntax-keyword {
  color: #ff6841;
}
.syntax-number {
  color: #9ed074;
}
.cluster-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cluster-head-actions button {
  min-width: 40px;
  height: 23px;
  padding: 0 5px;
  border: 0;
  background: transparent;
}
.cluster-head-actions button:hover,
.cluster-head-actions button:focus-visible {
  color: var(--orange);
  border-color: transparent;
  background: transparent;
}
.cluster-head-actions button svg {
  width: 11px;
}
.cluster-tools {
  display: none;
  align-items: center;
  gap: 13px;
  flex: 0 0 auto;
  min-height: 39px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: #dedbd2;
}
.cluster-search {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #9d9d94;
  color: #777870;
}
.cluster-search svg {
  width: 12px;
  flex: 0 0 12px;
}
.cluster-search input {
  width: 100%;
  height: 28px;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 9px var(--mono);
}
.cluster-search input::placeholder {
  color: #96978f;
}
.cluster-search-readout {
  color: #888a82;
  font: 7px var(--mono);
  white-space: nowrap;
}
.cluster-file-main,
.cluster-file-download,
.cluster-file-delete {
  border: 0;
  background: transparent;
  color: inherit;
}
.cluster-file-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0;
  text-align: left;
}
.cluster-file-main:hover {
  color: var(--orange);
}
.cluster-file-main .cluster-file-type {
  width: 15px;
  height: 15px;
  color: #83877e;
}
.cluster-item.active .cluster-file-main .cluster-file-type {
  color: var(--orange);
}
.cluster-file-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.cluster-file-download,
.cluster-file-delete {
  width: 22px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #8a8b83;
}
.cluster-file-download svg,
.cluster-file-delete svg {
  width: 12px;
  height: 12px;
}
.cluster-file-download:hover {
  color: var(--orange);
  background: #cfcac0;
}
.cluster-file-delete:hover {
  color: #b53d2d;
  background: #e5c2b8;
}
.preview-layout.expanded-cluster .preview-rail {
  position: relative;
  z-index: 20;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
}
.preview-layout.expanded-cluster > :not(.preview-rail) {
  opacity: 0;
  transform: scale(0.975);
  filter: blur(3px);
  pointer-events: none;
}
.preview-layout.expanded-cluster .cluster-tools {
  display: flex;
}
.preview-layout.expanded-cluster .cluster-list {
  padding: 11px 15px 30px;
}
.preview-layout.expanded-cluster .cluster-item {
  min-height: 62px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  padding: 12px 14px;
}
.preview-layout.expanded-cluster .cluster-file-main {
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 11px;
}
.preview-layout.expanded-cluster .cluster-file-main .cluster-file-type {
  width: 20px;
  height: 20px;
}
.preview-layout.expanded-cluster .cluster-file-copy b {
  font-size: 12px;
}
.preview-layout.expanded-cluster .cluster-file-copy small {
  font-size: 8px;
}

/* 用户管理增强：把筛选、权限和账号状态放进同一条可读的控制链路。 */
.admin-user-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 20px;
  border: 1px solid var(--ink);
  background: var(--ink);
}
.admin-user-metrics > div {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 13px 14px 11px;
  background: rgba(247, 245, 238, 0.8);
}
.admin-user-metrics > div:first-child b {
  color: var(--orange);
}
.admin-user-metrics span,
.admin-user-metrics small {
  color: #85867f;
  font: 8px var(--mono);
  letter-spacing: 0.08em;
}
.admin-user-metrics b {
  font: 27px var(--display);
  line-height: 1;
}
.admin-user-metrics small {
  letter-spacing: 0;
}
.admin-user-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 25px;
  padding: 12px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.admin-user-search {
  min-width: 230px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #aaa99f;
  background: rgba(247, 245, 238, 0.7);
}
.admin-user-search svg {
  width: 13px;
  color: var(--orange);
}
.admin-user-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 9px var(--mono);
}
.admin-user-search input::placeholder {
  color: #999a92;
}
.admin-user-toolbar > select {
  width: 125px;
  height: 34px;
  border: 1px solid #aaa99f;
  background: transparent;
  color: var(--ink);
  font: 8px var(--mono);
}
.admin-tool-button {
  height: 34px;
  padding: 0 12px;
  border: 1px solid #aaa99f;
  background: transparent;
  color: #6e7069;
  font: 8px var(--mono);
  white-space: nowrap;
}
.admin-tool-button:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.admin-user-list {
  border-top: 1px solid var(--ink);
}
.admin-user-list-head,
.admin-user-card {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.05fr) minmax(180px, 1fr) minmax(205px, 1.15fr)
    minmax(150px, 0.9fr);
  gap: 18px;
  align-items: center;
}
.admin-user-list-head {
  padding: 13px 12px;
  color: #85867f;
  font: 8px var(--mono);
  letter-spacing: 0.06em;
}
.admin-user-card {
  min-height: 142px;
  padding: 18px 12px;
  border-top: 1px solid var(--line);
  background: rgba(247, 245, 238, 0.42);
  transition: background 0.18s ease;
}
.admin-user-card:hover {
  background: rgba(251, 201, 58, 0.12);
}
.admin-user-identity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.admin-user-index {
  color: var(--orange);
  font: 9px var(--mono);
}
.admin-user-identity b,
.admin-user-identity small {
  display: block;
}
.admin-user-identity b {
  margin-bottom: 7px;
  font: 16px var(--display);
}
.admin-user-identity small {
  margin-top: 3px;
  color: #85867f;
  font: 8px var(--mono);
}
.admin-user-access,
.admin-permission-matrix,
.admin-user-state {
  display: grid;
  gap: 11px;
}
.admin-user-access label {
  display: grid;
  gap: 5px;
  color: #85867f;
  font: 7px var(--mono);
  letter-spacing: 0.08em;
}
.admin-user-access input,
.admin-user-access select {
  width: 100%;
  height: 29px;
  padding: 0 7px;
  border: 0;
  border-bottom: 1px solid #aaa99f;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 9px var(--mono);
}
.admin-permission-matrix {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.permission-toggle {
  min-height: 49px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #c4c2ba;
  background: rgba(247, 245, 238, 0.55);
  cursor: pointer;
}
.permission-toggle:hover {
  border-color: var(--orange);
}
.permission-toggle input {
  accent-color: var(--orange);
}
.permission-toggle span {
  display: grid;
  gap: 4px;
}
.permission-toggle b {
  color: var(--ink);
  font: 8px var(--mono);
}
.permission-toggle small,
.permission-note {
  color: #85867f;
  font: 7px var(--mono);
  line-height: 1.4;
}
.permission-note {
  grid-column: 1 / -1;
  color: var(--orange);
}
.admin-user-state {
  justify-items: start;
}
.admin-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-status i {
  width: 6px;
  height: 6px;
  background: currentColor;
}
.admin-user-state .admin-row-actions {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}
.admin-user-state .admin-row-actions button {
  width: 100%;
  min-height: 29px;
  padding: 7px 8px;
}
.admin-row-actions .restore {
  border: 1px solid #5b8c5a;
  background: transparent;
  color: #4d8a55;
}
.admin-user-empty {
  border-top: 1px solid var(--line);
}
@media (max-width: 1100px) {
  .admin-user-toolbar {
    flex-wrap: wrap;
  }
  .admin-user-search {
    flex-basis: 100%;
  }
  .admin-user-list {
    overflow-x: auto;
  }
  .admin-user-list-head,
  .admin-user-card {
    min-width: 850px;
  }
}
@media (max-width: 620px) {
  .admin-user-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-user-toolbar > select,
  .admin-tool-button {
    flex: 1;
    width: auto;
  }
}

/* 手机工作区：独立面板占满剩余高度，避免三个最小高度相加后被裁切。 */
@media (max-width: 720px), (max-width: 1000px) and (pointer: coarse) {
  .mobile-workspace-tabs { display: flex; flex: 0 0 auto; border-bottom: 1px solid var(--line); gap: 8px; }
  .mobile-workspace-tabs button { flex: 1; min-height: 44px; font-size: 13px; border-bottom: 2px solid transparent; }
  .mobile-workspace-tabs button[aria-pressed="true"] { color: var(--orange); border-bottom-color: var(--orange); }
  .card-editor-active .mobile-workspace-tabs { display: none; }
  #previewModal { padding: 6px; }
  #previewModal .preview-modal { padding: 36px 10px 10px; min-height: 0; }
  .preview-head { flex-wrap: wrap; padding-bottom: 10px; }
  .preview-head > div { min-width: 0; max-width: 100%; }
  .preview-head h2 { font-size: 22px; overflow-wrap: anywhere; }
  .preview-actions { width: 100%; justify-content: flex-start; }
  .preview-actions button { min-height: 40px; }
  .preview-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); margin-top: 8px; gap: 0; }
  .preview-layout > .workspace-pane { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; }
  .preview-layout:not(.expanded-text):not(.expanded-cluster):not(.expanded-timeline)[data-mobile-pane="text"] > .workspace-pane:not(.preview-main),
  .preview-layout:not(.expanded-text):not(.expanded-cluster):not(.expanded-timeline)[data-mobile-pane="cluster"] > .workspace-pane:not(.preview-rail),
  .preview-layout:not(.expanded-text):not(.expanded-cluster):not(.expanded-timeline)[data-mobile-pane="timeline"] > .workspace-pane:not(.lineage-panel) { display: none; }
  .preview-body { margin-top: 0; padding: 16px; font-size: 14px; }
  .preview-footer > span:last-child { display: none; }
  .preview-layout.expanded-text .preview-body { padding: 16px; }
  .cluster-tools { display: flex; }
  .cluster-file-main { min-height: 52px; }
  .cluster-file-download, .cluster-file-delete { min-width: 36px; min-height: 40px; }
  .node-editor { width: 100%; max-width: 100%; top: 48px; animation: none; box-shadow: none; }
  .node-editor input, .node-editor textarea { font-size: 16px; min-height: 44px; }
  .node-editor label, .node-editor-head, .node-editor-subhead { font-size: 11px; }
  .node-editor-head button, .node-editor-asset button { min-width: 40px; min-height: 44px; }
  .node-editor-asset { grid-template-columns: minmax(0, 1fr) 40px 40px; }
  .cluster-touch-move, .cluster-folder-actions .cluster-touch-move { display: inline-block; min-width: 40px; min-height: 44px; font-size: 11px; }
  .cluster-item, .preview-layout.expanded-cluster .cluster-item { grid-template-columns: 20px minmax(0, 1fr); gap: 4px 8px; }
  .cluster-file-actions { grid-column: 2; }
  .cluster-folder-actions button, .cluster-folder-create button { min-width: 40px; min-height: 44px; }
  .cluster-folder-create { grid-template-columns: 16px minmax(0, 1fr) 40px 40px; }
  .cluster-folder-create input { font-size: 16px; min-height: 44px; }
  .node-editor-actions button { min-height: 44px; }
  .node-touch-create { display: grid; gap: 8px; margin-top: 14px; }
  .card-touch-drag { display: block; position: absolute; top: 6px; right: 6px; z-index: 10; min-height: 44px; padding: 8px 12px; color: var(--yellow); background: var(--ink); border: 1px solid var(--yellow); font: 11px var(--mono); touch-action: none; }
  .node-touch-create label { position: relative; min-height: 44px; padding: 12px; border: 1px solid var(--orange); color: var(--ink); text-align: center; }
  .node-touch-create input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
  .node-touch-create label:has(input:disabled) { opacity: .5; }
  .timeline-node .node-edit-trigger { opacity: 1; transform: none; width: 32px; height: 32px; right: 2px; top: 2px; }
  .timeline-node .node-select { padding-right: 34px; }
  .lineage-tools .mobile-node-zoom { display: grid; min-width: 36px; height: 40px; font-size: 18px; }
  .lineage-head { height: 48px; flex-shrink: 0; padding: 0 8px; }
  .lineage-head > div:first-child > span, .lineage-tools .timeline-auto-fit { display: none; }
  .modal { max-height: calc(100dvh - 20px); overflow-y: auto; }
  .create-fields { grid-template-columns: 1fr; }
  input, textarea, select { font-size: 16px; }
  .filter-strip, .group-strip { flex-wrap: nowrap; overflow-x: auto; }
  .group-strip > * { flex-shrink: 0; }
  .toast, .transfer-status { max-width: calc(100vw - 24px); }
  .admin-user-list { overflow: visible; }
  .admin-user-list-head { display: none; }
  .admin-user-card { min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px 12px; }
  .admin-user-card > div { min-width: 0; width: 100%; }
  .admin-user-identity small { overflow-wrap: anywhere; }
  .admin-user-access input { height: 44px; font-size: 16px; }
  .admin-user-state .admin-row-actions { grid-template-columns: 1fr 1fr; }
  .admin-user-state .admin-row-actions button { min-height: 44px; }
  .admin-user-toolbar .select-ui { max-width: 100%; flex: 1 1 140px; }
  .admin-module-fields { grid-template-columns: minmax(0, 1fr); }
  .admin-panel-head { flex-wrap: wrap; gap: 12px; }
  .admin-nav-list { display: flex; overflow-x: auto; }
  .admin-nav { flex: 0 0 94px; }
  .card-editor-head { flex-wrap: wrap; gap: 10px; padding: 10px; }
  .card-editor-head-actions { width: 100%; display: flex; gap: 8px; }
  .card-editor-head-actions button { flex: 1; min-height: 44px; font-size: 12px; white-space: nowrap; }
  .card-editor-stage { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 16px; }
  .card-editor-stage > * { flex-shrink: 0; }
  .card-editor-preview-shell { order: -1; width: min(360px, 100%); margin: 0 auto 10px; }
  .editor-control-node { max-width: none; }
  .card-visual-editor input:not([type=color]), .card-visual-editor textarea { font-size: 16px; }
}

@media (max-height: 500px) and (pointer: coarse) {
  #previewModal .preview-modal { padding-top: 26px; }
  .preview-head { gap: 4px; padding-bottom: 4px; align-items: center; }
  .preview-head > div:first-child { flex: 1; }
  .preview-head h2 { font-size: 18px; }
  .preview-actions { width: auto; }
  .preview-meta, #previewType { display: none; }
  .mobile-workspace-tabs button { min-height: 36px; }
}