.container{
    max-width:1184px;
    margin:auto;
}

#icon-color{
	padding:0px !important;
}



#content{
    text-align:center;
    margin-bottom:30px;
}

#head{
    text-align:center;
    margin-bottom:40px;
    padding:40px 20px;
    background:linear-gradient(219deg,#FB0E76 0%,#910694 100%);
    border-radius:12px;
    color:#fff;
}

#head h1{
    font-size:45px !important;
    font-weight:700 !important;
    color:#fff !important;
    margin-bottom:10px;
}

.sub-title{
    font-size:1.1rem;
    opacity:.9;
    max-width:700px;
    margin:auto;
}

/* ======================
   CANVAS
====================== */

.canvas-section{
    background:#111;
    border:1px solid #2a2a2a;
    border-radius:10px;
    overflow:hidden;
}

#canvas-container{
    position:relative;
    height:300px;
    width:100%;
    background:#222;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

#bg-image-layer{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    z-index:0;
}

#preview-wrapper{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    width:95%;
    height:95%;
}

#middle-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    width:100%;
}

/* ======================
   TEXT OUTPUT
====================== */

#text-output{
    font-family:Impact, Haettenschweiler, sans-serif;
    font-size:72px;
    color:#fff;
    text-transform:uppercase;
    text-align:center;

    max-width:95%;
    word-break:break-word;
    white-space:pre-wrap;

    -webkit-text-stroke:4px #000;

    text-shadow:
    4px 4px 6px rgba(0,0,0,.8);

    transition:.2s ease;
}

/* ======================
   ICONS
====================== */

.preview-icon{
    font-size:60px;
    color:#ffd700;
    display:none;
    transition:.2s ease;
}

#icon-top,
#icon-bottom{
    margin:15px 0;
}

/* ======================
   INPUT
====================== */

#text-input{
    width:100%;
    min-height:80px;
    resize:vertical;

    background:#f9f9f9 !important;
    border:1px solid #f3c6cf !important;

    border-radius:8px;
    padding:12px 14px;

    color:#000 !important;
}

#text-input:focus{
    border-color:#e91e63 !important;
    outline:none;
}

/* ======================
   CONTROL PANEL
====================== */

.controls-panel{
    display:grid;
    grid-template-columns:1.1fr 1fr 1fr 1fr;
    gap:14px;
}

@media(max-width:900px){
    .controls-panel{
        grid-template-columns:1fr;
    }
}

.ctrl-group{
    background:#f9f9f9 !important;
    border:1px solid #f3c6cf !important;
    border-radius:10px;
    padding:14px;
}

.ctrl-group-title{
    font-size:.65rem;
    text-transform:uppercase;
    color:#777;
    margin-bottom:14px;
    font-weight:700;
}

/* ======================
   SLIDERS
====================== */

.slider-row{
    margin-bottom:15px;
}

.slider-label{
    display:flex;
    justify-content:space-between;
    margin-bottom:6px;
    font-size:.88rem;
}

.slider-row input[type="range"]{
    width:100%;
}

.slider-row select{
    width:100%;
    padding:10px;
    border-radius:8px;
    border:1px solid #ddd;
    background:#fff;
}

/* ======================
   COLOR ROW
====================== */

.color-row{
    display:flex;
    gap:12px;
}

.color-item{
    flex:1;
}

.color-label{
    display:block;
    margin-bottom:6px;
    font-size:.85rem;
}

.color-item input[type="color"]{
	padding: 0px !important;
    width:100%;
    height:44px;
    border:none;
    cursor:pointer;
    background:none;
}

/* ======================
   BUTTONS
====================== */

.add-bg-btn{
    width:100%;
    margin-top:12px;

    padding:10px !important;

    border:none;
    border-radius:20px !important;

    background:linear-gradient(
    219deg,
    #FB0E76 0%,
    #910694 100%
    );

    color:#fff;
    cursor:pointer;
}

#bg-file-input{
    display:none;
}

.action-row{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.action-btn{
    background:linear-gradient(
    219deg,
    #FB0E76 0%,
    #910694 100%
    ) !important;

    border:none;
    border-radius:8px !important;

    color:#fff;
    padding:10px 22px;

    cursor:pointer;
}

.action-btn.secondary{
    background: linear-gradient(219deg, #db0161 0%, #b840bb 100%) !important;
}

/* ======================
   TOGGLE BUTTON
====================== */

.toggle-row{
    display:flex;
    gap:12px;
    align-items:center;
    margin-top:10px;
}

.tog-btn{
	padding: 10px !important;
    width:45px;
    height:45px;

    border:none;
    border-radius:8px !important;

    background:linear-gradient(
    219deg,
    #FB0E76 0%,
    #910694 100%
    );

    color:#fff;
    cursor:pointer;
}

.tog-btn.active{
    transform:scale(1.05);
}

/* ======================
   ALIGNMENT GRID
====================== */

.align-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
}

.align-dot{
    width:16px;
    height:16px;
    border-radius:50%;
    background:#ddd;
    cursor:pointer;
}

.align-dot.active{
    background:#FB0E76;
}

/* ======================
   SWITCHES
====================== */

.switch-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}

.toggle-switch{
    position:relative;
    width:48px;
    height:24px;
}

.toggle-switch input{
    display:none;
}

.slider-track{
    position:absolute;
    inset:0;
    background:#ccc;
    border-radius:20px;
    cursor:pointer;
}

.slider-track::before{
    content:'';
    position:absolute;

    width:18px;
    height:18px;

    left:3px;
    top:3px;

    border-radius:50%;
    background:#fff;

    transition:.2s;
}

.toggle-switch input:checked + .slider-track{
    background:#FB0E76;
}

.toggle-switch input:checked + .slider-track::before{
    transform:translateX(24px);
}

/* ======================
   EFFECT PANELS
====================== */

#outline-controls,
#shadow-controls{
    transition:.2s ease;
}

/* ======================
   ANIMATIONS
====================== */

.anim-bounce{
    animation:bounce 1s infinite;
}

.anim-pulse{
    animation:pulse 1.2s infinite;
}

.anim-shake{
    animation:shake .5s infinite;
}

.anim-wobble{
    animation:wobble 1s infinite;
}

.anim-float{
    animation:float 2s ease-in-out infinite;
}

@keyframes bounce{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-15px);}
}

@keyframes pulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.08);}
}

@keyframes shake{
    0%,100%{transform:translateX(0);}
    25%{transform:translateX(-5px);}
    75%{transform:translateX(5px);}
}

@keyframes wobble{
    0%,100%{transform:rotate(0);}
    25%{transform:rotate(-5deg);}
    75%{transform:rotate(5deg);}
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
	
}
@media(max-width:767px){
	#icon-color{
		padding:0px !important;
	}
	#btn-download{
		padding:16px !important;
	}
}