.md-designer-container{max-width:1600px;margin:20px auto;padding:15px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}.md-designer-wrapper{display:flex;gap:20px;flex-wrap:wrap;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);padding:20px;border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,.2)}.md-preview-section{flex:2;min-width:300px;background:#fff;padding:15px;border-radius:15px;box-shadow:inset 0 2px 10px rgba(0,0,0,.1)}.md-preview-container{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,.2);background:#f0f0f0;width:100%;height:auto}.md-preview-container img{width:100%;height:100%;object-fit:contain;display:block}.md-canvas-controls{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.md-control-btn{flex:1 1 auto;min-width:70px;padding:10px 12px;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:white;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:700;transition:all .3s ease}.md-control-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.3)}.md-controls-section{flex:1;min-width:280px;background:#fff;padding:20px;border-radius:15px;box-shadow:0 10px 25px rgba(0,0,0,.15);max-height:800px;overflow-y:auto}.md-controls-title{margin:0 0 15px;color:var(--dark);font-size:clamp(20px,5vw,28px);font-weight:600;text-align:center;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.md-tabs{display:flex;gap:5px;margin-bottom:20px;background:#f0f0f0;padding:5px;border-radius:40px;flex-wrap:wrap}.md-tab{flex:1 1 auto;padding:10px 8px;border:none;background:0 0;cursor:pointer;font-size:clamp(12px,3vw,16px);font-weight:600;color:#666;border-radius:30px;transition:all .3s ease;white-space:nowrap}.md-tab.active{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:white}.md-tab-content{display:none;animation:slideIn .3s ease}.md-tab-content.active{display:block}.md-upload-area{border:3px dashed var(--primary);border-radius:15px;padding:20px;text-align:center;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);cursor:pointer;transition:all .3s ease;margin-bottom:15px}.md-upload-area:hover{transform:scale(1.02);border-color:var(--secondary)}.md-upload-icon{font-size:clamp(36px,8vw,48px);margin-bottom:8px}.md-upload-hint{font-size:clamp(10px,2.5vw,12px);color:#666}.md-design-list,.md-text-list{background:#f8f9fa;border-radius:12px;padding:12px;margin-bottom:15px;max-height:120px;overflow-y:auto}.md-items-container{display:flex;flex-direction:column;gap:6px}.md-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:#fff;border-radius:6px;cursor:pointer;transition:all .2s ease;border:2px solid transparent;font-size:clamp(12px,2.5vw,14px)}.md-item:hover{background:#e3f2fd}.md-item.selected{border-color:var(--primary);background:#e3f2fd}.md-item-preview{width:25px;height:25px;object-fit:cover;border-radius:4px}.md-control-group{background:#f8f9fa;padding:12px;border-radius:12px;margin-bottom:12px}.md-control-group label{display:block;margin-bottom:6px;font-weight:600;color:#555;font-size:clamp(12px,2.5vw,14px)}.md-slider{width:100%;height:6px;border-radius:3px;background:linear-gradient(to right,var(--primary),var(--secondary));outline:none;-webkit-appearance:none;margin-bottom:4px}.md-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--primary);cursor:pointer;transition:all .2s ease}.md-slider::-webkit-slider-thumb:hover{transform:scale(1.2);background:var(--primary)}.md-value{display:inline-block;padding:2px 6px;background:#fff;border-radius:4px;font-size:11px;font-weight:700;color:var(--primary)}.md-button-group{display:flex;gap:5px;flex-wrap:wrap}.md-small-btn{flex:1 1 auto;min-width:50px;padding:6px 8px;background:#fff;border:2px solid var(--primary);border-radius:6px;color:var(--primary);font-weight:700;font-size:clamp(10px,2.5vw,12px);cursor:pointer;transition:all .2s ease}.md-small-btn:hover{background:var(--primary);color:white}.md-style-btn{flex:1 1 auto;min-width:35px;height:35px;background:#fff;border:2px solid var(--primary);border-radius:6px;color:var(--primary);font-size:clamp(12px,3vw,14px);cursor:pointer;transition:all .2s ease}.md-style-btn:hover,.md-style-btn.active{background:var(--primary);color:white}.md-color-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.md-action-btn{width:100%;padding:12px;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:white;border:none;border-radius:8px;font-size:clamp(14px,3.5vw,16px);font-weight:700;cursor:pointer;transition:all .3s ease;margin-bottom:12px}.md-action-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(102,126,234,.4)}.md-delete-btn{width:100%;padding:10px;background:linear-gradient(135deg,var(--danger) 0%,#f093fb 100%);color:white;border:none;border-radius:8px;font-size:clamp(12px,3vw,14px);font-weight:700;cursor:pointer;transition:all .3s ease}.md-delete-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(245,87,108,.4)}.md-elements-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;padding:10px;margin-bottom:15px}.md-element-item{background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);padding:15px 5px;border-radius:10px;text-align:center;cursor:pointer;transition:all .3s ease;font-size:clamp(12px,3vw,14px);border:2px solid transparent}.md-element-item:hover{transform:scale(1.05);border-color:var(--primary)}.md-download-btn{width:100%;padding:15px;background:linear-gradient(135deg,var(--accent) 0%,#38ef7d 100%);color:white;border:none;border-radius:12px;font-size:clamp(16px,4vw,20px);font-weight:700;cursor:pointer;transition:all .3s ease;margin-top:15px}.md-download-btn:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(17,153,142,.4)}.md-instructions{background:#fff;padding:20px;border-radius:15px;margin-top:20px;box-shadow:0 5px 15px rgba(0,0,0,.1)}.md-instructions h3{margin:0 0 12px;color:var(--dark);font-size:clamp(16px,4vw,20px)}.md-instructions ul{margin:0;padding-left:20px;columns:1}.md-instructions li{margin-bottom:8px;color:#555;font-size:clamp(12px,2.8vw,14px)}@media (min-width:769px) and (max-width:1024px){.md-designer-wrapper{gap:15px;padding:15px}.md-preview-section{min-width:350px}.md-controls-section{min-width:300px}.md-instructions ul{columns:2}}@media (max-width:768px){.md-designer-wrapper{flex-direction:column;padding:12px;gap:15px}.md-preview-section{min-width:100%;padding:10px}.md-controls-section{min-width:100%;padding:15px;max-height:none}.md-canvas-controls{flex-wrap:wrap}.md-control-btn{flex:1 1 calc(50% - 4px);min-width:0}.md-tabs{flex-wrap:nowrap;overflow-x:auto;padding:5px 2px}.md-tab{white-space:nowrap;padding:8px 12px}.md-elements-grid{grid-template-columns:repeat(3,1fr)}.md-instructions ul{columns:1}}@media (max-width:480px){.md-designer-container{padding:8px;margin:10px auto}.md-designer-wrapper{padding:10px}.md-preview-section{padding:8px}.md-controls-section{padding:12px}.md-button-group{gap:3px}.md-small-btn{padding:5px;font-size:10px}.md-style-btn{min-width:30px;height:30px}.md-elements-grid{grid-template-columns:repeat(2,1fr);gap:5px}.md-element-item{padding:10px 3px}.md-control-group{padding:8px}}