.ed9 :where(main.editor-page, .ed9 main.editor-page *){
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
.ed9 main.editor-page{
      font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: var(--ed-fg);
      min-height: 0;
      padding: 0 0 8px;
      
      width: 100%;
      max-width: 1180px;
    }
@media (min-width: 1201px){.ed9 .editor-layout{ grid-template-columns: 200px 1fr 300px; }
.ed9 .action-row{ flex-direction: column; }
.ed9 main.editor-page{ zoom: 0.9; width: 90%; }}
.ed9 .auth-user.is-active{
      display: flex;
    }
.ed9 .nav-link.is-active{
      color: #fff;
      background: rgba(102, 126, 234, 0.22);
    }
.ed9 #previewCanvas{
      height: 950px !important;
      
      width: 100% !important;
    }
.ed9 .brush-size-tile{
      width: 100%;
      aspect-ratio: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 2px;
      padding: 2px;
      background: #f1f3f9;
      border: 3px solid transparent;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      overflow: hidden;
    }
.ed9 .brush-size-tile .brush-option{
      display: grid;
      place-items: center;
      width: auto;
      padding: 0;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: #64748b;
      font: 600 14px/1 inherit;
      font-family: inherit;
      text-align: center;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }
.ed9 .brush-size-tile .brush-option:hover{
      background: #e2e8f0;
      color: #1e293b;
    }
.ed9 .brush-size-tile .brush-option.is-active{
      background: #f97316;
      color: #fff;
      box-shadow: 0 1px 4px rgba(249, 115, 22, 0.5);
    }
.ed9 .tool-rail, .ed9 .center-stage, .ed9 .control-rail{
      background: #ffffff !important;
      border-color: #e2e8f0 !important;
    }
.ed9 .canvas-scroll{
      background: linear-gradient(135deg, #f8fff8 0%, #f0fff8 100%) !important;
    }
.ed9 #partCanvas{
      box-shadow: none !important;
      border-radius: 0 !important;
    }
@media (min-width: 1201px){.ed9 #previewCanvas{
        height: 950px !important;
      }}
@media (max-width: 1200px){.ed9 #previewCanvas{
        height: 800px !important;
      }}
@media (max-width: 1024px) and (orientation: portrait){.ed9 .editor-layout{
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px;
      }
.ed9 .tool-rail{
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        grid-auto-flow: row !important;
        overflow-x: visible !important;
        padding: 16px !important;
      }
.ed9 .tool-grid{
        display: grid !important;
        grid-template-columns: repeat(2, 84px) !important;
        gap: 6px !important;
        justify-content: center !important;
        justify-items: center !important;
      }
.ed9 .color-card{
        width: 100% !important;
        max-width: 300px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
      }
.ed9 .center-stage, .ed9 .control-rail{
        width: 100% !important;
        max-width: 100% !important;
      }
.ed9 #previewCanvas{
        height: 700px !important;
      }
.ed9 .reset-tile{
        margin-top: 16px !important;
        width: 100% !important;
        max-width: 300px !important;
      }}
@media (max-width: 768px),
           (pointer: coarse) and (max-width: 1366px){.ed9 .tool-cell-size, .ed9 .brush-size-tile{
        display: contents !important;
      }
.ed9 .brush-size-tile .brush-option{
        border-radius: 8px !important;
        background: #eef0f6;
        color: #475569;
        font-size: 15px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }
}
@media (max-width: 768px){.ed9 .editor-layout{
        display: flex !important;
        flex-direction: column !important;
        gap: 12px;
      }
.ed9 .tool-rail{
        order: 1;
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px;
        background: #ffffff !important;
        border-radius: 12px !important;
      }
.ed9 .tool-grid{
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
      }
.ed9 .tool-tile.mini, .ed9 .tool-cell, .ed9 .brush-size-tile .brush-option{
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        font-size: 16px !important;
        border-radius: 6px !important;
      }
.ed9 .tool-icon{
        width: 16px !important;
        height: 16px !important;
      }
.ed9 .tool-rail .color-card{
        order: 2;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        background: transparent !important;
      }
.ed9 .tool-rail .color-display{
        width: 140px !important;
        height: 140px !important;
      }
.ed9 .tool-rail .color-hex-display{
        width: 100% !important;
        max-width: 280px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        padding: 14px 20px !important;
        background: #667eea !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        text-align: center !important;
      }
.ed9 .reset-tile{
        order: 3;
        width: 100% !important;
        max-width: 280px !important;
        height: 48px !important;
        margin-top: 0 !important;
        padding: 0 20px !important;
        font-size: 13px !important;
      }
.ed9 .center-stage{
        order: 2;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        background: #ffffff !important;
        border-radius: 12px !important;
      }
.ed9 #previewCanvas{
        height: 600px !important;
        margin-bottom: 12px;
      }
