@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
    --primary:#6366f1; --primary2:#8b5cf6; --bg:#09090b; --card:#18181c;
    --surface2:#18181c; --text:#f0f0f5; --text2:#a1a1b5; --muted:#6b6b80;
    --border:#27272e; --border2:#32323c; --accent:#4ade80; --accent-light:#a5b4fc;
}
*,*::before,*::after{ box-sizing:border-box; }
body{
    font-family:'DM Sans',system-ui,sans-serif; background:var(--bg); color:var(--text);
    display:flex; justify-content:center; align-items:flex-start; padding:2rem 1rem 4rem; margin:0;
    min-height:100vh; line-height:1.55; overflow-x:hidden;
}
/* glow ambiental + grid sutil (firma visual Voksely) */
body::before{
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(ellipse 70% 50% at 50% 0%, rgba(99,102,241,0.12), transparent 60%),
      linear-gradient(rgba(99,102,241,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99,102,241,0.035) 1px, transparent 1px);
    background-size:100% 100%, 48px 48px, 48px 48px;
}
.container{
    position:relative; z-index:1; background:linear-gradient(180deg, rgba(24,24,28,0.72), rgba(17,17,19,0.82));
    backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
    width:100%; max-width:650px; padding:2.5rem; border-radius:24px;
    border:1px solid var(--border);
    box-shadow:0 0 0 1px rgba(99,102,241,0.06), 0 24px 60px rgba(0,0,0,0.5), 0 0 80px rgba(99,102,241,0.06);
    text-align:center;
}
h1{ font-family:'Syne',sans-serif; font-weight:800; color:var(--text); margin-bottom:0.5rem; font-size:1.9rem; letter-spacing:-0.02em; }
p.subtitle{ color:var(--text2); margin-bottom:2rem; font-size:0.92rem; }
.input-group{ margin-bottom:1.5rem; text-align:left; }
label{ display:block; font-weight:600; margin-bottom:0.6rem; font-size:0.85rem; color:var(--text2); font-family:'JetBrains Mono',monospace; }
input{ width:100%; padding:0.9rem; border:1px solid var(--border2); border-radius:12px; box-sizing:border-box; font-size:0.95rem; background:var(--surface2); color:var(--text); }
input[type=file]{ cursor:pointer; }
input[type=file]::file-selector-button{ background:rgba(99,102,241,0.15); color:var(--accent-light); border:1px solid rgba(99,102,241,0.3); padding:0.5rem 1rem; border-radius:8px; margin-right:1rem; cursor:pointer; font-weight:600; font-family:'DM Sans',sans-serif; }
.btn-main{
    background:linear-gradient(135deg,var(--primary),var(--primary2)); color:white; border:none;
    padding:1rem; border-radius:14px; cursor:pointer; width:100%; font-family:'Syne',sans-serif;
    font-weight:700; font-size:1.05rem; transition:transform .2s, box-shadow .2s; margin-top:1rem;
    box-shadow:0 8px 24px rgba(99,102,241,0.3);
}
.btn-main:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(99,102,241,0.45); }
.btn-main:disabled{ background:#3a3a45; cursor:not-allowed; box-shadow:none; transform:none; }
#previewViewer{ width:100%; height:350px; background:radial-gradient(ellipse at center, rgba(99,102,241,0.08), var(--surface2)); border-radius:16px; margin-top:2rem; display:none; border:1px solid var(--border); }
#successBox{ animation:fadeIn 0.5s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }