*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --bg-1: #0f172a;
    --card-bg: linear-gradient(135deg,#ffffff 0%, #f7f9ff 100%);
    --accent: #4b5cff;
    --muted: #6b7280;
    --glass: rgba(255,255,255,0.6);
}

body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(1200px 600px at 10% 10%, #1f2937 0%, var(--bg-1) 40%), #0b1220;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    color: #0b1220;
}

.container{
    width: 420px;
    max-width: calc(100% - 40px);
    background: var(--card-bg);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(11,18,32,0.5);
    backdrop-filter: blur(6px);
}

.header h1{
    font-size: 20px;
    letter-spacing: -0.2px;
}

.subtitle{
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
}

.main{ margin-top: 16px; }

label{ display:block; font-weight:600; color:#111827; margin-bottom:8px; }

.input-row{ display:flex; gap:10px; }

input[type="text"]{
    flex: 1;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e6e9f2;
    background: #fff;
    font-size: 14px;
    outline: none;
    transition: box-shadow .15s ease, transform .12s ease;
}

input[type="text"]:focus{ box-shadow: 0 6px 18px rgba(75,92,255,0.12); transform: translateY(-1px); }

button{ padding: 10px 14px; border-radius: 10px; border: 0; cursor: pointer; font-weight:600; }

.primary{ background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(75,92,255,0.18); }
.primary:active{ transform: translateY(1px); }

.secondary{ background: rgba(16,185,129,0.1); color: #10b981; border: 1px solid rgba(16,185,129,0.12); }
.secondary[disabled]{ opacity: .55; cursor: not-allowed; }

.tertiary{ background: transparent; color: var(--muted); border: 0; }

.preview{ margin-top: 18px; display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }

.img-box{ width: 150px; height: 150px; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg,#f8fafc,#eef2ff); border-radius:12px; border:1px solid #eef2ff; }
.img-box img{ max-width: 140px; max-height:140px; display:block; }
.img-box img[src=""], .img-box img:not([src]){ display: none; }
.img-box.loading{ display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg,#f8fafc,#eef2ff); }
.img-box.loading::after{ content: '';
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 4px solid rgba(75,92,255,0.18);
    border-top-color: var(--accent);
    animation: spin 1s linear infinite;
}

.controls{ display:flex; gap:8px; align-items:center; margin-left:auto; flex: 0 1 auto; }

.icon-selector{ display:flex; gap:8px; margin-top: 8px; align-items:center; flex: 1 1 200px; order: 2; }
.icon-btn{ padding:6px 8px; border-radius:8px; background: transparent; border: 1px solid rgba(14,165,233,0.06); cursor:pointer; font-size:13px; color:#374151; }
.icon-btn.active{ background: linear-gradient(90deg, rgba(75,92,255,0.12), rgba(75,92,255,0.06)); border-color: rgba(75,92,255,0.18); box-shadow: 0 6px 18px rgba(75,92,255,0.06); }
.icon-btn:hover{ transform: translateY(-1px); }
.icon-btn img{ display:inline-block; vertical-align:middle; margin: -2px 0 0 0; }

.icon-controls{ display:flex; gap:12px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.icon-controls label{ font-size:13px; color:#4b5563; display:flex; align-items:center; gap:8px; }
.icon-controls input[type="file"]{ display:block; }
.icon-controls input[type="range"]{ width:120px; }
.icon-controls .shadow{ color:var(--muted); }

.footer{ margin-top: 14px; text-align:center; color:var(--muted); font-size:12px; }

@media (max-width: 480px){
    .container{ width: auto; padding: 16px; }
    .img-box{ width: 120px; height:120px; }
}

@media (min-width: 481px){
    .preview > .img-box{ flex: 0 0 auto; order: 0; }
    .icon-selector{ order: 1; margin-top: 0; }
    .controls{ order: 2; margin-left: 12px; }
}

@keyframes spin{ to{ transform: rotate(360deg);} }