.app{width:100%;min-height:100vh}header{text-align:center;margin-bottom:3rem;padding-top:2rem}header h1{font-size:3em;margin-bottom:.5rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;letter-spacing:-.02em}header p{color:#888;font-size:1.1em;margin-bottom:2rem}nav{display:flex;gap:.5rem;justify-content:center;background-color:#ffffff0d;padding:.5rem;border-radius:12px;max-width:400px;margin:0 auto}nav button{padding:.8em 2em;background-color:transparent;border:none;color:#888;transition:all .3s ease;flex:1}nav button.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #667eea66}main{background:#ffffff08;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:3rem;box-shadow:0 8px 32px #0000004d;transition:all .3s ease}main:hover{box-shadow:0 12px 48px #0006}.upload-container,.redeem-container{text-align:center;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.upload-container h2,.redeem-container h2{margin-bottom:2.5rem;font-size:2em;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.upload-form,.redeem-form{display:flex;flex-direction:column;gap:1.5rem;align-items:center;max-width:450px;margin:0 auto}.file-drop-area{width:100%;min-height:280px;padding:2rem;border:3px dashed rgba(102,126,234,.3);border-radius:16px;background-color:#ffffff05;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.file-drop-area:hover{border-color:#667eea;background-color:#667eea0d;transform:scale(1.01)}.file-drop-area.drag-active{border-color:#667eea;background:linear-gradient(135deg,#667eea1a,#764ba21a);box-shadow:0 0 30px #667eea4d}.file-drop-area.has-file{border-style:solid;border-width:2px;background:linear-gradient(135deg,#667eea0d,#764ba20d)}.file-drop-label{display:flex;flex-direction:column;align-items:center;gap:1rem;cursor:pointer;width:100%;text-align:center}.file-drop-label svg{color:#667eea;opacity:.8;transition:all .3s ease}.file-drop-area:hover .file-drop-label svg{opacity:1;transform:translateY(-5px)}.file-drop-text{font-size:1.1em;color:#aaa;margin:0}.file-drop-text strong{color:#667eea;font-weight:600}.file-drop-hint{font-size:.9em;color:#888;margin:0}.file-preview{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;animation:fadeIn .3s ease}.preview-image{max-width:100%;max-height:300px;border-radius:12px;object-fit:contain;box-shadow:0 8px 32px #0000004d}.file-icon{color:#667eea;opacity:.6}.file-info{text-align:center;width:100%}.file-name{font-size:1.1em;font-weight:600;color:#fff;margin:.5rem 0;word-break:break-all}.file-size{font-size:.9em;color:#888;margin:.5rem 0}.clear-file-btn{background:#ff6b6b1a;border:1px solid rgba(255,107,107,.3);color:#ff6b6b;padding:.5em 1em;font-size:.9em;margin-top:1rem;border-radius:8px;transition:all .3s ease}.clear-file-btn:hover:not(:disabled){background:#ff6b6b33;transform:translateY(-2px)}@keyframes slideIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.upload-btn,.redeem-btn,.download-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:1.1em;font-weight:600;padding:1em 2.5em;width:100%;border:none;box-shadow:0 4px 15px #667eea66;transition:all .3s ease}.upload-btn:hover:not(:disabled),.redeem-btn:hover:not(:disabled),.download-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.upload-btn:active:not(:disabled),.redeem-btn:active:not(:disabled),.download-btn:active:not(:disabled){transform:translateY(0)}.error{color:#ff6b6b;background:#ff6b6b1a;padding:1rem 1.5rem;border-radius:12px;border:1px solid rgba(255,107,107,.3);animation:shake .5s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.success{display:flex;flex-direction:column;gap:2rem;align-items:center;animation:fadeIn .5s ease}.success h3{color:#51cf66;font-size:1.8em;font-weight:600}.code-display{background:linear-gradient(135deg,#667eea1a,#764ba21a);border:2px solid rgba(102,126,234,.3);padding:2.5rem;border-radius:16px;box-shadow:0 8px 32px #667eea33;animation:pulse 2s ease infinite}@keyframes pulse{0%,to{box-shadow:0 8px 32px #667eea33}50%{box-shadow:0 8px 32px #667eea66}}.code-display p{margin-bottom:1rem;font-size:1.2em;color:#aaa}.code{font-size:3.5em;font-weight:900;letter-spacing:.3em;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:Courier New,monospace;padding:.5em;text-shadow:0 0 30px rgba(102,126,234,.5);margin:1rem 0;-webkit-user-select:all;user-select:all}.expiry-notice{color:orange;font-size:.9em;margin-top:.5rem;font-weight:500}.code-input-group{width:100%}.code-input{text-align:center;font-size:2.5em;letter-spacing:.5em;font-weight:700;font-family:Courier New,monospace;padding:.7em;background:#ffffff0d;border:2px solid rgba(102,126,234,.3);transition:all .3s ease}.code-input:focus{border-color:#667eea;box-shadow:0 0 20px #667eea4d;outline:none}.file-ready{display:flex;flex-direction:column;gap:2rem;align-items:center;animation:fadeIn .5s ease}.file-ready h3{color:#51cf66;font-size:1.8em;font-weight:600}.file-details{background:linear-gradient(135deg,#667eea0d,#764ba20d);border:1px solid rgba(102,126,234,.2);padding:2rem;border-radius:16px;width:100%;max-width:450px}.file-details p{margin:1rem 0;text-align:left;font-size:1em;display:flex;justify-content:space-between;align-items:center}.file-details strong{color:#667eea;font-weight:600}.button-group{display:flex;gap:1rem;width:100%;max-width:450px}.cancel-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fff;flex:1;transition:all .3s ease}.cancel-btn:hover{background:#ffffff1a;transform:translateY(-2px)}.download-btn{flex:2}@media (prefers-color-scheme: light){main{background:#ffffffe6;border:1px solid rgba(0,0,0,.1)}header h1{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}nav{background-color:#0000000d}nav button{color:#666}input[type=file]{background-color:#00000005}.code-input{background:#00000008}}@media (max-width: 600px){header h1{font-size:2em}main{padding:2rem 1.5rem}.code{font-size:2.2em;letter-spacing:.2em}.code-input{font-size:1.8em}.button-group{flex-direction:column}.download-btn{flex:1}nav button{padding:.7em 1.5em;font-size:.9em}}:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;font-weight:400;color-scheme:light dark;color:#ffffffe6;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);background-attachment:fixed;position:relative;overflow-x:hidden}body:before{content:"";position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(102,126,234,.1) 0%,transparent 50%);animation:rotate 30s linear infinite;pointer-events:none}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#root{width:100%;max-width:800px;position:relative;z-index:1}button{border-radius:12px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:all .3s ease}button:focus,button:focus-visible{outline:none;box-shadow:0 0 0 3px #667eea4d}button:disabled{opacity:.5;cursor:not-allowed}input[type=file],input[type=text]{padding:.8em;font-size:1em;border:2px solid rgba(255,255,255,.1);border-radius:12px;background-color:#ffffff0d;color:#fff;width:100%;transition:all .3s ease}input[type=file]:focus,input[type=text]:focus{outline:none;border-color:#667eea;box-shadow:0 0 20px #667eea4d}@media (prefers-color-scheme: light){:root{color:#213547}body{background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}body:before{background:radial-gradient(circle,rgba(102,126,234,.05) 0%,transparent 50%)}input[type=file],input[type=text]{background-color:#fffc;color:#213547;border:2px solid rgba(0,0,0,.1)}}@media (max-width: 768px){body{padding:15px}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#ffffff0d}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#764ba2,#667eea)}