/* HEIYI AI — visual layer only. Exported design boards retain their own palette. */
:root { --ink:#e5eefb; --muted:#9baec5; --line:#25344b; --paper:#080e1a; --panel:#101b2d; --accent:#62d8ff; --accent-2:#7c9cff; --accent-3:#a38bff; --shadow:0 20px 60px #0005; color-scheme:dark; }
body { background:radial-gradient(ellipse at 65% 0%,#15315b66,transparent 55%),radial-gradient(ellipse at 10% 100%,#30235344,transparent 50%),#080e1a; }
.workbench-header { background:linear-gradient(110deg,#101c30f5,#0a1324f5)!important; border-color:#293b55!important; box-shadow:0 8px 35px #0004; }
aside.input-panel,aside.action-panel { background:#0c1525ed!important; border-color:#25344b!important; }
main { background:transparent!important; }
.brand h1 { color:#f0f7ff; letter-spacing:.06em; }
.brand .sub { color:#91a5c0; }
.mark { background:#101e32!important; border:1px solid #68d8ff66; box-shadow:0 0 26px #52bfff20; overflow:hidden; }
.mark img { width:100%;height:100%;object-fit:contain; mix-blend-mode:screen; filter:invert(1) grayscale(1); }
.section { border-color:#25344b!important; }
.section h2 { color:#b6d9f8!important; letter-spacing:.12em; }
.field label,.toolbar-label,.control-label { color:#b3c3d8!important; }
.input-panel :is(input,textarea,select),.action-panel :is(input,textarea,select),[class$='dialog'] :is(input,textarea,select) { background:#080f1e!important; color:#dceaff!important; border-color:#2a3c56!important; border-radius:10px; transition:border-color .2s,box-shadow .2s; }
:where(input,textarea)::placeholder { color:#71849d!important; }
:where(button,input,textarea,select):focus-visible { outline:2px solid #73dbff!important; outline-offset:3px; }
.input-panel :is(input,textarea,select):focus,.action-panel :is(input,textarea,select):focus { border-color:#64cfff!important; box-shadow:0 0 0 3px #64cfff12; }
:where(.input-panel,.action-panel,.workbench-header,.editor,[class$='dialog']) button { background:#142239; border-color:#30435e; color:#c9d9ec; transition:background .18s,border-color .18s,box-shadow .18s; }
:where(.input-panel,.action-panel,.workbench-header,.editor,[class$='dialog']) button:hover:not(:disabled) { background:#1c3350; border-color:#5b99c8; box-shadow:0 0 18px #53bfff12; }
:where(.input-panel,.action-panel,.workbench-header,.editor,[class$='dialog']) button.active,button.primary,.auth-submit { background:linear-gradient(115deg,#76e4fa,#81adff)!important; color:#071325!important; border-color:#9ce9ff!important; box-shadow:0 4px 20px #5fbfff22; font-weight:700; }
button:disabled { opacity:.48; box-shadow:none!important; }
.segmented,.chips,.canvas-size { background:transparent!important; }
:where(.input-panel,.action-panel) :is(.chip,.segmented button,.style-chip) { border-color:#2d405b; }
:where(.input-panel,.action-panel) :is(.chip.active,.style-chip.active) { color:#9ce8ff!important; background:#163449!important; border-color:#52bfff!important; }
.workbench-header :is(.member-entry,.account-entry,.header-auth-button),.workspace-toolbar,.topbar { background:#101e32!important; border-color:#2a3c55!important; color:#d6e8fb!important; }
.header-button-copy strong,.workbench-header .status { color:#bdd1e8!important; }
.header-button-copy span,.global-api-activity { color:#9db5d0!important; }
.header-button-icon { background:#18334a!important; color:#79dcff!important; }
.neural-expansion-canvas { border:1px solid #45749a!important; box-shadow:inset 0 0 60px #0c1a3533,0 12px 36px #0004; }
.neural-canvas-content { background:linear-gradient(90deg,#081326aa,transparent)!important; }
.neural-canvas-content h2 { color:#edf8ff!important; text-shadow:0 0 25px #65bfff55; }
.neural-canvas-content p { color:#c1d7ed!important; background:#081425aa!important; border-color:#456582!important; }
.board-viewport,.workspace-placeholder { background:radial-gradient(ellipse at 50% 45%,#1d385844,transparent 65%),#0b1423!important; border-color:#2a3e58!important; }
.workspace-placeholder :is(h2,h3,strong) { color:#deedfc!important; }
.workspace-placeholder :is(p,span) { color:#9bb0c9; }
.workspace-placeholder-board { background:#17273d!important; border-color:#375471!important; box-shadow:0 20px 40px #0005!important; }
.workspace-placeholder-board-visual { background:linear-gradient(145deg,#1a4962,#253355)!important; }
.workspace-placeholder-board-visual::before { background:#6bceff12!important; border-color:#81dbff55!important; }
.workspace-placeholder-board-grid i { background:#29405a!important; }
.editor,.editor .section { color:#c4d5e8; }
.editor :is(.field,.editor-card) { border-color:#293f58; }
[class$='dialog'],.auth-form,.auth-gate-card,.wallet-card,.case-card,.ai-job-panel,.project-item { background:#101c2e!important; color:#dce9f8!important; border-color:#30445e!important; }
[class$='dialog'] :is(header,footer),.auth-login-methods,.case-toolbar { background:#122037!important; border-color:#2a405a!important; }
[class$='dialog'] :is(h2,h3,label,strong) { color:#dcecff; }
[class$='dialog'] :is(p,small),.auth-privacy,.auth-mode-note { color:#a3b6cf; }
.prompt-ai-trigger { color:#8fdfff!important; background:#17344b!important; border-color:#356280!important; }
.app-toast { background:#12253b!important; color:#dcefff!important; border-color:#467898!important; }
* { scrollbar-color:#34506c transparent; scrollbar-width:thin; }
.application-loading { background:radial-gradient(ellipse at center,#173053 0%,#080f1e 64%)!important; z-index:9999; transition:opacity .45s ease,visibility .45s!important; }
.application-loading-content { position:relative; display:flex!important; flex-direction:column; gap:24px!important; padding:42px; text-align:center; background:none!important; border:0!important; box-shadow:none!important; }
.application-loading-mark { position:relative; width:156px!important; height:156px!important; border-radius:50%!important; background:#0d1b30!important; border:1px solid #70dfff66; box-shadow:0 0 70px #51bcff33,inset 0 0 32px #63bdff22; animation:heiyi-breathe 2.4s ease-in-out infinite; }
.application-loading-mark::after { content:''; position:absolute; inset:-15px; border:1px solid #78dbff28; border-top-color:#7bddff; border-bottom-color:#977bff; border-radius:50%; animation:heiyi-orbit 3s linear infinite; }
.application-loading-mark img { width:100%;height:100%;object-fit:contain;border-radius:50%;mix-blend-mode:screen;filter:invert(1) grayscale(1); }
.application-loading-copy strong { font-size:30px!important; color:#eaf6ff!important; letter-spacing:.2em; }
.application-loading-copy span { color:#98b8d6!important; font-size:12px!important; margin-top:12px; }
.intro-skip { border:1px solid #345773; border-radius:20px; padding:9px 18px; color:#b6d4ed; background:#12233a; cursor:pointer; font-size:12px; }
@keyframes heiyi-orbit { to { transform:rotate(360deg); } }
@keyframes heiyi-breathe { 50% { box-shadow:0 0 95px #51bcff55,inset 0 0 32px #63bdff33; transform:translateY(-4px); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.workbench-header .brand h1,#siteBrandName { color:#edf6ff!important; }
.workbench-header .brand .sub { color:#a3b7cf!important; }
.board-wrap { background:transparent!important; }
.input-panel .empty,.input-panel .empty-state,.input-panel #categoryTabs { color:#acbfd6!important; }
.action-panel button:disabled { background:#17283e!important; color:#8b9bb0!important; border-color:#2d4058!important; opacity:.65; }
.input-panel input[type=range],.action-panel input[type=range] { accent-color:#78dfff; }
.app main { background:#0a1322!important; }
.input-panel .segmented button:not(.active),.action-panel .mode button:not(.active) { background:#14243a!important; color:#bed2e9!important; border-color:#304862!important; }
.announcement-bar { background:#122539!important; color:#bdd3e9!important; border-color:#304862!important; }
.announcement-title { color:#e0f2ff!important; }

/* Direction selector — compact system cards for image/text and video workflows. */
.input-panel #categoryTabs {
  display:grid;
  gap:12px;
  padding:2px 0;
}
.input-panel #categoryTabs .direction-mode-group {
  position:relative;
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid #2d4662;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(135deg,#142842e8,#0b1729f2 72%),
    radial-gradient(circle at 100% 0,#58d9ff24,transparent 52%);
  box-shadow:inset 0 1px 0 #ffffff0b,0 12px 26px #0003;
}
.input-panel #categoryTabs .direction-mode-group::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,#65dcff,transparent 78%);
  opacity:.9;
}
.input-panel #categoryTabs .direction-mode-group.direction-mode-video {
  border-color:#426653;
  background:
    linear-gradient(135deg,#172d31e8,#0b1825f3 72%),
    radial-gradient(circle at 100% 0,#a7ff6a22,transparent 52%);
}
.input-panel #categoryTabs .direction-mode-group.direction-mode-video::before {
  background:linear-gradient(90deg,#b2ff72,#61d9ff 62%,transparent 92%);
}
.input-panel #categoryTabs .direction-mode-heading {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding-bottom:10px;
  border-bottom:1px solid #ffffff12;
}
.input-panel #categoryTabs .direction-mode-code {
  display:inline-flex;
  align-items:center;
  min-height:21px;
  padding:0 7px;
  border:1px solid #62d8ff66;
  border-radius:5px;
  color:#7ee4ff;
  font:700 9px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.08em;
  white-space:nowrap;
}
.input-panel #categoryTabs .direction-mode-video .direction-mode-code {
  border-color:#a6ff6a77;
  color:#c5ff98;
}
.input-panel #categoryTabs .direction-mode-heading-copy {
  min-width:0;
  display:grid;
  gap:3px;
}
.input-panel #categoryTabs .direction-mode-heading-copy strong {
  overflow:hidden;
  color:#f1f8ff;
  font-size:13px;
  line-height:1.25;
  letter-spacing:.03em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.input-panel #categoryTabs .direction-mode-heading-copy span {
  overflow:hidden;
  color:#8fa8c2;
  font-size:10px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.input-panel #categoryTabs .direction-mode-count {
  align-self:start;
  padding:4px 6px;
  border:1px solid #35506c;
  border-radius:5px;
  color:#a8c1d9;
  font:600 9px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;
  white-space:nowrap;
}
.input-panel #categoryTabs .direction-mode-buttons {
  display:grid;
  gap:7px;
}
.input-panel #categoryTabs .direction-mode-button {
  position:relative;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 16px;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:54px;
  padding:8px 9px;
  border:1px solid #2d4965!important;
  border-radius:9px;
  color:#c6d9ec!important;
  background:linear-gradient(110deg,#14263d,#102038)!important;
  box-shadow:inset 0 1px 0 #ffffff0a;
  text-align:left;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.input-panel #categoryTabs .direction-mode-button:hover:not(:disabled) {
  transform:translateY(-1px);
  border-color:#63cfff!important;
  background:linear-gradient(110deg,#193553,#142a47)!important;
  box-shadow:0 8px 22px #0003,0 0 18px #55cfff12;
}
.input-panel #categoryTabs .direction-mode-button:focus-visible {
  outline:2px solid #71dcff!important;
  outline-offset:2px;
}
.input-panel #categoryTabs .direction-mode-button.active {
  border-color:#a9f2ff!important;
  color:#061424!important;
  background:linear-gradient(112deg,#6ce1ff,#9dbbff)!important;
  box-shadow:0 0 0 1px #a4eaff66,0 8px 24px #4dc8ff2c;
}
.input-panel #categoryTabs .direction-mode-video .direction-mode-button.active {
  border-color:#d2ff9a!important;
  background:linear-gradient(112deg,#b8ff75,#70dfff)!important;
  box-shadow:0 0 0 1px #b8ff7566,0 8px 24px #79ec9d22;
}
.input-panel #categoryTabs .direction-mode-button-index {
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border:1px solid #3b5b7a;
  border-radius:6px;
  color:#8fdfff;
  font:700 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.04em;
}
.input-panel #categoryTabs .direction-mode-button.active .direction-mode-button-index {
  border-color:#193d55;
  color:#07324a;
  background:#ffffff55;
}
.input-panel #categoryTabs .direction-mode-button-copy {
  min-width:0;
  display:grid;
  gap:3px;
}
.input-panel #categoryTabs .direction-mode-button-copy b {
  overflow:hidden;
  color:#e7f3ff;
  font-size:12px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.input-panel #categoryTabs .direction-mode-button-copy small {
  overflow:hidden;
  color:#8ea8c2;
  font-size:9px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.input-panel #categoryTabs .direction-mode-button.active .direction-mode-button-copy :is(b,small) {
  color:#0c2a3d;
}
.input-panel #categoryTabs .direction-mode-button-arrow {
  justify-self:end;
  color:#72dfff;
  font-size:16px;
  line-height:1;
  transition:transform .18s ease;
}
.input-panel #categoryTabs .direction-mode-button:hover .direction-mode-button-arrow { transform:translate(1px,-1px); }
.input-panel #categoryTabs .direction-mode-button.active .direction-mode-button-arrow { color:#0a4b63; }
.input-panel #categoryTabs .direction-mode-empty {
  display:block;
  padding:10px;
  border:1px dashed #46617c;
  border-radius:8px;
  color:#8fa6be;
  font-size:10px;
  line-height:1.45;
}
@media (max-width:620px) {
  .input-panel #categoryTabs { gap:9px; }
  .input-panel #categoryTabs .direction-mode-group { padding:10px; border-radius:12px; }
  .input-panel #categoryTabs .direction-mode-button { min-height:50px; }
}

/* Chinese-only direction labels: keep the hierarchy readable without English
   helper lines or metadata competing with the main direction names. */
.input-panel #categoryTabs .direction-mode-heading {
  grid-template-columns:minmax(0,1fr) auto;
}
.input-panel #categoryTabs .direction-mode-heading-copy span,
.input-panel #categoryTabs .direction-mode-code,
.input-panel #categoryTabs .direction-mode-button-copy small,
.input-panel #categoryTabs .direction-mode-button-arrow {
  display:none!important;
}
.input-panel #categoryTabs .direction-mode-button {
  grid-template-columns:minmax(0,1fr)!important;
  min-height:48px;
}
.input-panel #categoryTabs .direction-mode-button-copy {
  display:block;
}
.input-panel #categoryTabs .direction-mode-button-copy b {
  display:block;
  font-size:14px;
  line-height:1.4;
  letter-spacing:.045em;
}

/* Keep the left direction rail compact: the Chinese labels stay prominent
   while the removed helper lines do not leave oversized vertical gaps. */
.input-panel #categoryTabs { gap:10px; }
.input-panel #categoryTabs .direction-mode-group {
  gap:8px;
  padding:10px;
}
.input-panel #categoryTabs .direction-mode-heading { padding-bottom:8px; }
.input-panel #categoryTabs .direction-mode-buttons {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}
.input-panel #categoryTabs .direction-mode-button {
  min-height:44px;
  padding:7px 10px;
}

@media (max-width:900px) {
  .input-panel #categoryTabs .direction-mode-buttons {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:620px) {
  .input-panel #categoryTabs .direction-mode-buttons {
    grid-template-columns:1fr;
  }
}
.video-reference-assets {
  margin: 0.9rem 0 0;
  border: 1px solid rgba(92, 191, 255, 0.28);
  border-radius: 14px;
  background: rgba(5, 18, 36, 0.52);
  color: inherit;
}
.video-reference-assets > summary {
  cursor: pointer;
  padding: 0.7rem 0.85rem;
  color: #b9e8ff;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.video-reference-assets[open] > summary {
  border-bottom: 1px solid rgba(92, 191, 255, 0.2);
}
.video-reference-grid {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem 0.85rem;
}
.video-reference-grid label {
  display: grid;
  gap: 0.3rem;
  color: #d6ecf8;
  font-size: 0.76rem;
}
.video-reference-grid input,
.video-reference-grid textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(111, 190, 235, 0.34);
  border-radius: 9px;
  background: rgba(4, 14, 30, 0.72);
  color: #f2fbff;
  font: inherit;
  padding: 0.5rem 0.6rem;
}
.video-reference-grid input:focus,
.video-reference-grid textarea:focus {
  outline: 2px solid rgba(108, 218, 255, 0.5);
  outline-offset: 1px;
}
.video-reference-assets > small {
  display: block;
  padding: 0 0.85rem 0.8rem;
  color: rgba(193, 222, 237, 0.72);
}