/* Force root font-size back to standard (1rem = 16px) to prevent Tailwind shrinkage */
html {
    font-size: 16px !important;
}
body {
    background-color: #06080f !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Hide the theme's loading mask/loader immediately as early as possible */
#page-loading, .page-loading, .page-loader, .loading-mask, .zib-loading, .zib-loader, .page-loading-wp, [class*="loading"], [id*="loading"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
}
/* Hide the theme's native header menu, banners, carousels, and sliders completely */
header, .header, .navbar, .site-header, #header, .header-layout,
.header-banner, .zib-slider, .zib-widget, .slide-box, .slide-container, 
.section-slide, [class*="carousel"], [class*="slider"], [class*="banner"], 
.carousel-inner, .header-carousel, .widget_ui_slider, .header-widget, 
.top-widget, .theme-carousel, .page-header, .banner-wrap, .banner-box,
.slide-wrap, .widget_ui_banner, .widget_ui_slider, .zib-widget {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

@media (min-width: 768px) {
    .mohe-workbench-container .mohe-top-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: auto !important;
    }
    .mohe-workbench-container .mohe-top-nav a {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap !important;
    }
}
/* Allow sticky position to work by disabling overflow limits on html & body */
html, body {
    overflow: visible !important;
    overflow-x: visible !important;
}
/* Force theme content wrappers to be 100% full width and allow sticky position to work by disabling overflow limits */
#app, 
.container, 
.wrapper, 
.content-wrap, 
.main-content, 
.site-content, 
.page-wrapper,
#content,
#main-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
}

