/* WRAPPER */

.dw-tool-wrapper{

max-width:1000px;
margin:auto;
padding:40px 20px;

}


/* CONTAINER */

.dw-tool-container{

background:#ffffff;

border-radius:28px;

padding:45px;

text-align:center;

box-shadow:
0 20px 40px rgba(0,0,0,0.08),
0 40px 90px rgba(0,0,0,0.12);

transition:.35s;

}

/* floating card effect */

.dw-tool-container:hover{

transform:translateY(-4px);

box-shadow:
0 30px 60px rgba(0,0,0,0.12),
0 60px 120px rgba(0,0,0,0.16);

}

.dark-mode .dw-tool-container{

background:#0f172a;
color:white;

box-shadow:
0 40px 100px rgba(0,0,0,0.8);

}


/* HEADER */

.dw-tool-header h1{

font-size:38px;
margin-bottom:10px;
color:#1e293b;

}

.dw-tool-header p{

color:#64748b;

}

/* DARK MODE HEADER FIX */

.dark-mode .dw-tool-header h1{

color:#f8fafc;

text-shadow:0 4px 20px rgba(59,130,246,0.35);

}

.dark-mode .dw-tool-header p{

color:#94a3b8;

}


/* BUTTON GROUP */

.dw-tool-actions{

display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin-top:15px;

}


/* APPLE BUTTON */

.dw-btn-apple{

background:linear-gradient(135deg,#2563eb,#1d4ed8);

color:white;

border:none;

padding:13px 26px;

border-radius:16px;

font-weight:600;

cursor:pointer;

transition:.25s;

box-shadow:
0 10px 25px rgba(37,99,235,0.35),
inset 0 1px 0 rgba(255,255,255,0.3);

}

.dw-btn-apple:hover{

transform:translateY(-3px);

box-shadow:
0 20px 45px rgba(37,99,235,0.5),
inset 0 1px 0 rgba(255,255,255,0.4);

}

.dw-btn-apple:active{

transform:scale(.97);

box-shadow:
0 6px 15px rgba(0,0,0,0.2);

}


/* CLEAR BUTTON */

.dw-btn-clear{

background:#e2e8f0;

color:#1e293b;

border:none;

padding:13px 26px;

border-radius:16px;

font-weight:600;

cursor:pointer;

transition:.25s;

box-shadow:
0 6px 15px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.4);

}

.dw-btn-clear:hover{

background:#d1d5db;

}

.dark-mode .dw-btn-clear{

background:#334155;
color:#ffffff;

box-shadow:
0 10px 25px rgba(0,0,0,0.5);

}


/* OPTIONS */

.dw-tool-options{

margin:25px 0;

display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;

}

/* DARK MODE OPTION TEXT FIX */

.dark-mode .dw-tool-options{

color:#e2e8f0;

}

.dark-mode .dw-tool-options label{

color:#e2e8f0;

}


/* INPUT */

.dw-tool-options input[type="number"]{

padding:8px 10px;

border-radius:8px;

border:1px solid #d1d5db;

width:80px;

}


/* OUTPUT */

#uuidOutput{

width:100%;

height:220px;

padding:18px;

border-radius:16px;

border:1px solid #e2e8f0;

background:#f8fafc;

font-family:monospace;

resize:vertical;

box-shadow:
inset 0 3px 8px rgba(0,0,0,0.06);

}

.dark-mode #uuidOutput{

background:#020617;
border-color:#334155;
color:#e2e8f0;

}


/* TOGGLE */

.dw-theme-toggle{

margin-top:10px;

display:flex;
justify-content:center;
align-items:center;
gap:8px;

}

.dw-switch{

position:relative;
display:inline-block;
width:46px;
height:24px;

}

.dw-switch input{

display:none;

}

.dw-slider{

position:absolute;
cursor:pointer;

background:#cbd5f5;

border-radius:34px;

top:0;
left:0;
right:0;
bottom:0;

transition:.4s;

}

.dw-slider:before{

position:absolute;
content:"";

height:18px;
width:18px;

left:3px;
bottom:3px;

background:white;

border-radius:50%;

transition:.4s;

}

input:checked + .dw-slider{

background:#2563eb;

}

input:checked + .dw-slider:before{

transform:translateX(22px);

}


/* RESPONSIVE */

@media(max-width:768px){

.dw-tool-header h1{

font-size:30px;

}

.dw-tool-actions{

flex-direction:column;

}

.dw-btn-apple,
.dw-btn-clear{

width:100%;

}

.dw-tool-container{

padding:30px;

}

}