.ed9 .preview-background-row{
        display: flex !important;
        margin-bottom: 12px;
      }
.ed9 .preview-bar{
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
      }
.ed9 .pill{
        padding: 8px 14px !important;
        font-size: 11px !important;
        min-width: 70px !important;
      }
.ed9 .control-rail{
        order: 3;
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px;
        background: #ffffff !important;
        border-radius: 12px !important;
      }
.ed9 .control-rail .color-card{
        display: none !important;
      }
.ed9 .status-bar{
        display: none !important;
      }
.ed9 .toggle-group{
        order: 1;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 300px !important;
      }
.ed9 .layer-row, .ed9 .model-row{
        display: flex !important;
        gap: 8px !important;
        justify-content: center !important;
      }
.ed9 .back-equipment-row{
        display: none !important;
      }
.ed9 .cape-preset-select{
        display: none !important;
      }
.ed9 .part-picker-card{
        order: 2;
        display: block !important;
        width: 100% !important;
        max-width: 300px !important;
        background: transparent !important;
        padding: 12px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
      }
.ed9 .part-figure{
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
      }
.ed9 .canvas-panel{
        order: 4;
        margin-top: 0;
        width: 100% !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        padding: 16px !important;
      }
.ed9 #partCanvas{
        max-width: 100%;
        border-radius: 8px !important;
      }
.ed9 .canvas-meta-bar{
        margin-bottom: 12px;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
      }
.ed9 .canvas-title{
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #667eea !important;
      }
.ed9 .canvas-zoom-row{
        display: flex !important;
        gap: 6px !important;
      }
.ed9 .action-row{
        order: 5;
        flex-direction: row !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
      }
.ed9 .action-row-cape{
        order: 7;
        flex-direction: row !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
      }
.ed9 .action-box{
        flex: 1;
        min-height: 60px;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
      }
.ed9 .action-icon-img{
        width: 32px;
        height: 32px;
      }
.ed9 .action-label{
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }}
@media (max-width: 480px){.ed9 .editor-layout{
        gap: 10px !important;
      }
.ed9 .tool-rail{
        padding: 14px !important;
        gap: 14px;
      }
.ed9 .tool-rail .color-display{
        width: 120px !important;
        height: 120px !important;
      }
.ed9 .tool-rail .color-hex-display{
        max-width: 260px !important;
        font-size: 16px !important;
        padding: 12px 18px !important;
      }
.ed9 .tool-grid{
        gap: 4px !important;
      }
.ed9 .tool-tile.mini, .ed9 .tool-cell, .ed9 .brush-size-tile .brush-option{
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        font-size: 14px !important;
        border-radius: 4px !important;
      }
.ed9 .tool-icon{
        width: 14px !important;
        height: 14px !important;
      }
.ed9 .reset-tile{
        min-width: 100px !important;
        height: 40px !important;
        padding: 0 16px !important;
        font-size: 11px !important;
      }
.ed9 .center-stage{
        padding: 10px !important;
      }
.ed9 #previewCanvas{
        height: 550px !important;
      }
.ed9 .pill{
        padding: 7px 12px !important;
        font-size: 10px !important;
        min-width: 60px !important;
      }
.ed9 .control-rail{
        padding: 14px !important;
        gap: 10px;
      }
.ed9 .toggle-group{
        max-width: 280px !important;
      }
.ed9 .part-picker-card{
        max-width: 280px !important;
        padding: 10px !important;
      }
.ed9 .canvas-panel{
        padding: 14px !important;
      }
.ed9 .canvas-title{
        font-size: 14px !important;
      }
.ed9 .action-row, .ed9 .action-row-cape{
        gap: 8px !important;
      }
.ed9 .action-box{
        min-height: 54px;
        border-radius: 10px !important;
      }
.ed9 .action-icon-img{
        width: 28px;
        height: 28px;
      }
.ed9 .action-label{
        font-size: 11px;
      }
.ed9 .canvas-title{
        font-size: 14px;
      }}
@media (max-width: 768px) and (orientation: portrait){.ed9 .editor-layout{
        display: flex !important;
        flex-direction: column !important;
      }
.ed9 .center-stage{
        order: 1 !important;
      }
.ed9 .tool-rail{
        order: 2 !important;
      }
.ed9 .control-rail{
        order: 3 !important;
      }
.ed9 #previewCanvas{
        height: 520px !important;
        height: clamp(430px, 62svh, 560px) !important;
      }
.ed9 .tool-rail{
        gap: 12px !important;
      }
.ed9 .tool-grid{
        max-width: 320px !important;
        margin: 0 auto !important;
      }
.ed9 .tool-rail .color-display{
        width: 132px !important;
        height: 132px !important;
      }
.ed9 .tool-rail .color-hex-display{
        max-width: 320px !important;
      }}
@media (pointer: coarse) and (orientation: portrait) and (min-width: 700px) and (max-width: 1024px){.ed9 .editor-page{
        width: 100% !important;
        padding: 0 0 16px !important;
      }
.ed9 .editor-layout{
        display: grid !important;
        grid-template-columns: minmax(286px, 0.42fr) minmax(0, 0.58fr) !important;
        grid-template-areas:
          "tools preview"
          "controls preview" !important;
        align-items: start !important;
        gap: 12px !important;
      }
.ed9 .tool-rail{
        grid-area: tools;
        order: initial !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 14px !important;
        gap: 12px !important;
        align-items: center !important;
      }
.ed9 .tool-grid{
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        max-width: 260px !important;
      }
.ed9 .tool-tile.mini, .ed9 .tool-cell, .ed9 .brush-size-tile .brush-option{
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 8px !important;
      }
.ed9 .tool-icon{
        width: 18px !important;
        height: 18px !important;
      }
.ed9 .wheel-shell-compact{
        width: 168px !important;
        height: 168px !important;
      }
.ed9 .wheel-shell-compact .wheel-ring-canvas{
        width: 100% !important;
        height: 100% !important;
      }
.ed9 .wheel-shell-compact .wheel-square-canvas{
        width: 96px !important;
        height: 96px !important;
      }
.ed9 .reset-tile{
        max-width: 260px !important;
      }
.ed9 .center-stage{
        grid-area: preview;
        order: initial !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0 !important;
        gap: 8px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
      }
.ed9 .preview-wrap{
        width: 100% !important;
        min-width: 0 !important;
        background: #ffffff !important;
        border-radius: 10px !important;
      }
.ed9 #previewCanvas{
        height: clamp(480px, 58svh, 620px) !important;
        margin-bottom: 0 !important;
        touch-action: none !important;
      }
.ed9 .preview-background-row{
        gap: 8px !important;
        margin-bottom: 0 !important;
        padding: 6px 8px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
      }
.ed9 .preview-background-select{
        min-width: 0 !important;
        max-width: 180px !important;
      }
.ed9 .preview-bar{
        gap: 6px !important;
        padding: 8px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
      }
.ed9 .pill{
        min-width: 0 !important;
        padding: 7px 10px !important;
        font-size: 10px !important;
      }
.ed9 .control-rail{
        grid-area: controls;
        order: initial !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 12px !important;
        gap: 10px !important;
        align-items: stretch !important;
      }
.ed9 .toggle-group, .ed9 .cape-preset-group, .ed9 .part-picker-card, .ed9 .canvas-panel, .ed9 .action-row, .ed9 .action-row-cape{
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
      }
.ed9 .part-picker-card{
        padding: 10px !important;
      }
.ed9 .canvas-panel{
        padding: 12px !important;
      }
.ed9 .canvas-meta-bar{
        flex-wrap: wrap !important;
        gap: 8px !important;
      }
.ed9 #brushSizeMeta{
        margin-left: 0 !important;
      }
.ed9 .canvas-scroll{
        min-height: clamp(220px, 28svh, 300px) !important;
        padding: 8px !important;
        overflow: auto !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
      }
.ed9 #partCanvas{
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
      }
.ed9 .action-row, .ed9 .action-row-cape{
        gap: 8px !important;
      }
.ed9 .action-box{
        min-height: 54px !important;
      }}
