/* Final desktop panel controller. Mobile untouched. */
@media (min-width:768px){
  #editor-page{position:relative!important;overflow:hidden!important;}
  #editor-page>.panel-left,#editor-page>.panel-right{box-sizing:border-box!important;min-width:0!important;max-width:none!important;transition:none!important;}
  #editor-page>.panel-left.collapsed,#editor-page>.panel-right.collapsed{width:0!important;min-width:0!important;max-width:0!important;overflow:hidden!important;}
  #editor-page>.panel-float-toggle{
    position:absolute!important;
    transform:translateY(-50%)!important;
    width:18px!important;height:34px!important;min-width:18px!important;min-height:34px!important;
    padding:0!important;margin:0!important;border-radius:7px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    z-index:200000!important;cursor:pointer!important;
  }
  #editor-page>#btn-collapse-left{left:calc(var(--left-panel-width,340px) - 7px)!important;right:auto!important;}
  #editor-page>#btn-collapse-right{right:calc(var(--right-panel-width,430px) - 7px)!important;left:auto!important;}
  #editor-page>.panel-resize-handle{top:64px!important;bottom:0!important;width:6px!important;z-index:199999!important;background:transparent!important;pointer-events:auto!important;}
  #editor-page>.panel-left>.panel-resize-handle{right:0!important;left:auto!important;}
  #editor-page>.panel-right>.panel-resize-handle{left:0!important;right:auto!important;}
  #editor-page>.panel-left>.panel-resize-handle:hover,#editor-page>.panel-right>.panel-resize-handle:hover{background:rgba(255,122,24,.14)!important;}
  body.resizing-editor-panel #editor-page>.canvas-area{pointer-events:none!important;}
}


/* ===== 2026-08 UI layout revision ===== */
@media (min-width: 1025px){
  #editor-page{
    grid-template-columns: 370px minmax(0,1fr) var(--right-panel-width,430px) !important;
  }
  #editor-page > .panel-left{
    width:var(--left-panel-width,370px) !important;
    max-width:none !important;
  }
  #editor-page > .panel-header{
    min-width:0;
  }
  #editor-page .editor-top-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
  }
  #editor-page .editor-top-actions .editor-top-btn{
    min-width:72px;
    height:42px;
    padding:0 12px;
  }
  #editor-page .editor-top-actions .editor-top-btn .svg-icon{
    width:20px;
    height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  #editor-page .editor-top-actions .editor-top-btn .svg-icon svg{
    width:20px;
    height:20px;
    display:block;
  }
  #editor-page .editor-top-actions .mode-btn .txt{
    transition:none;
  }

  /* 左侧指定的标题/到期栏已移除，内容直接从参数区开始 */
  #editor-page > .panel-left > .panel-content{
    padding-top:18px;
  }

  /* 右侧保留原有功能，仅移除原“色板 & 手绘工具”标题栏 */
  #editor-page > .panel-right > .panel-content{
    padding-top:18px;
  }
  #editor-page .current-color-title{
    display:flex;
    align-items:center;
    min-height:20px;
    margin:0 0 8px;
    font-size:13px;
    font-weight:800;
  }

  /* 颜色管理提示符 + 最高层级悬浮提示 */
  #editor-page .color-manage-title{
    position:relative;
    display:flex;
    align-items:center;
    gap:7px;
  }
  #editor-page .help-tip-trigger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    flex:0 0 16px;
    border-radius:50%;
    background:rgba(255,126,35,.12);
    color:#ef751b;
    border:1px solid rgba(239,117,27,.30);
    font-size:11px;
    line-height:1;
    cursor:help;
    user-select:none;
  }
  #editor-page .help-tip-popover{
    position:fixed;
    left:auto;
    top:auto;
    z-index:2147483647 !important;
    max-width:280px;
    padding:9px 11px;
    border-radius:10px;
    background:rgba(28,32,39,.97);
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 14px 36px rgba(0,0,0,.32);
    font-size:11px;
    line-height:1.6;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transform:translateY(2px);
    transition:opacity .14s ease, transform .14s ease;
  }
  #editor-page .help-tip-trigger:hover + .help-tip-popover,
  #editor-page .help-tip-trigger:focus + .help-tip-popover{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    /* Anchor is computed visually from the trigger; keeping it fixed avoids clipping. */
    left:calc(100% - 320px);
    top:calc(100% + 6px);
  }
}

