.sns-card-container{max-width:1400px;min-height:100vh;margin:0 auto;padding:20px}.sns-card-header{text-align:center;background-color:#0000;border-bottom:none;height:auto;margin-bottom:30px;padding-left:0;display:block;position:static}.sns-card-header h1{color:#000;margin-bottom:10px;font-size:2.5rem}.sns-card-header p{opacity:.7;color:#666;font-size:1.1rem}.sns-card-main{background:#fff;border:1px solid #e0e0e0;border-radius:20px;padding:30px;box-shadow:0 2px 10px #0000001a}.sns-card-editor{grid-template-columns:1fr 450px;align-items:start;gap:30px;display:grid}.preview-section,.controls-section{flex-direction:column;display:flex}.preview-section{position:sticky;top:20px}.preview-section h2,.controls-section h2{color:#333;margin-bottom:20px;font-size:1.5rem}.section-divider{border:none;border-top:2px solid #e0e0e0;margin:30px 0 20px}.section-title{color:#555;align-items:center;gap:8px;margin-bottom:15px;font-size:1.2rem;font-weight:700;display:flex}#canvas{border:2px solid #e0e0e0;border-radius:10px;width:100%;max-width:100%;height:auto;box-shadow:0 4px 12px #0000001a}.controls-section{max-width:100%}.control-group{margin-bottom:20px}.control-group label{color:#555;margin-bottom:8px;font-weight:600;display:block}.control-group input[type=text],.control-group textarea,.control-group select,.control-group input[type=file]{border:2px solid #e0e0e0;border-radius:8px;width:100%;padding:10px;font-size:1rem;transition:border-color .3s}.control-group input[type=file]{cursor:pointer;padding:8px}.control-group input[type=file]::-webkit-file-upload-button{color:#fff;cursor:pointer;background:#667eea;border:none;border-radius:6px;margin-right:10px;padding:8px 16px}.control-group input[type=file]::-webkit-file-upload-button:hover{background:#5568d3}.control-group textarea{resize:vertical;min-height:80px;max-height:200px;font-family:inherit;overflow-y:auto}.control-group input[type=text]:focus,.control-group textarea:focus,.control-group select:focus,.control-group input[type=file]:focus{border-color:#667eea;outline:none}.char-count{text-align:right;color:#999;margin-top:5px;font-size:.9rem;display:block}.color-picker-wrapper{flex-direction:column;gap:10px;display:flex}.control-group input[type=color]{cursor:pointer;border:2px solid #e0e0e0;border-radius:8px;width:100%;height:50px}.brand-colors{grid-template-columns:repeat(7,1fr);gap:8px;display:grid}.color-btn{aspect-ratio:1;cursor:pointer;border:2px solid #e0e0e0;border-radius:6px;width:100%;transition:all .2s;position:relative}.color-btn:hover{border-color:#667eea;transform:scale(1.1);box-shadow:0 2px 8px #00000026}.color-btn:active{transform:scale(.95)}.control-group input[type=range]{cursor:pointer;-webkit-appearance:none;background:#e0e0e0;border-radius:5px;outline:none;width:100%;height:8px}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#667eea;border-radius:50%;width:20px;height:20px}.control-group input[type=range]::-moz-range-thumb{cursor:pointer;background:#667eea;border:none;border-radius:50%;width:20px;height:20px}.preset-buttons{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.preset-btn{cursor:pointer;background:#fff;border:2px solid #e0e0e0;border-radius:8px;padding:12px;font-size:.95rem;transition:all .3s}.preset-btn:hover{border-color:#667eea;transform:translateY(-2px)}.preset-btn.active{color:#fff;background:#667eea;border-color:#667eea}.action-buttons{gap:10px;margin-top:30px;display:flex}.primary-btn,.secondary-btn{color:#fff;cursor:pointer;border:none;border-radius:10px;flex:1;padding:15px 30px;font-size:1.1rem;font-weight:600;transition:transform .2s,box-shadow .2s}.primary-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.secondary-btn{background:#6b6b6b;margin-top:10px;padding:10px 20px;font-size:.95rem}.primary-btn:hover,.secondary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.secondary-btn:hover{background:#555}.primary-btn:active,.secondary-btn:active{transform:translateY(0)}@media (max-width:1024px){.sns-card-editor{grid-template-columns:1fr}.preview-section{align-items:center;position:static}#canvas{max-width:500px}}@media (max-width:768px){.sns-card-header h1{font-size:1.8rem}.sns-card-main{padding:20px}}