@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1366px) and (pointer: coarse),
           (pointer: coarse) and (min-width: 768px) and (max-width: 1366px) and (max-height: 1024px) and (min-aspect-ratio: 1/1){.ed9 .editor-page{
        width: 100% !important;
        padding: 0 0 16px !important;
      }
.ed9 .editor-layout{
        --ed-landscape-tool: clamp(44px, 4.8vw, 52px);
        --ed-landscape-wheel: clamp(150px, 18vw, 220px);
        display: grid !important;
        
        grid-template-columns: clamp(220px, 22vw, 260px) minmax(0, 1fr) clamp(376px, 33vw, 420px) !important;
        grid-template-areas:
          "tools preview controls" !important;
        align-items: start !important;
        gap: 12px !important;
      }
.ed9 .center-stage{
        grid-area: preview;
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 8px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
      }
.ed9 .preview-wrap{
        min-width: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        border-radius: 10px !important;
      }
.ed9 #previewCanvas{
        height: clamp(360px, calc(100svh - 330px), 700px) !important;
        margin-bottom: 0 !important;
        touch-action: none !important;
      }
.ed9 .preview-background-row{
        display: flex !important;
        gap: 8px !important;
        margin-bottom: 0 !important;
        padding: 6px 8px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
      }
.ed9 .preview-bar{
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
        padding: 8px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
      }
.ed9 .status-bar{
        display: none !important;
      }
.ed9 .tool-rail{
        grid-area: tools;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 100% !important;
        overflow: visible !important;
        padding: 14px !important;
        gap: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border-radius: 12px !important;
      }
.ed9 .tool-grid{
        width: 100% !important;
        max-width: calc((var(--ed-landscape-tool) * 4) + 24px) !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
      }
.ed9 .tool-cell{
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
      }
.ed9 .tool-tile.mini, .ed9 .brush-size-tile .brush-option{
        width: var(--ed-landscape-tool) !important;
        height: var(--ed-landscape-tool) !important;
        min-width: var(--ed-landscape-tool) !important;
        border-radius: 8px !important;
      }
.ed9 .tool-icon{
        width: 20px !important;
        height: 20px !important;
      }
.ed9 .tool-rail .color-card{
        width: 100% !important;
        max-width: var(--ed-landscape-wheel) !important;
        padding: 0 !important;
        gap: 10px !important;
      }
.ed9 .wheel-shell-compact{
        width: var(--ed-landscape-wheel) !important;
        height: var(--ed-landscape-wheel) !important;
      }
.ed9 .wheel-shell-compact .wheel-ring-canvas{
        width: 100% !important;
        height: 100% !important;
      }
.ed9 .wheel-shell-compact .wheel-square-canvas{
        width: clamp(82px, 14vw, 120px) !important;
        height: clamp(82px, 14vw, 120px) !important;
      }
.ed9 .color-badge-compact{
        height: 34px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
      }
.ed9 .reset-tile{
        width: 100% !important;
        max-width: calc((var(--ed-landscape-tool) * 4) + 24px) !important;
        height: 40px !important;
        min-width: 0 !important;
        margin-top: 4px !important;
        padding: 0 12px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
      }
.ed9 .control-rail{
        grid-area: controls;
        width: 100% !important;
        max-width: none !important;
        padding: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: start !important;
        gap: 12px !important;
        border-radius: 12px !important;
      }
.ed9 .toggle-group, .ed9 .cape-preset-group, .ed9 .part-picker-card, .ed9 .canvas-panel, .ed9 .action-row, .ed9 .action-row-cape{
        width: 100% !important;
        max-width: none !important;
      }
.ed9 .part-picker-card{
        display: block !important;
      }
.ed9 .canvas-panel, .ed9 .action-row, .ed9 .action-row-cape{
        flex: 0 0 auto;
      }
.ed9 .canvas-panel{
        min-width: 0 !important;
        padding: 12px !important;
      }
.ed9 .canvas-meta-bar{
        flex-wrap: wrap !important;
        gap: 8px !important;
      }
.ed9 #brushSizeMeta{
        margin-left: 0 !important;
      }
.ed9 .canvas-scroll{
        min-height: clamp(180px, 30svh, 300px) !important;
        padding: 8px !important;
        overflow: auto !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
      }
.ed9 #partCanvas{
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
      }
.ed9 .action-box{
        min-height: 58px !important;
      }}
.ed9 main.editor-page .cape-preset-group, .ed9 main.editor-page .canvas-panel, .ed9 main.editor-page .action-row-cape, .ed9 main.editor-page .part-figure-side{
      display: none !important;
    }
.ed9 main.editor-page .edition-row{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
.ed9 main.editor-page .edition-row .canvas-title{
      margin: 0;
    }