/* 工具提示实际位置：让弹窗跟随触发符而不是被任何面板裁切 */
@media (min-width:768px){
  #editor-page .color-manage-title .help-tip-popover{
    position:absolute;
    left:24px;
    top:24px;
    white-space:normal;
  }
  #editor-page .color-manage-title .help-tip-trigger:hover + .help-tip-popover,
  #editor-page .color-manage-title .help-tip-trigger:focus + .help-tip-popover{
    left:24px;
    top:24px;
  }
}

.help-tip-popover.help-tip-portal{
  position:fixed!important;
  display:block!important;
  z-index:2147483647!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.help-tip-popover.help-tip-portal.is-visible{
  opacity:1!important;
  visibility:visible!important;
}
@media (max-width:767px){
  .help-tip-popover{
    z-index:2147483647!important;
  }
}


/* ===== 2026-08-13 final interaction refinements ===== */
@media (min-width:768px){
  /* Top-right: mode is orange; Home / Export / Import / Account are white. */
  #editor-page .editor-top-actions .editor-top-btn{
    background:#fff!important;
    color:#566071!important;
    border:1px solid rgba(31,41,55,.08)!important;
    box-shadow:none!important;
  }
  #editor-page .editor-top-actions .editor-top-btn:hover{
    background:#fff!important;
    color:#ef751b!important;
    border-color:rgba(255,138,42,.35)!important;
  }
  #editor-page .editor-top-actions .editor-top-btn.mode-btn{
    background:linear-gradient(135deg,#ff9b3f,#ff7a18)!important;
    border-color:transparent!important;
    color:#fff!important;
    box-shadow:0 8px 18px rgba(255,122,24,.22)!important;
  }
  #editor-page .editor-top-actions .editor-top-btn.mode-btn:hover{
    background:linear-gradient(135deg,#ff9b3f,#ff7a18)!important;
    color:#fff!important;
    border-color:transparent!important;
  }

  /* Account modal is modal-level UI: hide the editor's two collapse buttons behind it. */
  .license-modal.is-open ~ #editor-page .panel-float-toggle,
  .purchase-modal.is-open ~ #editor-page .panel-float-toggle{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}


/* ===== 2026-08-13 left resize + symmetric canvas recenter fix ===== */
@media (min-width:768px){
  /* Do not let legacy desktop rules lock the left panel width. */
  #editor-page > .panel-left{
    width:var(--left-panel-width,370px) !important;
    max-width:none !important;
  }
  #editor-page > .panel-right{
    width:var(--right-panel-width,430px) !important;
    max-width:none !important;
  }
  #editor-page > .panel-left.collapsed,
  #editor-page > .panel-right.collapsed{
    width:0 !important;
    max-width:0 !important;
  }
  /* Keep resize hit area on the actual panel edge, not the floating toggle. */
  #editor-page > .panel-left > #resize-left{
    right:-3px !important; left:auto !important; width:6px !important;
  }
  #editor-page > .panel-right > #resize-right{
    left:-3px !important; right:auto !important; width:6px !important;
  }
}

