.dcd-panel{width: 100%;margin: 0 auto 2rem;}
.dcd-drop{min-height: 200px;padding: 1.5rem 1rem;border: 2px dashed var(--border,#e2e8f0);border-radius: 16px;cursor: pointer;transition: border-color .2s,background .2s;-webkit-tap-highlight-color: transparent;display: flex;align-items: center;justify-content: center;background: var(--surface-muted,#f8fafc);}
.dcd-drop:hover,.dcd-drop:focus-visible{border-color: var(--primary,#0ea5e9);outline: none;background: rgba(14,165,233,.04);}
.dcd-drop.dcd-dragover{border-color: var(--primary,#0ea5e9);background: rgba(14,165,233,.08);}
.dcd-file-input{position: absolute;width: 0;height: 0;opacity: 0;pointer-events: none;}
.dcd-drop-inner{display: flex;flex-direction: column;align-items: center;text-align: center;max-width: 280px;}
.dcd-drop-icon{width: 56px;height: 56px;margin-bottom: 0.75rem;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E") no-repeat center;background-size: 100%;}
.dcd-drop:hover .dcd-drop-icon,.dcd-drop:focus-visible .dcd-drop-icon{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");}
.dcd-drop-title{font-size: 1rem;font-weight: 600;color: var(--text-main,#1e293b);margin: 0 0 0.25rem 0;}
.dcd-drop-hint{font-size: 0.8125rem;color: var(--text-muted,#64748b);margin: 0;}
.dcd-workspace{display: flex;flex-direction: column;gap: 1.25rem;padding: 1.25rem 0;}
.dcd-preview-wrap{background: var(--surface-muted,#f1f5f9);border: 1px solid var(--border,#e2e8f0);border-radius: 12px;overflow: hidden;display: flex;align-items: center;justify-content: center;min-height: 180px;}
.dcd-canvas{max-width: 100%;max-height: 400px;display: block;}
.dcd-opts{border: 1px solid var(--border,#e2e8f0);border-radius: 12px;overflow: hidden;background: var(--surface,#fff);}
.dcd-opts-summary{font-size: 0.9375rem;font-weight: 600;color: var(--text-main,#1e293b);padding: 0.875rem 1rem;cursor: pointer;list-style: none;-webkit-tap-highlight-color: transparent;}
.dcd-opts-summary::-webkit-details-marker{display: none;}
.dcd-opts-summary::after{content: '';display: inline-block;width: 12px;height: 12px;margin-left: 0.5rem;border-right: 2px solid var(--text-muted,#64748b);border-bottom: 2px solid var(--text-muted,#64748b);transform: rotate(45deg);vertical-align: 2px;}
details[open] .dcd-opts-summary::after{transform: rotate(-135deg);vertical-align: -2px;}
.dcd-opts-inner{display: grid;gap: 1rem;padding: 0 1rem 1rem;border-top: 1px solid var(--border,#e2e8f0);}
.dcd-field{display: flex;flex-direction: column;gap: 0.35rem;}
.dcd-label{font-size: 0.875rem;font-weight: 500;color: var(--text-main,#1e293b);}
.dcd-value{font-weight: 700;color: var(--primary,#0ea5e9);}
.dcd-range{width: 100%;height: 8px;accent-color: var(--primary,#0ea5e9);cursor: pointer;-webkit-appearance: none;appearance: none;background: var(--surface-muted,#f1f5f9);border-radius: 999px;}
.dcd-range::-webkit-slider-thumb{-webkit-appearance: none;width: 20px;height: 20px;border-radius: 50%;background: var(--primary,#0ea5e9);cursor: pointer;}
.dcd-range::-moz-range-thumb{width: 20px;height: 20px;border-radius: 50%;background: var(--primary,#0ea5e9);cursor: pointer;border: none;}
.dcd-algo{border: none;padding: 0;margin: 0;}
.dcd-legend{font-size: 0.875rem;font-weight: 500;color: var(--text-main,#1e293b);margin-bottom: 0.5rem;}
.dcd-radio{display: flex;align-items: center;gap: 0.5rem;font-size: 0.875rem;color: var(--text-main,#1e293b);cursor: pointer;}
.dcd-radio input{accent-color: var(--primary,#0ea5e9);}
.dcd-checks{display: flex;flex-wrap: wrap;gap: 0.75rem 1.25rem;}
.dcd-check{display: flex;align-items: center;gap: 0.5rem;font-size: 0.875rem;color: var(--text-main,#1e293b);cursor: pointer;}
.dcd-check input{accent-color: var(--primary,#0ea5e9);}
.dcd-actions{display: flex;flex-wrap: wrap;gap: 0.75rem;}
.dcd-btn{display: inline-flex;align-items: center;justify-content: center;min-height: 44px;padding: 0.6rem 1.25rem;font-size: 0.9375rem;font-weight: 600;border-radius: 12px;cursor: pointer;transition: background .2s,color .2s;-webkit-tap-highlight-color: transparent;border: none;}
.dcd-btn:focus-visible{outline: none;}
.dcd-btn-primary{background: var(--primary,#0ea5e9);color: #fff;}
.dcd-btn-primary:hover{background: var(--primary-dark,#0284c7);}
.dcd-btn-primary:focus-visible{box-shadow: 0 0 0 3px rgba(14,165,233,.35);}
.dcd-btn-outline{background: transparent;color: var(--text-main,#1e293b);border: 1px solid var(--border,#e2e8f0);}
.dcd-btn-outline:hover{background: var(--surface-muted,#f8fafc);}
.dcd-btn-ghost{background: transparent;color: var(--text-muted,#64748b);}
.dcd-btn-ghost:hover{color: var(--text-main,#1e293b);background: var(--surface-muted,#f8fafc);}
.dcd-progress{padding: 0.75rem 0;}
.dcd-progress-bar{height: 6px;background: var(--surface-muted,#f1f5f9);border-radius: 999px;overflow: hidden;}
.dcd-progress-fill{display: block;height: 100%;width: 0%;background: var(--primary,#0ea5e9);transition: width .2s;}
.dcd-progress-text{font-size: 0.8125rem;color: var(--text-muted,#64748b);margin: 0.5rem 0 0;}
.dcd-results,.dcd-chart-wrap,.dcd-stats-wrap{margin-top: 0.5rem;}
.dcd-results-title{font-size: 1.125rem;font-weight: 600;color: var(--text-main,#1e293b);margin: 0 0 0.75rem 0;}
.dcd-colors-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(160px,1fr));gap: 1rem;}
.dcd-color-card{background: var(--surface,#fff);border: 1px solid var(--border,#e2e8f0);border-radius: 12px;overflow: hidden;}
.dcd-color-swatch{height: 72px;display: flex;align-items: center;justify-content: center;font-size: 0.8125rem;font-weight: 600;color: #fff;text-shadow: 0 1px 2px rgba(0,0,0,.3);}
.dcd-color-pct{font-size: 1rem;font-weight: 700;color: var(--primary,#0ea5e9);padding: 0.5rem 0.75rem 0;}
.dcd-color-meta{font-size: 0.75rem;color: var(--text-muted,#64748b);padding: 0 0.75rem 0.5rem;}
.dcd-color-rows{display: flex;flex-direction: column;gap: 0.35rem;padding: 0.5rem 0.75rem 0.75rem;}
.dcd-color-row{display: flex;align-items: center;justify-content: space-between;gap: 0.5rem;font-size: 0.8125rem;}
.dcd-color-row-label{font-weight: 500;color: var(--text-muted,#64748b);}
.dcd-color-row-val{font-family: ui-monospace,monospace;background: var(--surface-muted,#f1f5f9);padding: 0.2rem 0.5rem;border-radius: 4px;}
.dcd-copy-btn{font-size: 0.75rem;padding: 0.25rem 0.5rem;border-radius: 6px;border: none;background: var(--primary,#0ea5e9);color: #fff;cursor: pointer;}
.dcd-copy-btn:hover{background: var(--primary-dark,#0284c7);}
.dcd-copy-btn.copied{background: #16a34a;}
.dcd-chart{max-width: 100%;height: auto;display: block;border-radius: 8px;}
.dcd-stats-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(120px,1fr));gap: 0.75rem;}
.dcd-stat-item{background: var(--surface-muted,#f8fafc);border-radius: 10px;padding: 0.75rem;text-align: center;}
.dcd-stat-num{font-size: 1.25rem;font-weight: 700;color: var(--primary,#0ea5e9);}
.dcd-stat-label{font-size: 0.75rem;color: var(--text-muted,#64748b);margin-top: 0.25rem;}
@media (min-width:768px){.dcd-drop{min-height: 240px;padding: 2rem;}.dcd-drop-inner{max-width: 320px;}.dcd-opts-inner{grid-template-columns: 1fr 1fr auto;align-items: start;}.dcd-actions{gap: 1rem;}.dcd-colors-grid{grid-template-columns: repeat(auto-fill,minmax(224px,1fr));}}