@font-face {
  font-family: "SL Sora";
  src: url("/slai-ui/fonts/sora-variable.ttf") format("truetype");
  font-display: swap;
}

.slai-canvas-page {
  margin: 0;
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #e9eceb;
  background: #111315;
  font: 13px/1.5 "SL Sora", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  color-scheme: dark;
}

.slai-canvas-header {
  min-height: 52px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  padding: 8px 18px;
  border-bottom: 1px solid #303639;
  background: #181c1e;
}

.slai-canvas-brand {
  color: #f1f4f3;
  text-decoration: none;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}

.slai-canvas-title { font-size: 13px; white-space: nowrap; }
.slai-canvas-status { font-size: 12px; color: #aeb9b7; min-width: 0; overflow-wrap: anywhere; }
.slai-canvas-status[data-state="saved"] { color: #8dd8b0; }
.slai-canvas-status[data-state="dirty"] { color: #e5c383; }
.slai-canvas-status[data-state="error"] { color: #f2a39b; }
.slai-canvas-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.slai-canvas-actions button, .slai-canvas-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 10px;
  box-sizing: border-box;
  border: 1px solid #485152;
  border-radius: 5px;
  color: #d8e2df;
  background: #242b2d;
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.slai-canvas-actions button:hover, .slai-canvas-actions a:hover { background: #343e40; color: #fff; }
.slai-canvas-actions button:disabled { opacity: .5; cursor: wait; }
.slai-canvas-page :focus-visible { outline: 2px solid #8dd8b0; outline-offset: 3px; }
.slai-canvas-workspace { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; }
#canvas-editor { display: block; width: 100%; height: 100%; min-width: 0; border: 0; background: #111315; }
.slai-canvas-error { flex: 0 0 auto; padding: 9px 18px; color: #ffd4ce; background: #482c2b; border-bottom: 1px solid #744340; overflow-wrap: anywhere; }
.slai-canvas-page [hidden] { display: none !important; }

.slai-canvas-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 37px;
  margin: 4px 0 6px;
  padding: 7px 12px;
  border: 1px solid rgba(177, 222, 210, .3);
  border-radius: 6px;
  color: #d4e8df !important;
  background: rgba(85, 145, 113, .12);
  text-decoration: none;
  font: inherit;
  font-size: 13px;
  box-sizing: border-box;
}
.slai-canvas-entry:hover { background: rgba(85, 145, 113, .24); }
.slai-canvas-entry-symbol { width: 18px; height: 18px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 2px; font-size: 15px; }
.slai-canvas-entry-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.slai-canvas-entry:focus-visible { outline: 2px solid #8dd8b0; outline-offset: 2px; }
.semi-navigation-collapsed .slai-canvas-entry { justify-content: center; padding: 8px 4px; }
.semi-navigation-collapsed .slai-canvas-entry-label { display: none; }

#semiTabPanelcanvas[data-slai-canvas-mounted] > :not([data-slai-canvas-tab-host]) { display: none !important; }
.slai-canvas-tab-host { display: flex; flex-direction: column; width: 100%; height: max(340px, calc(100dvh - 240px)); min-height: 0; overflow: hidden; background: #111315; color: #e9eceb; border: 1px solid #36403e; border-radius: 6px; box-sizing: border-box; }
.slai-canvas-tab-host:fullscreen { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
.slai-canvas-tab-toolbar { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 5px 10px; flex-shrink: 0; border-bottom: 1px solid #303639; background: #181c1e; }
.slai-canvas-tab-toolbar .slai-canvas-status { flex: 1; margin-right: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.slai-canvas-tab-toolbar button { flex-shrink: 0; min-height: 28px; padding: 3px 8px; border: 1px solid #485152; border-radius: 5px; color: #d8e2df; background: #242b2d; font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.slai-canvas-tab-toolbar button:disabled { opacity: .5; cursor: wait; }
.slai-canvas-tab-host [hidden] { display: none !important; }
.slai-canvas-tab-frame { width: 100%; min-height: 0; flex: 1 1 auto; border: 0; background: #111315; }
html[data-slai-canvas-tab-active] .creative-canvas-sidebar-host { display: none !important; }
html[data-slai-canvas-tab-active] aside.creative-settings-sider:has(.creative-canvas-sidebar-host) { display: none !important; }

@media (max-width: 680px) {
  .slai-canvas-header { gap: 10px; padding: 8px 10px; flex-wrap: wrap; }
  .slai-canvas-header > .slai-canvas-status { order: 4; flex-basis: 100%; min-height: 18px; }
  .slai-canvas-actions { gap: 5px; }
  .slai-canvas-actions button, .slai-canvas-actions a { font-size: 12px; min-height: 32px; padding: 5px 7px; }
  .slai-canvas-error { padding: 8px 10px; }
}