/* ===== 2026-08-13 canvas edge + compact topbar refinement ===== */
@media (min-width:1025px){
  /* Top toolbar slightly shorter; keep all controls proportionally compact. */
  #editor-page > .editor-topbar{
    min-height:56px!important;
    height:56px!important;
    padding:7px 14px!important;
    gap:10px!important;
  }
  #editor-page .editor-brand{gap:8px;min-width:200px}
  #editor-page .editor-brand-mark{width:34px;height:34px;border-radius:11px;font-size:17px}
  #editor-page .editor-top-actions{gap:5px!important}
  #editor-page .editor-top-actions .editor-top-btn{
    min-width:66px!important;
    height:34px!important;
    padding:0 10px!important;
    border-radius:10px!important;
    gap:5px!important;
    font-size:11px!important;
  }
  #editor-page .editor-top-actions .editor-top-btn .svg-icon,
  #editor-page .editor-top-actions .editor-top-btn .svg-icon svg{
    width:17px!important;height:17px!important;
  }
  #editor-page > .panel-resize-handle{top:56px!important}

  /* The white canvas frame must stay flush against both side panels. */
  #editor-page > .canvas-area{
    padding-left:0!important;
    padding-right:0!important;
    padding-top:7px!important;
    padding-bottom:8px!important;
  }
  #editor-page > .canvas-area > .canvas-wrapper{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* ===== 2026-08-13 unified symmetric panel model ===== */
@media (min-width:768px){
  #editor-page{
    display:grid!important;
    grid-template-rows:56px minmax(0,1fr)!important;
    overflow:hidden!important;
  }
  #editor-page > .panel-left,
  #editor-page > .panel-right{
    grid-row:2!important;
    box-sizing:border-box!important;
    min-width:0!important;
    max-width:none!important;
    width:var(--left-panel-width,370px)!important;
    overflow:hidden!important;
  }
  #editor-page > .panel-right{
    width:var(--right-panel-width,430px)!important;
  }
  #editor-page > .panel-left.collapsed,
  #editor-page > .panel-right.collapsed{
    width:0!important;
    min-width:0!important;
    max-width:0!important;
  }
  #editor-page > .canvas-area{
    grid-column:2!important;
    grid-row:2!important;
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    padding-left:0!important;
    padding-right:0!important;
    margin:0!important;
  }
  #editor-page > .canvas-area > .canvas-wrapper{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    border-left:1px solid rgba(31,41,55,.07)!important;
    border-right:1px solid rgba(31,41,55,.07)!important;
    box-sizing:border-box!important;
  }
  #editor-page > #btn-collapse-left{left:calc(var(--left-panel-width,370px) - 7px)!important;right:auto!important;}
  #editor-page > #btn-collapse-right{right:calc(var(--right-panel-width,430px) - 7px)!important;left:auto!important;}
  #editor-page > .panel-left > .panel-resize-handle,
  #editor-page > .panel-right > .panel-resize-handle{
    top:0!important;
    bottom:0!important;
    height:auto!important;
  }
  #editor-page > .panel-left > .panel-resize-handle{right:-3px!important;left:auto!important;}
  #editor-page > .panel-right > .panel-resize-handle{left:-3px!important;right:auto!important;}
}


