:root{--bg:#fff;--accent:#1d9bf0;--text:#111;--border:#ddd}body.dark{--bg:#000;--text:#fff;--border:#333}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}a{text-decoration:none;color:inherit}.material-icons{vertical-align:middle}header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;box-shadow:0 1px 3px var(--border)}.logo{font-size:1.4rem}.menu{padding:3px 10px}.menu i{font-size:1.5rem}.menubar{position:fixed;inset:0 40% 0 0;display:none;background:var(--bg);padding:100px 20px;z-index:1000}.menubar a{display:flex;padding:20px 0;font-size:1.2rem;gap:2px}.user-top{margin-bottom:80px;text-align:center}.user-top h3{margin-bottom:20px;font-size:1.4rem}.logout-btn{text-align:center;width:100%;padding:15px;margin-top:50px;border:1px solid var(--border)}main{display:grid;place-items:center;min-height:75vh;padding:20px}.upload-area{padding:25px 50px;border:2px dashed var(--border);border-radius:10px;display:grid;place-items:center;text-align:center;cursor:pointer}.upload-area i{font-size:3rem;margin-bottom:12px}.upload-area span{color:var(--accent);text-decoration:underline}.generation-page{display:none;width:100%}.uploaded-img{position:relative;border:2px solid var(--border);border-radius:16px;padding:10px;text-align:center}.uploaded-img img{max-width:80%;max-height:200px}.delete-img{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;border-radius:8px;background:rgba(0,0,0,.6);color:#fff;cursor:pointer}.aspect-ratio{margin-top:25px}.aspect-ratio p{margin-bottom:8px}.ratio-options{display:flex;gap:15px}.ratio-box{flex:1 1;border:2px solid var(--border);padding:12px;border-radius:12px;text-align:center;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:5px}.ratio-box.active{border-color:var(--accent);color:var(--accent)}.gen-btn{margin-top:50px;padding:14px;border-radius:40px;font-weight:600;cursor:pointer;color:#fff;background:linear-gradient(90deg,#3ee98a,#3b82ff);display:flex;justify-content:center;align-items:center;gap:5px}@media (min-width:768px){header{padding:20px 35px;font-size:2rem}.menu i{font-size:2.2rem}.menubar{font-size:1.85rem;inset:0 60% 0 0;background:var(--bg)}.user-top h3{margin-bottom:30px;font-size:2rem}main{padding:150px;font-size:1.6rem}.upload-area{border:3px dashed var(--border);display:grid}.upload-area i{font-size:4.5rem;margin-bottom:18px}.uploaded-img{border:3px solid var(--border)}.uploaded-img img{max-width:80%;max-height:350px}.delete-img{top:12px;right:12px;width:50px;height:50px}.aspect-ratio{margin-top:32px}.aspect-ratio p{margin-bottom:12px}.ratio-options{gap:22px}.ratio-box{gap:7px}.gen-btn{margin-top:70px;gap:7px}}