/* Isolated Scoped Rules for MoHe Workbench Dashboard */
.mohe-workbench-container {
    background-color: #06080f;
    background-image: radial-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 32px 32px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #f1f5f9;
    min-height: calc(100vh - 32px);
    padding: 32px;
    margin-left: -20px;
    margin-top: -20px;
    margin-bottom: -20px;
    box-sizing: border-box;
    position: relative;
    overflow: visible !important;
    overflow-x: visible !important;
    -webkit-font-smoothing: antialiased;
}
.mohe-workbench-container * {
    box-sizing: border-box;
}
.mohe-workbench-container ::-webkit-scrollbar { width: 5px; height: 5px; }
.mohe-workbench-container ::-webkit-scrollbar-track { background: #06080f; }
.mohe-workbench-container ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 99px; }
.mohe-workbench-container ::-webkit-scrollbar-thumb:hover { background: #00f0ff; }

.mohe-workbench-container input[type="text"], 
.mohe-workbench-container textarea {
    color: #ffffff;
}
.mohe-workbench-container button {
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
}

.mohe-workbench-container .studio-glass {
    background: rgba(14, 17, 30, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.mohe-workbench-container .btn-studio-option {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(4, 5, 8, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.03);
    color: #8a99ad;
    user-select: none;
}
.mohe-workbench-container .btn-studio-option:hover {
    border-color: rgba(0, 240, 255, 0.25);
    color: #f1f5f9;
    background: rgba(4, 5, 8, 0.8);
    transform: translateY(-1px);
}

.mohe-workbench-container .btn-studio-active {
    border-color: #f1f5f9 !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(255, 255, 255, 0.02);
}

.mohe-workbench-container .term-tab {
    transition: all 0.2s ease;
}
.mohe-workbench-container .term-tab-active {
    color: #00f0ff !important;
    font-weight: 700;
}
.mohe-workbench-container .term-tab-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #00f0ff;
    box-shadow: 0 1px 8px rgba(0, 240, 255, 0.8);
}

@keyframes slideIn {
    from { transform: translateY(1.5rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.mohe-workbench-container .toast-animate {
    animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mouse-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.3; }
    50% { transform: translateY(6px); opacity: 1; }
}
.mohe-workbench-container .mouse-wheel {
    animation: mouse-bounce 1.8s infinite ease-in-out;
}

@keyframes floating-box {
    0%, 100% { transform: rotateY(-20deg) rotateX(12deg) rotateZ(4deg) translateY(0px); }
    50% { transform: rotateY(-20deg) rotateX(12deg) rotateZ(4deg) translateY(-10px); }
}
.mohe-workbench-container .isometric-float {
    animation: floating-box 5s infinite ease-in-out;
}

@keyframes avatar-breath {
    0%, 100% {
        box-shadow: 0 0 4px rgba(0, 240, 255, 0.4), 0 0 10px rgba(59, 130, 246, 0.3);
        border-color: rgba(0, 240, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 12px rgba(0, 240, 255, 0.8), 0 0 20px rgba(59, 130, 246, 0.6);
        border-color: rgba(0, 240, 255, 0.9);
    }
}
.mohe-workbench-container .avatar-breath-rotate {
    position: relative;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 240, 255, 0.4);
    animation: avatar-breath 3s infinite ease-in-out;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mohe-workbench-container .avatar-breath-rotate:hover {
    transform: rotate(360deg);
}

/* Custom Status Node Style */
.mohe-workbench-container .mohe-status-node {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(14, 17, 30, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 9999px !important;
    padding: 6px 16px !important;
    font-size: 10px !important;
    font-family: monospace !important;
    letter-spacing: 0.1em !important;
    color: #94a3b8 !important;
    height: 32px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.mohe-workbench-container .mohe-status-dot-wrap {
    position: relative !important;
    display: inline-flex !important;
    width: 8px !important;
    height: 8px !important;
    vertical-align: middle !important;
}

.mohe-workbench-container .mohe-status-dot-ping {
    position: absolute !important;
    display: inline-flex !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background-color: #10b981 !important;
    opacity: 0.75 !important;
    animation: mohe-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite !important;
}

.mohe-workbench-container .mohe-status-dot-core {
    position: relative !important;
    display: inline-flex !important;
    border-radius: 50% !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #10b981 !important;
}

/* ==========================================================================
   Isolated Styles for Standalone Online Drawing Workspace (Image 4 Design)
   ========================================================================== */
.mohe-draw-workspace {
    min-height: 100vh !important;
    position: relative !important;
    overflow: visible !important;
    background-color: #06080f !important;
    padding-top: 32px !important;
}

.mohe-draw-workspace .mohe-draw-layout {
    display: flex !important;
    flex-direction: row !important;
    height: 960px !important;
    min-height: 960px !important;
    overflow: hidden !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

/* 3 Columns Flex Layout */
.mohe-draw-workspace .mohe-draw-left-col {
    width: 320px !important;
    min-width: 320px !important;
    height: 100% !important;
    background: rgba(14, 17, 30, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    overflow-y: auto !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.mohe-draw-workspace .mohe-draw-center-col {
    flex: 1 !important;
    height: 100% !important;
    background: rgba(14, 17, 30, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    overflow-y: auto !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
}

.mohe-draw-workspace .mohe-draw-right-col {
    width: 108px !important;
    min-width: 108px !important;
    height: 100% !important;
    background: rgba(14, 17, 30, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    overflow-y: auto !important;
    padding: 14px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Hide scrollbars but allow scrolling if needed */
.mohe-draw-workspace .mohe-draw-left-col::-webkit-scrollbar,
.mohe-draw-workspace .mohe-draw-center-col::-webkit-scrollbar,
.mohe-draw-workspace .mohe-draw-right-col::-webkit-scrollbar {
    width: 4px;
}
.mohe-draw-workspace .mohe-draw-left-col::-webkit-scrollbar-thumb,
.mohe-draw-workspace .mohe-draw-center-col::-webkit-scrollbar-thumb,
.mohe-draw-workspace .mohe-draw-right-col::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
}

/* Card block inside Left Panel */
.mohe-draw-workspace .mohe-draw-card {
    background: rgba(20, 26, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
}

.mohe-draw-workspace .mohe-draw-label {
    font-size: 11px;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: 0.05em;
}

.mohe-draw-workspace .mohe-draw-link-btn {
    font-size: 10px !important;
    color: #cbd5e1 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 4px 10px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mohe-draw-workspace .mohe-draw-link-btn:hover {
    background: rgba(0, 240, 255, 0.1) !important;
    border-color: rgba(0, 240, 255, 0.3) !important;
    color: #00f0ff !important;
}

.mohe-draw-workspace .mohe-draw-textarea {
    width: 100%;
    background: #090c13;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 10px;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    resize: none;
    outline: none;
    transition: border-color 0.2s;
}
.mohe-draw-workspace .mohe-draw-textarea:focus {
    border-color: rgba(0, 240, 255, 0.4);
}

.mohe-draw-workspace .mohe-draw-textarea-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.mohe-draw-workspace .mohe-draw-btn-sm {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: #f1f5f9;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.mohe-draw-workspace .mohe-draw-btn-sm:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.mohe-draw-workspace .mohe-draw-btn-icon {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

/* New layout for draw page prompt textarea card */
.mohe-draw-workspace .mohe-draw-textarea-wrapper {
    background: rgba(13, 16, 27, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mohe-draw-workspace .mohe-draw-textarea-wrapper:focus-within {
    border-color: rgba(0, 240, 255, 0.45) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.15) !important;
}

.mohe-draw-workspace .mohe-draw-textarea-new {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    resize: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 80px !important;
}

.mohe-draw-workspace .mohe-draw-textarea-actions-new {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Custom Switch Toggle with rounded gray border */
.mohe-draw-workspace .mohe-custom-switch {
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    width: 36px !important;
    height: 20px !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.mohe-draw-workspace .mohe-custom-switch input[type="checkbox"] {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

.mohe-draw-workspace .mohe-custom-switch .mohe-custom-switch-track {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1.5px solid #555555 !important; /* Rounded gray border */
    border-radius: 99px !important;
    position: absolute !important;
    inset: 0 !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.mohe-draw-workspace .mohe-custom-switch .mohe-custom-switch-track::before {
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 2px !important;
    top: 2px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background-color: #edeaf8 !important; /* White knob */
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.mohe-draw-workspace .mohe-custom-switch input:checked + .mohe-custom-switch-track {
    border-color: #9d90f5 !important;
    background-color: rgba(157, 144, 245, 0.15) !important;
}

.mohe-draw-workspace .mohe-custom-switch input:checked + .mohe-custom-switch-track::before {
    transform: translateX(16px) !important;
    background-color: #9d90f5 !important;
}

/* Custom Canvas Container overrides to make it borderless, transparent, and seamless */
.mohe-draw-workspace .mohe-draw-canvas-container {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-top: 0 !important;
    overflow: hidden !important;
}

/* Force hiding of loader, placeholder, and results when hidden class is present */
.mohe-draw-workspace #draw-loader.hidden,
.mohe-draw-workspace #draw-placeholder.hidden,
.mohe-draw-workspace #draw-result-container.hidden {
    display: none !important;
}

/* Send Button inside prompt textarea card */
.mohe-draw-workspace .mohe-draw-send-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #00f0ff 0%, #9d90f5 100%) !important;
    border: none !important;
    color: #0c0f16 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3) !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
}

.mohe-draw-workspace .mohe-draw-send-btn svg {
    color: #0c0f16 !important;
}

.mohe-draw-workspace .mohe-draw-send-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.5) !important;
}

.mohe-draw-workspace .mohe-draw-send-btn:active {
    transform: scale(0.95) !important;
}

.mohe-draw-workspace .mohe-draw-btn-sm-new {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    font-size: 10px !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mohe-draw-workspace .mohe-draw-btn-sm-new:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.mohe-draw-workspace .mohe-draw-btn-icon-new {
    background: transparent !important;
    border: none !important;
    padding: 6px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    transition: all 0.2s !important;
}

.mohe-draw-workspace .mohe-draw-btn-icon-new:hover {
    color: #ef4444 !important;
}


/* Aspect Ratio buttons override to match screenshot layout */
.mohe-draw-workspace .mohe-draw-ratio-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    max-height: 155px !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
}
.mohe-draw-workspace .mohe-draw-ratio-grid::-webkit-scrollbar {
    width: 4px !important;
}
.mohe-draw-workspace .mohe-draw-ratio-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 99px !important;
}

.mohe-draw-workspace .mohe-draw-ratio-btn {
    background: #1b1c21 !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
    padding: 14px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 72px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.mohe-draw-workspace .mohe-draw-ratio-btn:hover {
    background: #24262d !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-1px) !important;
}

.mohe-draw-workspace .mohe-draw-ratio-btn.active {
    background: #2b2d35 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.mohe-draw-workspace .mohe-draw-ratio-btn .ratio-box {
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}

.mohe-draw-workspace .mohe-draw-ratio-btn.active .ratio-box {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.15) !important;
}

.mohe-draw-workspace .mohe-draw-ratio-btn .ratio-text {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #8c909c !important;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

.mohe-draw-workspace .mohe-draw-ratio-btn.active .ratio-text {
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* Specific aspect ratio icon sizes */
.mohe-draw-workspace .mohe-draw-ratio-btn[data-ratio="1:1"] .ratio-box {
    width: 16px !important;
    height: 16px !important;
}
.mohe-draw-workspace .mohe-draw-ratio-btn[data-ratio="3:4"] .ratio-box {
    width: 13px !important;
    height: 17px !important;
}
.mohe-draw-workspace .mohe-draw-ratio-btn[data-ratio="2:3"] .ratio-box {
    width: 12px !important;
    height: 18px !important;
}
.mohe-draw-workspace .mohe-draw-ratio-btn[data-ratio="9:16"] .ratio-box {
    width: 10px !important;
    height: 18px !important;
}
.mohe-draw-workspace .mohe-draw-ratio-btn[data-ratio="4:3"] .ratio-box {
    width: 17px !important;
    height: 13px !important;
}
.mohe-draw-workspace .mohe-draw-ratio-btn[data-ratio="3:2"] .ratio-box {
    width: 18px !important;
    height: 12px !important;
}
.mohe-draw-workspace .mohe-draw-ratio-btn[data-ratio="16:9"] .ratio-box {
    width: 18px !important;
    height: 10px !important;
}

/* Model Card Selection Grid container */
.mohe-draw-workspace #mohe-version-buttons-grid {
    max-height: 130px !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
}
.mohe-draw-workspace #mohe-version-buttons-grid::-webkit-scrollbar {
    width: 4px !important;
}
.mohe-draw-workspace #mohe-version-buttons-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 99px !important;
}

/* Model Card Selection */
.mohe-draw-workspace .mohe-draw-model-card {
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    overflow: hidden !important;
    height: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mohe-draw-workspace .mohe-draw-model-card .overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(6, 8, 15, 0.6) !important;
    z-index: 1 !important;
    transition: all 0.2s !important;
}
.mohe-draw-workspace .mohe-draw-model-card:hover {
    border-color: rgba(0, 240, 255, 0.35) !important;
    transform: translateY(-1px) !important;
}
.mohe-draw-workspace .mohe-draw-model-card:hover .overlay {
    background: rgba(6, 8, 15, 0.5) !important;
}
.mohe-draw-workspace .mohe-draw-model-card.active {
    border-color: #00f0ff !important;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.35) !important;
}
.mohe-draw-workspace .mohe-draw-model-card.active .overlay {
    background: rgba(6, 8, 15, 0.45) !important;
}
.mohe-draw-workspace .mohe-draw-model-card .model-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    z-index: 2 !important;
}
.mohe-draw-workspace .mohe-draw-model-card .model-desc {
    font-size: 9px !important;
    color: #cbd5e1 !important;
    margin-top: 2px !important;
    z-index: 2 !important;
}

/* Model style grid buttons */
.mohe-draw-workspace .mohe-draw-style-btn {
    background: rgba(4, 5, 8, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-align: left !important;
}
.mohe-draw-workspace .mohe-draw-style-btn:hover {
    background: rgba(4, 5, 8, 0.6) !important;
    border-color: rgba(0, 240, 255, 0.2) !important;
    transform: translateY(-1px) !important;
}
.mohe-draw-workspace .mohe-draw-style-btn.active {
    border-color: #00f0ff !important;
    background: rgba(0, 240, 255, 0.02) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.1) !important;
}
.mohe-draw-workspace .mohe-draw-style-btn.active div {
    color: #00f0ff !important;
}

/* Reference image upload */
.mohe-draw-workspace .mohe-draw-upload-box {
    border: 1.5px dashed rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 12px !important;
    width: 76px !important;
    height: 76px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mohe-draw-workspace .mohe-draw-upload-box:hover {
    border-color: #00f0ff !important;
    background: rgba(0, 240, 255, 0.02) !important;
}

/* Range input slider */
.mohe-draw-workspace .mohe-draw-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 20px !important;
    background: transparent !important;
    outline: none !important;
    margin: 4px 0 !important;
    cursor: pointer !important;
}

/* Track styling */
.mohe-draw-workspace .mohe-draw-slider::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 99px !important;
}
.mohe-draw-workspace .mohe-draw-slider::-moz-range-track {
    width: 100% !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 99px !important;
}

/* Thumb styling */
.mohe-draw-workspace .mohe-draw-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #00f0ff !important;
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.6) !important;
    margin-top: -5px !important; /* Centers the thumb: (4px track - 14px thumb)/2 = -5px */
    transition: transform 0.1s !important;
    cursor: pointer !important;
}
.mohe-draw-workspace .mohe-draw-slider::-moz-range-thumb {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #00f0ff !important;
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.6) !important;
    border: none !important;
    transition: transform 0.1s !important;
    cursor: pointer !important;
}

.mohe-draw-workspace .mohe-draw-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2) !important;
}
.mohe-draw-workspace .mohe-draw-slider::-moz-range-thumb:hover {
    transform: scale(1.2) !important;
}


/* Mode Selection button */
.mohe-draw-workspace .mohe-draw-mode-btn {
    background: rgba(4, 5, 8, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 8px !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: bold !important;
    padding: 8px 0 !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
}
.mohe-draw-workspace .mohe-draw-mode-btn:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.mohe-draw-workspace .mohe-draw-mode-btn.active {
    background: #00f0ff !important;
    color: #0b0e14 !important;
    border-color: #00f0ff !important;
    font-weight: bold !important;
}

/* Advanced drop button */
.mohe-draw-workspace .mohe-draw-advanced-toggle {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    color: #a0aec0 !important;
    font-size: 11px !important;
    font-weight: bold !important;
    padding: 10px 0 !important;
    cursor: pointer !important;
    width: 100% !important;
    text-align: center !important;
    transition: all 0.2s !important;
}
.mohe-draw-workspace .mohe-draw-advanced-toggle:hover {
    color: #ffffff !important;
    border-color: rgba(0, 240, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}


/* Center Canvas elements */
.mohe-draw-workspace .mohe-draw-canvas-container {
    background: #020305 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    min-height: 400px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Canvas variation controls */
.mohe-draw-workspace .mohe-draw-canvas-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
}

.mohe-draw-workspace .mohe-draw-action-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mohe-draw-workspace .row-label {
    font-size: 10px !important;
    color: #94a3b8 !important;
    font-weight: bold !important;
    min-width: 65px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

.mohe-draw-workspace .row-buttons {
    display: flex;
    gap: 6px;
}

.mohe-draw-workspace .mohe-draw-control-btn {
    background: rgba(4, 5, 8, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 8px !important;
    color: #8a99ad !important;
    font-size: 11px !important;
    padding: 6px 14px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
}
.mohe-draw-workspace .mohe-draw-control-btn:hover {
    border-color: rgba(0, 240, 255, 0.3) !important;
    color: #f1f5f9 !important;
    background: rgba(4, 5, 8, 0.9) !important;
    transform: translateY(-1px) !important;
}
.mohe-draw-workspace .mohe-draw-control-btn.active {
    border-color: #00f0ff !important;
    color: #ffffff !important;
    background: rgba(0, 240, 255, 0.05) !important;
    box-shadow: 0 4px 15px rgba(0, 240, 255, 0.1), inset 0 0 8px rgba(0, 240, 255, 0.02) !important;
}
.mohe-draw-workspace .mohe-draw-control-btn.btn-highlight {
    background: rgba(0, 240, 255, 0.08) !important;
    border-color: rgba(0, 240, 255, 0.35) !important;
    color: #00f0ff !important;
}
.mohe-draw-workspace .mohe-draw-control-btn.btn-highlight:hover {
    background: rgba(0, 240, 255, 0.15) !important;
    border-color: rgba(0, 240, 255, 0.5) !important;
    transform: translateY(-1px) !important;
}

.mohe-draw-workspace .mohe-draw-icon-btn {
    background: rgba(4, 5, 8, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
}
.mohe-draw-workspace .mohe-draw-icon-btn:hover {
    border-color: rgba(0, 240, 255, 0.3) !important;
    background: rgba(4, 5, 8, 0.9) !important;
    transform: translateY(-1px) !important;
}

/* History Prompt Detail Card */
.mohe-draw-workspace .mohe-draw-history-card {
    background: rgba(14, 17, 30, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}
.mohe-draw-workspace .mohe-draw-history-card .mode-badge {
    background: rgba(0, 240, 255, 0.05) !important;
    border: 1px solid rgba(0, 240, 255, 0.15) !important;
    color: #00f0ff !important;
}

/* Monospace prompt container mimicking workbench console */
.mohe-draw-workspace .mohe-draw-history-prompt-container {
    position: relative !important;
    background: #020305 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.8) !important;
    overflow: hidden !important;
}
.mohe-draw-workspace .mohe-draw-history-prompt-container p {
    color: #00ffa2 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding-right: 28px !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
}

/* Right History strip list */
.mohe-draw-workspace .mohe-draw-gallery-strip {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.mohe-draw-workspace .gallery-thumbnail {
    width: 76px;
    height: 76px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    background: #000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.mohe-draw-workspace .gallery-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.mohe-draw-workspace .gallery-thumbnail:hover img {
    opacity: 1;
}
.mohe-draw-workspace .gallery-thumbnail:hover {
    transform: scale(1.05);
}
.mohe-draw-workspace .gallery-thumbnail.active {
    border-color: #00f0ff;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}
.mohe-draw-workspace .gallery-thumbnail.active img {
    opacity: 1;
}

/* Responsive Overrides */
@media (max-width: 1024px) {
    .mohe-draw-workspace {
        height: auto !important;
        overflow: visible !important;
    }
    .mohe-draw-workspace .mohe-draw-layout {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        margin-top: 40px !important;
    }
    .mohe-draw-workspace .mohe-draw-left-col {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: none !important;
    }
    .mohe-draw-workspace .mohe-draw-center-col {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
    }
    .mohe-draw-workspace .mohe-draw-right-col {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        border-left: none !important;
        border-top: none !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        padding: 10px !important;
    }
    .mohe-draw-workspace .mohe-draw-gallery-strip {
        flex-direction: row !important;
        gap: 10px !important;
        width: auto !important;
    }
    .mohe-draw-workspace .mohe-draw-ratio-grid {
        grid-template-columns: repeat(7, 1fr) !important;
    }
}

@keyframes mohe-ping {
    75%, 100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Hide left card scrollbars for Webkit browsers */
.mohe-draw-workspace .mohe-draw-left-col::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}


/* Footer Divider style */
.mohe-draw-workspace .mohe-draw-footer-divider {
    display: none !important;
}

/* Header layout style for drawing page */
.mohe-draw-workspace .mohe-draw-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 32px !important;
    padding-bottom: 16px !important;
}
@media (min-width: 768px) {
    .mohe-draw-workspace .mohe-draw-header {
        padding-left: 32px !important;
        padding-right: 148px !important;
        padding-top: 32px !important;
        padding-bottom: 16px !important;
    }
}

/* ==========================================================================
   LensGlow 绘光 Color Scheme — Scoped to .mohe-draw-workspace
   Palette source: https://hg.mengege.us.ci/styles.css
   --accent:        #9d90f5 (lavender purple)
   --accent-dim:    #8c7cf0 (deep purple)
   --accent-orange: #e5a070 (warm orange)
   --bg-deep:       #14121c
   --bg-card:       #1e1c28
   --bg-surface:    #222030
   --text:          #edeaf8
   --text-secondary:#b5aed0
   --text-muted:    #7a738f
   --border:        #353148
   --success:       #7bc99a
   ========================================================================== */

/* --- Base Page Background & Glow Overrides --- */
body.mohe-draw-body {
    --accent: #9d90f5;
    --accent-dim: #8c7cf0;
    --accent-orange: #e5a070;
    --bg-deep: #14121c;
    --bg-card: #1e1c28;
    --bg-surface: #222030;
    --text: #edeaf8;
    --text-secondary: #b5aed0;
    --text-muted: #7a738f;
    --border: #353148;
    --success: #7bc99a;
}

body.mohe-draw-body {
    background-color: #14121c !important;
    background-image:
        radial-gradient(ellipse 70% 50% at 15% -10%, rgba(157, 144, 245, 0.18), transparent 55%),
        radial-gradient(ellipse 50% 40% at 90% 20%, rgba(229, 160, 112, 0.08), transparent 50%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(140, 124, 240, 0.06), transparent 55%),
        radial-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 32px 32px !important;
    background-attachment: fixed !important;
    font-family: "Noto Sans SC", "Segoe UI", system-ui, sans-serif !important;
    color: #edeaf8 !important;
}

body.mohe-draw-body #page,
body.mohe-draw-body .site,
body.mohe-draw-body #content,
body.mohe-draw-body .mohe-draw-workspace,
body.mohe-draw-body footer,
body.mohe-draw-body .footer,
body.mohe-draw-body .site-footer,
body.mohe-draw-body #footer,
body.mohe-draw-body .footer-layout,
body.mohe-draw-body .footer-wrap,
body.mohe-draw-body #colophon,
body.mohe-draw-body .container,
body.mohe-draw-body .wrap {
    background: transparent !important;
    background-image: none !important;
}

/* --- Scrollbar Theme --- */
.mohe-draw-workspace ::-webkit-scrollbar-thumb {
    background: #353148 !important;
}
.mohe-draw-workspace ::-webkit-scrollbar-thumb:hover {
    background: #9d90f5 !important;
}
.mohe-draw-workspace ::-webkit-scrollbar-track {
    background: #14121c !important;
}

/* --- Three-Column Card Containers --- */
.mohe-draw-workspace .mohe-draw-left-col {
    background: rgba(30, 28, 40, 0.75) !important;
    border: 1px solid rgba(53, 49, 72, 0.6) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
.mohe-draw-workspace .mohe-draw-center-col {
    background: rgba(30, 28, 40, 0.75) !important;
    border: 1px solid rgba(53, 49, 72, 0.6) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
.mohe-draw-workspace .mohe-draw-right-col {
    background: rgba(30, 28, 40, 0.75) !important;
    border: 1px solid rgba(53, 49, 72, 0.6) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

/* --- Inner Cards --- */
.mohe-draw-workspace .mohe-draw-card {
    background: rgba(34, 32, 48, 0.45) !important;
    border: 1px solid rgba(53, 49, 72, 0.4) !important;
    border-radius: 14px !important;
}

/* --- Labels --- */
.mohe-draw-workspace .mohe-draw-label {
    color: #edeaf8 !important;
}

/* --- Textarea Wrapper --- */
.mohe-draw-workspace .mohe-draw-textarea-wrapper {
    background: rgba(20, 18, 28, 0.95) !important;
    border: 1px solid rgba(53, 49, 72, 0.5) !important;
}
.mohe-draw-workspace .mohe-draw-textarea-wrapper:focus-within {
    border-color: rgba(157, 144, 245, 0.55) !important;
    box-shadow: 0 0 10px rgba(157, 144, 245, 0.15) !important;
}

/* --- Textarea --- */
.mohe-draw-workspace .mohe-draw-textarea {
    background: #14121c !important;
    border: 1px solid rgba(53, 49, 72, 0.5) !important;
}
.mohe-draw-workspace .mohe-draw-textarea:focus {
    border-color: rgba(157, 144, 245, 0.5) !important;
}

/* --- Small Buttons (pill buttons) --- */
.mohe-draw-workspace .mohe-draw-btn-sm-new {
    background: rgba(53, 49, 72, 0.3) !important;
    border: 1px solid rgba(53, 49, 72, 0.5) !important;
    color: #b5aed0 !important;
}
.mohe-draw-workspace .mohe-draw-btn-sm-new:hover {
    background: rgba(53, 49, 72, 0.55) !important;
    border-color: rgba(157, 144, 245, 0.35) !important;
    color: #edeaf8 !important;
}

/* --- Link Buttons --- */
.mohe-draw-workspace .mohe-draw-link-btn {
    color: #b5aed0 !important;
    background: rgba(53, 49, 72, 0.25) !important;
    border: 1px solid rgba(53, 49, 72, 0.4) !important;
}
.mohe-draw-workspace .mohe-draw-link-btn:hover {
    background: rgba(157, 144, 245, 0.1) !important;
    border-color: rgba(157, 144, 245, 0.35) !important;
    color: #9d90f5 !important;
}

/* --- Aspect Ratio Buttons --- */
/* --- Aspect Ratio Buttons Overrides (Inherited neutral grey palette matching screenshot 2) --- */
.mohe-draw-workspace .mohe-draw-ratio-btn {
    background: #1b1c21 !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
}
.mohe-draw-workspace .mohe-draw-ratio-btn .ratio-box {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}
.mohe-draw-workspace .mohe-draw-ratio-btn .ratio-text {
    color: #8c909c !important;
}
.mohe-draw-workspace .mohe-draw-ratio-btn:hover {
    background: #24262d !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.mohe-draw-workspace .mohe-draw-ratio-btn.active {
    background: #2b2d35 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
.mohe-draw-workspace .mohe-draw-ratio-btn.active .ratio-box {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}
.mohe-draw-workspace .mohe-draw-ratio-btn.active .ratio-text {
    color: #ffffff !important;
}

/* --- Model Card Selection --- */
.mohe-draw-workspace .mohe-draw-model-card {
    border: 1px solid rgba(53, 49, 72, 0.5) !important;
}
.mohe-draw-workspace .mohe-draw-model-card .overlay {
    background: rgba(20, 18, 28, 0.55) !important;
}
.mohe-draw-workspace .mohe-draw-model-card:hover {
    border-color: rgba(157, 144, 245, 0.4) !important;
}
.mohe-draw-workspace .mohe-draw-model-card:hover .overlay {
    background: rgba(20, 18, 28, 0.45) !important;
}
.mohe-draw-workspace .mohe-draw-model-card.active {
    border-color: #9d90f5 !important;
    box-shadow: 0 0 14px rgba(157, 144, 245, 0.35) !important;
}
.mohe-draw-workspace .mohe-draw-model-card.active .overlay {
    background: rgba(20, 18, 28, 0.4) !important;
}
.mohe-draw-workspace .mohe-draw-model-card .model-desc {
    color: #b5aed0 !important;
}

/* --- Model Style Grid Buttons --- */
.mohe-draw-workspace .mohe-draw-style-btn {
    background: rgba(20, 18, 28, 0.5) !important;
    border: 1px solid rgba(53, 49, 72, 0.35) !important;
}
.mohe-draw-workspace .mohe-draw-style-btn:hover {
    background: rgba(34, 32, 48, 0.6) !important;
    border-color: rgba(157, 144, 245, 0.25) !important;
}
.mohe-draw-workspace .mohe-draw-style-btn.active {
    border-color: #9d90f5 !important;
    background: rgba(157, 144, 245, 0.04) !important;
    box-shadow: 0 0 10px rgba(157, 144, 245, 0.12) !important;
}
.mohe-draw-workspace .mohe-draw-style-btn.active div {
    color: #9d90f5 !important;
}

/* --- Upload Box --- */
.mohe-draw-workspace .mohe-draw-upload-box {
    border: 1.5px dashed rgba(53, 49, 72, 0.6) !important;
    background: rgba(34, 32, 48, 0.2) !important;
}
.mohe-draw-workspace .mohe-draw-upload-box:hover {
    border-color: #9d90f5 !important;
    background: rgba(157, 144, 245, 0.03) !important;
}

/* --- Slider --- */
.mohe-draw-workspace .mohe-draw-slider {
    background: transparent !important;
}
.mohe-draw-workspace .mohe-draw-slider::-webkit-slider-runnable-track {
    background: rgba(53, 49, 72, 0.6) !important;
}
.mohe-draw-workspace .mohe-draw-slider::-moz-range-track {
    background: rgba(53, 49, 72, 0.6) !important;
}
.mohe-draw-workspace .mohe-draw-slider::-webkit-slider-thumb {
    background: #9d90f5 !important;
    box-shadow: 0 0 8px rgba(157, 144, 245, 0.6) !important;
}
.mohe-draw-workspace .mohe-draw-slider::-moz-range-thumb {
    background: #9d90f5 !important;
    box-shadow: 0 0 8px rgba(157, 144, 245, 0.6) !important;
}

/* --- Mode Buttons --- */
.mohe-draw-workspace .mohe-draw-mode-btn {
    background: rgba(20, 18, 28, 0.5) !important;
    border: 1px solid rgba(53, 49, 72, 0.35) !important;
    color: #7a738f !important;
}
.mohe-draw-workspace .mohe-draw-mode-btn:hover {
    background: rgba(53, 49, 72, 0.3) !important;
    color: #edeaf8 !important;
    border-color: rgba(53, 49, 72, 0.6) !important;
}
.mohe-draw-workspace .mohe-draw-mode-btn.active {
    background: linear-gradient(135deg, #9d90f5 0%, #8c7cf0 100%) !important;
    color: #14121c !important;
    border-color: #9d90f5 !important;
    font-weight: bold !important;
}

/* --- Advanced Toggle --- */
.mohe-draw-workspace .mohe-draw-advanced-toggle {
    background: rgba(34, 32, 48, 0.35) !important;
    border: 1px solid rgba(53, 49, 72, 0.4) !important;
    color: #b5aed0 !important;
}
.mohe-draw-workspace .mohe-draw-advanced-toggle:hover {
    color: #edeaf8 !important;
    border-color: rgba(157, 144, 245, 0.3) !important;
    background: rgba(34, 32, 48, 0.55) !important;
}

/* --- Primary Generate Button --- */
.mohe-draw-workspace #btn-start-draw,
.mohe-draw-workspace [class*="bg-gradient-glow"] {
    background: linear-gradient(135deg, #9d90f5 0%, #8c7cf0 100%) !important;
    box-shadow: 0 8px 28px rgba(157, 144, 245, 0.35) !important;
    color: #14121c !important;
}
.mohe-draw-workspace #btn-start-draw:hover,
.mohe-draw-workspace [class*="bg-gradient-glow"]:hover {
    box-shadow: 0 12px 36px rgba(157, 144, 245, 0.45) !important;
}

/* --- Login-to-Generate Fallback Button --- */
.mohe-draw-workspace a[data-translate="draw-btn-login-to-gen"] {
    background: rgba(30, 28, 40, 0.8) !important;
    border: 1px solid rgba(53, 49, 72, 0.5) !important;
    color: #b5aed0 !important;
}
.mohe-draw-workspace a[data-translate="draw-btn-login-to-gen"]:hover {
    background: rgba(34, 32, 48, 0.9) !important;
    color: #edeaf8 !important;
}

/* --- Center Canvas Container --- */
.mohe-draw-workspace .mohe-draw-canvas-container {
    background: #14121c !important;
    border: 1px solid rgba(53, 49, 72, 0.4) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    padding-top: 44px !important;
    padding-bottom: 180px !important; /* Reserve space for floating prompt card */
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* --- Control Buttons (Midjourney-style action grid) --- */
.mohe-draw-workspace .mohe-draw-control-btn {
    background: rgba(20, 18, 28, 0.7) !important;
    border: 1px solid rgba(53, 49, 72, 0.4) !important;
    color: #b5aed0 !important;
}
.mohe-draw-workspace .mohe-draw-control-btn:hover {
    border-color: rgba(157, 144, 245, 0.35) !important;
    color: #edeaf8 !important;
    background: rgba(20, 18, 28, 0.95) !important;
}
.mohe-draw-workspace .mohe-draw-control-btn.active {
    border-color: #9d90f5 !important;
    color: #edeaf8 !important;
    background: rgba(157, 144, 245, 0.06) !important;
    box-shadow: 0 4px 15px rgba(157, 144, 245, 0.12), inset 0 0 8px rgba(157, 144, 245, 0.03) !important;
}
.mohe-draw-workspace .mohe-draw-control-btn.btn-highlight {
    background: rgba(157, 144, 245, 0.1) !important;
    border-color: rgba(157, 144, 245, 0.4) !important;
    color: #9d90f5 !important;
}
.mohe-draw-workspace .mohe-draw-control-btn.btn-highlight:hover {
    background: rgba(157, 144, 245, 0.18) !important;
    border-color: rgba(157, 144, 245, 0.55) !important;
}

/* --- Icon Buttons (Download, Copy, Clear) --- */
.mohe-draw-workspace .mohe-draw-icon-btn {
    background: rgba(20, 18, 28, 0.7) !important;
    border: 1px solid rgba(53, 49, 72, 0.4) !important;
}
.mohe-draw-workspace .mohe-draw-icon-btn:hover {
    border-color: rgba(157, 144, 245, 0.35) !important;
    background: rgba(20, 18, 28, 0.95) !important;
}

/* --- Row Label (Monospace chips) --- */
.mohe-draw-workspace .row-label {
    color: #7a738f !important;
    background: rgba(34, 32, 48, 0.4) !important;
    border: 1px solid rgba(53, 49, 72, 0.35) !important;
}

/* --- History Card --- */
.mohe-draw-workspace .mohe-draw-history-card {
    background: rgba(30, 28, 40, 0.75) !important;
    border: 1px solid rgba(53, 49, 72, 0.5) !important;
}
.mohe-draw-workspace .mohe-draw-history-card .mode-badge {
    background: rgba(157, 144, 245, 0.08) !important;
    border: 1px solid rgba(157, 144, 245, 0.2) !important;
    color: #9d90f5 !important;
}

/* --- History Prompt Container --- */
.mohe-draw-workspace .mohe-draw-history-prompt-container {
    background: #14121c !important;
    border: 1px solid rgba(53, 49, 72, 0.4) !important;
}
.mohe-draw-workspace .mohe-draw-history-prompt-container p {
    color: #7bc99a !important;
}

/* --- Gallery Thumbnails (Right Column) --- */
.mohe-draw-workspace .gallery-thumbnail {
    background: #1e1c28 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
}
.mohe-draw-workspace .gallery-thumbnail.active {
    border-color: #9d90f5 !important;
    box-shadow: 0 0 12px rgba(157, 144, 245, 0.4) !important;
}

/* --- Status Node (ENGINE NODE: ONLINE) --- */
.mohe-draw-workspace .mohe-status-node {
    background: rgba(20, 18, 28, 0.85) !important;
    border: 1px solid rgba(53, 49, 72, 0.45) !important;
    color: #7a738f !important;
}
.mohe-draw-workspace .mohe-status-dot-ping {
    background-color: #7bc99a !important;
}
.mohe-draw-workspace .mohe-status-dot-core {
    background-color: #7bc99a !important;
}

/* --- Avatar Breath Animation (override cyan → purple) --- */
.mohe-draw-workspace .avatar-breath-rotate {
    border-color: rgba(157, 144, 245, 0.45) !important;
    animation: lensGlowAvatarBreath 3s infinite ease-in-out !important;
}
@keyframes lensGlowAvatarBreath {
    0%, 100% {
        box-shadow: 0 0 4px rgba(157, 144, 245, 0.4), 0 0 10px rgba(140, 124, 240, 0.3);
        border-color: rgba(157, 144, 245, 0.45);
    }
    50% {
        box-shadow: 0 0 12px rgba(157, 144, 245, 0.8), 0 0 20px rgba(140, 124, 240, 0.6);
        border-color: rgba(157, 144, 245, 0.9);
    }
}

/* --- Language Switcher Pill (override cyan → purple) --- */
.mohe-draw-workspace #btn-lang-zh {
    background: linear-gradient(135deg, #9d90f5, #8c7cf0) !important;
    color: #14121c !important;
}

/* --- Credits Pill (override cyan → purple) --- */
.mohe-draw-workspace #mohe-credits-display {
    color: #9d90f5 !important;
}
.mohe-draw-workspace a[onclick*="openRechargeModal"] {
    color: #9d90f5 !important;
}

/* --- Recharge Modal (scoped to drawing page) --- */
.mohe-draw-workspace #recharge-modal .studio-glass,
.mohe-draw-workspace #recharge-modal > div:nth-child(2) {
    background: rgba(20, 18, 28, 0.96) !important;
    border: 1px solid rgba(53, 49, 72, 0.5) !important;
}
.mohe-draw-workspace #recharge-modal .btn-studio-option {
    background: rgba(20, 18, 28, 0.6) !important;
    border: 1px solid rgba(53, 49, 72, 0.35) !important;
    color: #b5aed0 !important;
}
.mohe-draw-workspace #recharge-modal .btn-studio-option:hover {
    border-color: rgba(157, 144, 245, 0.3) !important;
    color: #edeaf8 !important;
    background: rgba(34, 32, 48, 0.6) !important;
}
.mohe-draw-workspace #recharge-modal .accent-studioCyan,
.mohe-draw-workspace #recharge-modal input[type="radio"]:checked {
    accent-color: #9d90f5 !important;
}

/* --- Footer Divider Override for LensGlow --- */
.mohe-draw-workspace .mohe-draw-footer-divider {
    border-top-color: rgba(53, 49, 72, 0.5) !important;
}

/* --- Tailwind Utility Color Overrides (scoped) --- */

/* Override text-studioCyan to purple */
.mohe-draw-workspace .text-studioCyan {
    color: #9d90f5 !important;
}

/* Override text-textSoft to LensGlow secondary */
.mohe-draw-workspace .text-textSoft {
    color: #b5aed0 !important;
}

/* Override bg-studioCard to LensGlow card bg */
.mohe-draw-workspace .bg-studioCard,
.mohe-draw-workspace [class*="bg-studioCard"] {
    background-color: #1e1c28 !important;
}

/* Override border-white/10 to LensGlow border */
.mohe-draw-workspace .border-white\/10 {
    border-color: rgba(53, 49, 72, 0.5) !important;
}

/* Override shadow-cyan to shadow-purple */
.mohe-draw-workspace [class*="shadow-cyan"] {
    --tw-shadow-color: rgba(157, 144, 245, 0.1) !important;
}

/* Override the gradient text in buttons */
.mohe-draw-workspace .bg-gradient-glow {
    background: linear-gradient(135deg, #9d90f5 0%, #8c7cf0 100%) !important;
}

/* Override btn-studio-active to purple */
.mohe-draw-workspace .btn-studio-active {
    border-color: #9d90f5 !important;
    box-shadow: 0 4px 15px rgba(157, 144, 245, 0.2), inset 0 0 8px rgba(157, 144, 245, 0.04) !important;
}

/* --- Console Status Bar text adjustments --- */
.mohe-draw-workspace .bg-emerald-500,
.mohe-draw-workspace [class*="bg-emerald"] {
    background-color: #7bc99a !important;
}
.mohe-draw-workspace [class*="shadow-\\[0_0_8px_#10b981\\]"] {
    box-shadow: 0 0 8px #7bc99a !important;
}

/* --- Extra LensGlow Utility Overrides --- */
.mohe-draw-workspace .bg-studioCyan,
.mohe-draw-workspace [class*="bg-studioCyan"] {
    background-color: #9d90f5 !important;
    background-image: none !important;
    color: #14121c !important;
}
.mohe-draw-workspace .bg-studioCyan\/10 {
    background-color: rgba(157, 144, 245, 0.1) !important;
}
.mohe-draw-workspace .bg-studioCyan\/20 {
    background-color: rgba(157, 144, 245, 0.2) !important;
}
.mohe-draw-workspace .border-studioCyan,
.mohe-draw-workspace [class*="border-studioCyan"] {
    border-color: rgba(157, 144, 245, 0.4) !important;
}

/* Header nav active states */
.mohe-draw-workspace .mohe-top-nav a.text-studioCyan {
    color: #9d90f5 !important;
}
.mohe-draw-workspace .mohe-top-nav a:not(.text-studioCyan):hover {
    color: #edeaf8 !important;
}

/* Styling for Backend Transit Model Selector */
.mohe-draw-workspace .mohe-draw-select-wrapper {
    position: relative !important;
    width: 100% !important;
    display: block !important;
}

.mohe-draw-workspace .mohe-draw-select-wrapper::after {
    content: "▾" !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    font-size: 14px !important;
}

.mohe-draw-workspace .mohe-draw-select {
    width: 100% !important;
    background: rgba(30, 27, 46, 0.9) !important;
    border: 1px solid rgba(157, 144, 245, 0.5) !important;
    border-radius: 12px !important;
    padding: 10px 32px 10px 14px !important;
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    outline: none !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mohe-draw-workspace .mohe-draw-select:hover {
    border-color: rgba(157, 144, 245, 0.7) !important;
}

.mohe-draw-workspace .mohe-draw-select:focus {
    border-color: rgba(157, 144, 245, 0.85) !important;
    box-shadow: 0 0 12px rgba(157, 144, 245, 0.25) !important;
}

.mohe-draw-workspace .mohe-draw-select option {
    background-color: #1e1b2e !important;
    color: #ffffff !important;
    padding: 10px !important;
}

/* Make placeholder text in drawing canvas clear and legible */
.mohe-draw-workspace #draw-placeholder {
    color: #edeaf8 !important;
}
.mohe-draw-workspace #draw-placeholder [data-translate="draw-canvas-title"] {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}
.mohe-draw-workspace #draw-placeholder [data-translate="draw-canvas-desc"] {
    color: #b5aed0 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    opacity: 0.9 !important;
    max-width: 320px !important;
}
.mohe-draw-workspace .mohe-draw-canvas-container span.font-mono {
    color: #9d90f5 !important;
    opacity: 0.95 !important;
}

/* Floating overlay at the bottom of the canvas */
.mohe-draw-workspace .mohe-draw-canvas-overlay-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent;
    pointer-events: none;
}
.mohe-draw-workspace .mohe-draw-canvas-overlay-bottom > * {
    pointer-events: auto;
}

/* Borderless card for prompt input floating over the canvas background */
.mohe-draw-workspace .mohe-draw-prompt-card-borderless {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Midjourney Advanced Parameters Styles */
.mohe-draw-workspace #mohe-mj-advanced-settings:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.mohe-draw-workspace .mohe-toggle-switch {
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    width: 36px !important;
    height: 20px !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}
.mohe-draw-workspace .mohe-toggle-switch input[type="checkbox"] {
    display: none !important;
}
.mohe-draw-workspace .mohe-toggle-switch .slider-toggle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #353148 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 99px !important;
    position: absolute !important;
    inset: 0 !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}
.mohe-draw-workspace .mohe-toggle-switch .slider-toggle::before {
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 2px !important;
    top: 2px !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background-color: #edeaf8 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}
.mohe-draw-workspace .mohe-toggle-switch input:checked + .slider-toggle {
    background-color: #9d90f5 !important;
}
.mohe-draw-workspace .mohe-toggle-switch input:checked + .slider-toggle::before {
    transform: translateX(16px) !important;
    background-color: #14121c !important;
}

.mohe-draw-workspace .mohe-draw-input-text:focus {
    border-color: rgba(157, 144, 245, 0.6) !important;
    box-shadow: 0 0 8px rgba(157, 144, 245, 0.2) !important;
}

/* Custom Row Card Layout to avoid flex-direction: column overrides */
.mohe-draw-workspace .mohe-draw-card-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(34, 32, 48, 0.45) !important;
    border: 1px solid rgba(53, 49, 72, 0.4) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    min-height: 48px !important;
}

/* Ensure all sliders (inside or outside rows) render correctly */
.mohe-draw-workspace .mohe-draw-slider {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 20px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}

/* Webkit Track */
.mohe-draw-workspace .mohe-draw-slider::-webkit-slider-runnable-track {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 4px !important;
    background: rgba(157, 144, 245, 0.25) !important;
    border-radius: 99px !important;
    border: none !important;
}
/* Firefox Track */
.mohe-draw-workspace .mohe-draw-slider::-moz-range-track {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 4px !important;
    background: rgba(157, 144, 245, 0.25) !important;
    border-radius: 99px !important;
    border: none !important;
}

/* Webkit Thumb */
.mohe-draw-workspace .mohe-draw-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #9d90f5 !important;
    box-shadow: 0 0 8px rgba(157, 144, 245, 0.8) !important;
    margin-top: -5px !important; /* (4px track - 14px thumb)/2 = -5px */
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.1s ease !important;
}
.mohe-draw-workspace .mohe-draw-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2) !important;
    background: #edeaf8 !important;
}

/* Firefox Thumb */
.mohe-draw-workspace .mohe-draw-slider::-moz-range-thumb {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #9d90f5 !important;
    box-shadow: 0 0 8px rgba(157, 144, 245, 0.8) !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.1s ease !important;
}
.mohe-draw-workspace .mohe-draw-slider::-moz-range-thumb:hover {
    transform: scale(1.2) !important;
    background: #edeaf8 !important;
}

/* Horizontal card row sliders layout adjustments */
.mohe-draw-workspace .mohe-draw-card-row .mohe-draw-slider {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    flex-basis: auto !important;
    width: auto !important;
    min-width: 80px !important;
    max-width: 180px !important;
    margin: 0 12px !important;
}

.mohe-draw-workspace .mohe-draw-style-pill {
    background: #1b1c21 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 9999px !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #8c909c !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mohe-draw-workspace .mohe-draw-style-pill:hover {
    background: #24262d !important;
    color: #ffffff !important;
}

.mohe-draw-workspace .mohe-draw-style-pill.active {
    background: rgba(43, 76, 219, 0.15) !important;
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
    font-weight: 600 !important;
}

/* Hide placeholder when prompt textarea is focused */
.mohe-draw-workspace #draw-prompt:focus::placeholder {
    color: transparent !important;
}

/* --- 参照万物 Collapsible Combined Card & Sub-sections --- */
.mohe-draw-workspace .mohe-draw-ref-all-card {
    padding: 12px 14px !important;
}

.mohe-draw-workspace #mohe-ref-all-settings {
    margin-top: 10px !important;
}

.mohe-draw-workspace #mohe-ref-all-settings:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.mohe-draw-workspace .mohe-draw-ref-sub-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    border-bottom: 1px dashed rgba(53, 49, 72, 0.4) !important;
    padding-bottom: 10px !important;
    margin-bottom: 4px !important;
}

.mohe-draw-workspace .mohe-draw-ref-sub-section:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Make upload boxes width match parameter rows below them (100% width) and 76px height */
.mohe-draw-workspace .mohe-draw-ref-sub-section .mohe-draw-upload-box {
    width: 100% !important;
    height: 76px !important;
}

/* Reduce height and padding of option rows below upload boxes */
.mohe-draw-workspace .mohe-draw-ref-sub-section .mohe-draw-card-row {
    padding: 6px 10px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
}

/* Adjust sliders inside compact rows */
.mohe-draw-workspace .mohe-draw-ref-sub-section .mohe-draw-card-row .mohe-draw-slider {
    height: 16px !important;
}
.mohe-draw-workspace .mohe-draw-ref-sub-section .mohe-draw-card-row .mohe-draw-slider::-webkit-slider-thumb {
    width: 10px !important;
    height: 10px !important;
    margin-top: -3px !important; /* (4px track - 10px thumb)/2 = -3px */
}
.mohe-draw-workspace .mohe-draw-ref-sub-section .mohe-draw-card-row .mohe-draw-slider::-moz-range-thumb {
    width: 10px !important;
    height: 10px !important;
}

/* Style code input wrapper height reduction */
.mohe-draw-workspace .mohe-draw-ref-sub-section .mohe-draw-card-row .flex.items-center {
    height: 22px !important;
    margin-left: 8px !important;
}

/* --- Active Parameter Pills --- */
.mohe-draw-workspace #mohe-draw-active-params {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px 12px 8px 12px !important;
    margin-top: 25px !important;
    background: transparent !important;
    border: none !important;
}

.mohe-draw-workspace .mohe-draw-param-pill {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(157, 144, 245, 0.15) !important;
    border: 1px solid rgba(157, 144, 245, 0.6) !important;
    border-radius: 99px !important;
    padding: 3px 10px !important;
    font-family: monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New" !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
}

/* --- Online Drawing Button Gradient & Hover Flow Animation --- */
@keyframes btn-gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.btn-draw-gradient-glow {
    background: linear-gradient(135deg, #7c3aed 0%, #db2777 33%, #00f0ff 66%, #7c3aed 100%) !important;
    background-size: 300% 300% !important;
    background-position: 0% 50% !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    transition: all 0.4s ease !important;
}
.btn-draw-gradient-glow:hover {
    animation: btn-gradient-flow 3s ease infinite !important;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4), 0 0 40px rgba(219, 39, 119, 0.3) !important;
    transform: translateY(-2px) !important;
    opacity: 0.95 !important;
}


/* Ensure drawing page header matches 1600px width limit */
.mohe-draw-header {
    max-width: 1600px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}