/* ===== 2026-08-13 definitive symmetric panel/edge controller ===== */
@media (min-width:768px){
  #editor-page{
    position:relative!important;
    display:grid!important;
    grid-template-rows:56px minmax(0,1fr)!important;
    overflow:hidden!important;
  }
  #editor-page>.editor-topbar{grid-column:1 / -1!important;grid-row:1!important;min-width:0!important;}
  #editor-page>.panel-left{grid-column:1!important;grid-row:2!important;}
  #editor-page>.canvas-area{grid-column:2!important;grid-row:2!important;}
  #editor-page>.panel-right{grid-column:3!important;grid-row:2!important;}

  #editor-page>.panel-left,
  #editor-page>.panel-right{
    position:relative!important;
    min-width:0!important;
    max-width:none!important;
    box-sizing:border-box!important;
    width:auto!important;
    overflow:hidden!important;
  }
  #editor-page>.panel-left.collapsed,
  #editor-page>.panel-right.collapsed{
    width:0!important;
    min-width:0!important;
    max-width:0!important;
    border:0!important;
    overflow:hidden!important;
  }

  #editor-page>.canvas-area{
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  #editor-page>.canvas-area>.canvas-wrapper{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  /* 四个控件都在 editor 根节点，统一以列交界线为锚点。 */
  #editor-page>#resize-left,
  #editor-page>#resize-right{
    position:absolute!important;
    top:56px!important;
    bottom:0!important;
    width:8px!important;
    height:auto!important;
    z-index:200001!important;
    background:transparent!important;
    display:block!important;
    pointer-events:auto!important;
    cursor:ew-resize!important;
  }
  #editor-page>#resize-left{left:calc(var(--left-panel-width,370px) - 4px)!important;right:auto!important;}
  #editor-page>#resize-right{right:calc(var(--right-panel-width,430px) - 4px)!important;left:auto!important;}
  #editor-page>#resize-left:hover,
  #editor-page>#resize-right:hover{background:rgba(255,122,24,.16)!important;}
  body.resizing-editor-panel #editor-page>#resize-left,
  body.resizing-editor-panel #editor-page>#resize-right{background:rgba(255,122,24,.22)!important;}

  #editor-page>#btn-collapse-left,
  #editor-page>#btn-collapse-right{
    position:absolute!important;
    top:calc(56px + (100% - 56px)/2)!important;
    transform:translateY(-50%)!important;
    width:18px!important;
    height:34px!important;
    min-width:18px!important;
    min-height:34px!important;
    padding:0!important;
    margin:0!important;
    z-index:200002!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    pointer-events:auto!important;
  }
  #editor-page>#btn-collapse-left{left:calc(var(--left-panel-width,370px) - 7px)!important;right:auto!important;}
  #editor-page>#btn-collapse-right{right:calc(var(--right-panel-width,430px) - 7px)!important;left:auto!important;}

  /* 关闭时画布立即占用释放出来的整列空间。 */
  #editor-page>.panel-left.collapsed + .canvas-area,
  #editor-page>.panel-left.collapsed ~ .canvas-area{grid-column:1 / 3!important;}
  #editor-page>.panel-right.collapsed{grid-column:3!important;}
}

/* ===== FINAL REAL PANEL/CANVAS LAYOUT ===== */
@media (min-width:768px){
  #editor-page{
    display:grid!important;
    position:relative!important;
    grid-template-rows:56px minmax(0,1fr)!important;
    grid-template-columns:var(--left-panel-width,370px) minmax(0,1fr) var(--right-panel-width,430px)!important;
    overflow:hidden!important;
  }
  #editor-page>.editor-topbar{grid-column:1 / 4!important;grid-row:1!important;}
  #editor-page>.panel-left{grid-column:1!important;grid-row:2!important;}
  #editor-page>.canvas-area{grid-column:2!important;grid-row:2!important;}
  #editor-page>.panel-right{grid-column:3!important;grid-row:2!important;}

  #editor-page>.panel-left,
  #editor-page>.panel-right{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    margin:0!important;
  }
  #editor-page>.panel-left.collapsed,
  #editor-page>.panel-right.collapsed{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:hidden!important;
    border-width:0!important;
  }

  #editor-page>.canvas-area{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  #editor-page>.canvas-area>.canvas-wrapper{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  /* 根节点上的拖拽手柄：始终卡在“面板 ↔ 画布”的真实交界线。 */
  #editor-page>#resize-left,
  #editor-page>#resize-right{
    position:absolute!important;
    top:56px!important;
    bottom:0!important;
    width:8px!important;
    height:auto!important;
    padding:0!important;
    margin:0!important;
    display:block!important;
    background:transparent!important;
    z-index:2147483000!important;
    cursor:ew-resize!important;
    pointer-events:auto!important;
  }
  #editor-page>#resize-left{left:calc(var(--left-panel-width,370px) - 4px)!important;right:auto!important;}
  #editor-page>#resize-right{right:calc(var(--right-panel-width,430px) - 4px)!important;left:auto!important;}
  #editor-page>#resize-left:hover,
  #editor-page>#resize-right:hover,
  body.resizing-editor-panel #editor-page>#resize-left,
  body.resizing-editor-panel #editor-page>#resize-right{background:rgba(255,122,24,.16)!important;}

  /* 收缩按钮也只锚定交界线，不参与布局计算。 */
  #editor-page>#btn-collapse-left,
  #editor-page>#btn-collapse-right{
    position:absolute!important;
    top:calc(56px + (100% - 56px)/2)!important;
    transform:translateY(-50%)!important;
    width:18px!important;
    height:34px!important;
    min-width:18px!important;
    min-height:34px!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    z-index:2147483001!important;
    pointer-events:auto!important;
  }
  #editor-page>#btn-collapse-left{left:calc(var(--left-panel-width,370px) - 7px)!important;right:auto!important;}
  #editor-page>#btn-collapse-right{right:calc(var(--right-panel-width,430px) - 7px)!important;left:auto!important;}

  /* 不允许任何旧规则把画布跨到左右列。 */
  #editor-page>.panel-left.collapsed ~ .canvas-area,
  #editor-page>.panel-left.collapsed + .canvas-area,
  #editor-page>.panel-right.collapsed,
  #editor-page>.canvas-area{grid-column:2!important;}
}

