:root{--primary:#3448c5;--primary-hover:#2838a0;--glass:#fffffff2;--text-main:#1f2937;--text-muted:#6b7280}*{box-sizing:border-box}body{background:linear-gradient(135deg,#e0e7ff 0%,#f3f4f6 100%);justify-content:center;align-items:center;min-height:100vh;margin:0;padding:0;font-family:Inter,-apple-system,system-ui,sans-serif;display:flex;overflow-x:hidden}#app{justify-content:center;width:100%;padding:1rem;display:flex}.card{background:var(--glass);-webkit-backdrop-filter:blur(12px);text-align:center;border:1px solid #ffffff4d;border-radius:20px;width:100%;max-width:450px;padding:1.5rem;transition:transform .3s;box-shadow:0 10px 25px -5px #0000001a}h1{color:var(--text-main);margin-bottom:.5rem;font-size:clamp(1.25rem,5vw,1.75rem)}p{color:var(--text-muted);margin-bottom:1.5rem;font-size:.9rem;line-height:1.5}.btn-upload{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:12px;width:100%;min-height:48px;padding:.875rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s}.btn-upload:active{transform:scale(.98)}.preview-area{background:#f9fafb;border:2px dashed #d1d5db;border-radius:16px;justify-content:center;align-items:center;width:100%;min-height:250px;margin-top:1.5rem;padding:10px;display:flex;overflow:hidden}#uploadedimage{object-fit:contain;width:100%;height:auto;max-height:450px;animation:.5s ease-in fadeIn;display:none}#placeholder-text{color:#9ca3af;padding:1rem;font-size:.85rem}@media (width>=640px){.card{padding:2.5rem}.btn-upload:hover{background:var(--primary-hover);transform:translateY(-2px)}}