/* 编辑态的路径按钮应服从 hidden 属性，不受 flex 样式覆盖。 */
[hidden] { display: none !important; }
.subtle.active { border-color: #179a76; color: #177a60; background: #eaf6f1; }
.canvas-shell, .page-preview.is-transparent {
  background-color: #fff;
  background-image: conic-gradient(#dde4e6 25%, #fff 0 50%, #dde4e6 0 75%, #fff 0);
  background-size: 24px 24px;
}
.page-preview.is-transparent { background-size: 12px 12px; }
.properties .toggle-row { display: flex; align-items: center; gap: 8px; }
.properties .toggle-row input[type=checkbox] { width: 16px; height: 16px; display: inline-block; padding: 0; margin: 0; accent-color: #19785b; }
.canvas-settings { border-bottom: 1px solid #edf0f1; }
.canvas-settings summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 15px 18px; font-weight: 700; }
.canvas-settings summary span { color: #809097; font-weight: 400; }
.canvas-settings-body { padding: 0 18px 17px; }
.canvas-settings-body label { display: block; color: #607179; font-size: 11px; font-weight: 600; margin-bottom: 13px; }
.canvas-settings-body input, .canvas-settings-body select { display: block; width: 100%; margin-top: 6px; padding: 8px 9px; border: 1px solid #d6dfe2; border-radius: 4px; background: #fff; color: #293d44; }
.canvas-settings-body button { width: 100%; }
.canvas-shell { min-width: 0; flex: none; }
.properties input[type=range] { height: 24px; padding: 0; border: 0; accent-color: #27a8ce; }
.asset-button:focus-visible, .subtle:focus-visible { outline: 2px solid #27a8ce; outline-offset: 2px; }

@media (max-width: 750px) {
  .canvas-shell { min-width: 0; flex-shrink: 1; }
  .canvas-shell canvas { min-width: 0; }
  .transport { height: auto; min-height: 70px; flex-wrap: wrap; gap: 8px; padding: 7px 10px; }
  .transport input[type=range] { flex: 1 1 120px; }
  .fps-label { margin-left: auto; }
}

/* 较长的翻译允许换行，避免工具栏和属性按钮互相挤压。 */
.topbar { height: auto; min-height: 58px; flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px; }
.top-actions { flex-wrap: wrap; }
#languageSelect { max-width: 140px; padding: 7px; border: 1px solid #d6dfe2; border-radius: 5px; background: #fff; }
.subtle { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
.asset-button { flex-wrap: wrap; }
.asset-hint { white-space: normal; }
html:not([lang="zh-CN"]) .brand small { display: none; }