/* 2026-08-13 FINAL FIX: right panel collapse must only zero column 3; never overlap canvas column 2. */
@media (min-width:768px){
  #editor-page>.panel-left{grid-column:1!important;grid-row:2!important;}
  #editor-page>.canvas-area{grid-column:2!important;grid-row:2!important;}
  #editor-page>.panel-right{grid-column:3!important;grid-row:2!important;}
  #editor-page>.panel-right.collapsed{grid-column:3!important;grid-row:2!important;width:0!important;min-width:0!important;max-width:none!important;overflow:hidden!important;}
  #editor-page>.panel-left.collapsed{grid-column:1!important;grid-row:2!important;width:0!important;min-width:0!important;max-width:none!important;overflow:hidden!important;}
  #editor-page>.canvas-area,
  #editor-page>.canvas-area>.canvas-wrapper{min-width:0!important;max-width:none!important;width:100%!important;}
}

/* ===== 2026-08-13 unified final viewport/bottom layout override ===== */
@media (min-width:768px){
  #editor-page{display:grid!important;grid-template-rows:56px minmax(0,1fr)!important;grid-template-columns:var(--left-panel-width,370px) minmax(0,1fr) var(--right-panel-width,430px)!important;width:100%!important;min-width:0!important;overflow:hidden!important;}
  #editor-page>.editor-topbar{grid-column:1 / -1!important;grid-row:1!important;}
  #editor-page>.panel-left{grid-column:1!important;grid-row:2!important;width:auto!important;min-width:0!important;max-width:none!important;overflow:hidden!important;}
  #editor-page>.canvas-area{grid-column:2!important;grid-row:2!important;width:auto!important;min-width:0!important;max-width:none!important;overflow:hidden!important;position:relative!important;display:flex!important;flex-direction:column!important;}
  #editor-page>.panel-right{grid-column:3!important;grid-row:2!important;width:auto!important;min-width:0!important;max-width:none!important;overflow:hidden!important;}
  #editor-page>.panel-left.collapsed{grid-column:1!important;grid-row:2!important;width:auto!important;min-width:0!important;max-width:none!important;overflow:hidden!important;}
  #editor-page>.panel-right.collapsed{grid-column:3!important;grid-row:2!important;width:auto!important;min-width:0!important;max-width:none!important;overflow:hidden!important;}
  #editor-page>.panel-left.collapsed + .canvas-area,#editor-page>.panel-left.collapsed ~ .canvas-area,#editor-page>.panel-right.collapsed + .canvas-area,#editor-page>.panel-right.collapsed ~ .canvas-area{grid-column:2!important;}
  #editor-page>.canvas-area>.canvas-wrapper{flex:1 1 auto!important;min-width:0!important;min-height:0!important;width:100%!important;max-width:none!important;overflow:hidden!important;margin:0!important;}
  #editor-page>.canvas-area>.bottom-area{flex:0 0 auto!important;min-width:0!important;min-height:0!important;width:100%!important;}
  #editor-page>#resize-left,#editor-page>#resize-right{z-index:2147483600!important;}
  #editor-page>#btn-collapse-left,#editor-page>#btn-collapse-right{z-index:2147483640!important;}
}


/* 2026-08-13 FINAL UI TUNING: slightly narrower desktop side panels. */
@media (min-width: 1025px){
  #editor-page{
    grid-template-columns:var(--left-panel-width,350px) minmax(0,1fr) var(--right-panel-width,410px)!important;
  }
  #editor-page>#btn-collapse-left{left:calc(var(--left-panel-width,350px) - 7px)!important;}
  #editor-page>#btn-collapse-right{right:calc(var(--right-panel-width,410px) - 7px)!important;}
  #editor-page>#resize-left{left:calc(var(--left-panel-width,350px) - 4px)!important;}
  #editor-page>#resize-right{right:calc(var(--right-panel-width,410px) - 4px)!important;}
}

/* 2026-08-13 FINAL DARK EDITOR: restore the deep-black editor surface. */
body:not(.light-theme).douTu-editor-active,
html:not(.light-theme) body.douTu-editor-active{
  background:#000!important;
}
body:not(.light-theme) .editor-page{
  background:#000!important;
}
body:not(.light-theme) .canvas-area{
  background:#000!important;
}
body:not(.light-theme) .canvas-wrapper{
  background:#050505!important;
}

/* === 豆图工坊 v2.1：深色模式真实功能卡片玻璃层（修复主题选择器） === */
body:not(.light-theme) .editor-page .panel {
  background: rgba(6, 7, 9, 0.68) !important;
  background-image: none !important;
  backdrop-filter: blur(22px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(125%) !important;
  border-color: rgba(255,255,255,.09) !important;
}
body:not(.light-theme) .editor-page .panel-header {
  background: rgba(0,0,0,.42) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  color: #ff9a3c !important;
}
body:not(.light-theme) .editor-page .panel-content .section {
  background: rgba(3,4,6,.72) !important;
  background-image: none !important;
  backdrop-filter: blur(20px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(125%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 10px 26px rgba(0,0,0,.30) !important;
}
body:not(.light-theme) .editor-page .panel-content .section-title,
body:not(.light-theme) .editor-page .panel-content .section-title * {
  color: #f6f7f9 !important;
}
body:not(.light-theme) .editor-page .panel-content label,
body:not(.light-theme) .editor-page .panel-content span,
body:not(.light-theme) .editor-page .panel-content .current-color-info,
body:not(.light-theme) .editor-page .panel-content .color-name {
  color: rgba(255,255,255,.86) !important;
}
body:not(.light-theme) .editor-page .panel-content .section input:not([type=range]),
body:not(.light-theme) .editor-page .panel-content .section select {
  background: rgba(0,0,0,.46) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body:not(.light-theme) .editor-page .panel-content .section input::placeholder,
body:not(.light-theme) .editor-page .panel-content .section select {
  color: rgba(255,255,255,.78) !important;
}
body:not(.light-theme) .editor-page .panel-content .btn {
  background: rgba(255,255,255,.055) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body:not(.light-theme) .editor-page .panel-content .btn:hover {
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}
body:not(.light-theme) .editor-page .panel-content .btn.active,
body:not(.light-theme) .editor-page .panel-content .btn.btn-primary {
  background: linear-gradient(135deg,#ff9f45,#ff7a18) !important;
  color: #fff !important;
  border-color: transparent !important;
}
body:not(.light-theme) .editor-page .palette-tabs .palette-tab {
  background: rgba(0,0,0,.34) !important;
  color: rgba(255,255,255,.82) !important;
  border-color: rgba(255,255,255,.10) !important;
}
body:not(.light-theme) .editor-page .current-color-display,
body:not(.light-theme) .editor-page .stats-section {
  background: rgba(3,4,6,.62) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-color: rgba(255,255,255,.09) !important;
}
body:not(.light-theme) .editor-page .bottom-area {
  background: rgba(4,5,7,.72) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top-color: rgba(255,255,255,.08) !important;
}
body:not(.light-theme) .editor-page .panel-float-toggle {
  background: rgba(0,0,0,.62) !important;
  color: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}