@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";:root{--bg-color: #0f0b22;--darker-bg: #080418;--card-bg: #1a1342;--border-color: #483b8c;--primary-color: #f5487f;--secondary-color: #26c6da;--accent-color: #f9c846;--highlight-color: #7986cb;--text-color: #ffffff;--muted-text: #a0aec0;--hot-tag-color: #ff004d;--category-bg: rgba(20, 10, 50, .4);--tab-active: #8e51fb;--success: #10b981;--error: #ef4444;--pixel-unit: 4px;--border-width: 4px}*{box-sizing:border-box;margin:0;padding:0}img,.style-card-image{image-rendering:auto!important;-webkit-font-smoothing:antialiased;background-color:#0d1025;mix-blend-mode:normal}body{font-family:"Press Start 2P",monospace;line-height:1.6;background-color:var(--bg-color);background-image:radial-gradient(circle at 15% 50%,rgba(142,81,251,.1) 0%,transparent 25%),radial-gradient(circle at 85% 30%,rgba(245,72,127,.1) 0%,transparent 25%),url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 5v1H0V0h5z'/%3E%3C/g%3E%3C/svg%3E");color:var(--text-color);min-height:100vh;font-size:12px;padding-bottom:30px;position:relative}body:before{content:"";position:fixed;inset:0;background-image:radial-gradient(2px 2px at 20px 30px,#fff,#0000),radial-gradient(2px 2px at 40px 70px,#fff,#0000),radial-gradient(2px 2px at 50px 160px,#fff,#0000),radial-gradient(2px 2px at 90px 40px,#fff,#0000),radial-gradient(2px 2px at 130px 80px,#fff,#0000),radial-gradient(2px 2px at 160px 120px,#fff,#0000),radial-gradient(1px 1px at 110px 210px,#fff,#0000),radial-gradient(1px 1px at 10px 250px,#fff,#0000),radial-gradient(1px 1px at 210px 220px,#fff,#0000);background-repeat:repeat;background-size:240px 240px;opacity:.08;z-index:-2;animation:animateStars 100s linear infinite}@keyframes animateStars{0%{transform:translateY(0)}to{transform:translateY(-240px)}}#app{min-height:100vh}h1,h2,h3{text-transform:uppercase;text-shadow:var(--pixel-unit) var(--pixel-unit) 0 rgba(0,0,0,.5);line-height:1.4}.btn,.card,.upload-section,.style-card,.input,.error-message,.generate-btn,.register-link a,.login-container,.login-form input{border-radius:0!important}.header{display:flex;justify-content:space-between;align-items:center;padding:20px 8%;background-color:var(--darker-bg);border-bottom:var(--border-width) solid var(--border-color);position:relative;overflow:hidden}.header:before{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20px 10px,#fffc,#0000),radial-gradient(1px 1px at 40px 25px,#fffc,#0000),radial-gradient(1px 1px at 90px 15px,#fffc,#0000);background-repeat:repeat;background-size:100px 40px;opacity:.3;pointer-events:none}.logo{display:flex;align-items:center;font-size:20px;font-weight:700;color:var(--text-color);text-decoration:none;position:relative;z-index:1}.logo:before{content:"";width:40px;height:40px;margin-right:12px;background:url(/icon/logo-icon.png) center/contain no-repeat;image-rendering:pixelated}.user-info{color:var(--accent-color);margin-right:15px;font-size:12px;display:flex;align-items:center;gap:10px}.coins-pill{background:linear-gradient(45deg,#f39c12,#e67e22);color:#fff;padding:6px 10px;border:2px solid #d68910;font-weight:700;display:inline-flex;align-items:center;gap:6px;box-shadow:2px 2px #0000004d;animation:coinGlow 2s ease-in-out infinite alternate}.coin-icon{font-size:12px}.coins{background:linear-gradient(45deg,#f39c12,#e67e22);color:#fff;padding:4px 8px;border:2px solid #d68910;font-weight:700;display:inline-flex;align-items:center;gap:4px;box-shadow:2px 2px #0000004d;animation:coinGlow 2s ease-in-out infinite alternate}@keyframes coinGlow{0%{box-shadow:2px 2px #0000004d,0 0 5px #f39c124d}to{box-shadow:2px 2px #0000004d,0 0 15px #f39c1299}}.btn{padding:10px 20px;border:var(--border-width) solid var(--border-color);font-size:12px;cursor:pointer;font-family:"Press Start 2P",monospace;transition:none;text-transform:uppercase;box-shadow:var(--pixel-unit) var(--pixel-unit) 0 #00000080}.btn:active{transform:translate(var(--pixel-unit),var(--pixel-unit));box-shadow:none}.btn-secondary{background-color:var(--secondary-color);color:var(--text-color)}.btn-success{background-color:var(--success);color:var(--text-color)}.btn-danger{background-color:var(--error);color:var(--text-color)}.btn-outline{background:transparent;color:var(--text-color);border-color:var(--text-color)}.card{background-color:#1a1342;background-image:none;border:var(--border-width) solid var(--border-color);padding:20px;box-shadow:var(--pixel-unit) var(--pixel-unit) 0 #00000080;position:relative;overflow:hidden;z-index:0}.card:after{content:"";position:absolute;inset:0;background-image:linear-gradient(45deg,transparent calc(100% - 8px),var(--border-color) calc(100% - 8px),var(--border-color) 100%);background-size:8px 8px;pointer-events:none;opacity:.04;z-index:-1}.home-page{min-height:100vh}.main-content{padding:10px 8% 40px}.container{max-width:1200px;margin:0 auto}.hero{text-align:center;padding:30px 10%}.hero-title{font-size:20px;color:var(--accent-color);margin-bottom:12px}.hero-desc{color:var(--muted-text);font-size:12px;max-width:900px;margin:0 auto}.board{display:grid;grid-template-columns:3fr 3fr 3fr;gap:16px;align-items:start;background:#0c081e99;padding:8px;border:1px solid rgba(72,59,140,.4);box-shadow:inset 0 0 0 1px #00000040;border-radius:0}.panel{background:#1a1342;background-image:none;border:var(--border-width) solid var(--border-color);padding:16px;position:relative;overflow:hidden;box-shadow:var(--pixel-unit) var(--pixel-unit) 0 #00000080;z-index:0}.panel:after{content:"";position:absolute;inset:0;background-image:linear-gradient(45deg,transparent calc(100% - 8px),var(--border-color) calc(100% - 8px),var(--border-color) 100%);background-size:8px 8px;pointer-events:none;opacity:.05;z-index:-1}.panel-title{font-size:14px;color:var(--accent-color);margin-bottom:12px;border-bottom:var(--border-width) solid var(--border-color);padding-bottom:8px;text-transform:uppercase}.login-page{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.login-container{width:100%;max-width:420px}.login-form{display:flex;flex-direction:column}.input{width:100%;padding:12px;border:var(--border-width) solid var(--border-color);background:var(--darker-bg);color:var(--text-color);font-family:inherit;font-size:12px;margin:8px 0}.input:focus{outline:none;border-color:var(--primary-color)}.register-link{text-align:center;margin-top:16px;font-size:10px;color:var(--muted-text)}.register-link a{color:var(--accent-color);text-decoration:none;border-bottom:1px solid transparent}.register-link a:hover{border-bottom:1px solid var(--accent-color)}.error-message{margin-top:16px;padding:12px;background:var(--error);color:#fff;text-align:center;font-size:10px;border:var(--border-width) solid var(--border-color)}.upload-section h2,.styles-section h2,.result-section h2{font-size:16px;margin-bottom:16px;color:var(--primary-color)}.file-input{display:none}.preview{margin-top:16px}.preview img{max-width:100%;max-height:300px;border:var(--border-width) solid var(--border-color)}.upload-panel .preview img{max-height:360px}.upload-drop{border:var(--border-width) dashed var(--border-color);min-height:400px;background:#0d1025;display:grid;place-items:center;padding:12px;margin-bottom:16px}.upload-placeholder{color:var(--muted-text);font-size:12px}.category{margin-bottom:24px}.category-name{font-size:14px;color:var(--secondary-color);margin-bottom:12px}.styles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-height:430px;overflow-y:auto;padding:4px 8px}.styles-grid::-webkit-scrollbar{width:8px;background:var(--darker-bg);border:2px solid var(--border-color)}.styles-grid::-webkit-scrollbar-thumb{background-color:var(--primary-color);border:2px solid var(--border-color)}.tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}.tab-btn{border:var(--border-width) solid var(--border-color);background:var(--category-bg);color:var(--text-color);padding:10px;font-size:11px;text-align:center;cursor:pointer;transition:none;box-shadow:var(--pixel-unit) var(--pixel-unit) 0 #00000080}.tab-btn.active{background:var(--tab-active);color:var(--bg-color);border-color:#483b8c}.tab-btn:hover:not(.active){background:#8e51fb33}.style-card{position:relative;border:var(--border-width) solid var(--border-color);background:var(--darker-bg);cursor:pointer;transition:none;text-align:center;box-shadow:var(--pixel-unit) var(--pixel-unit) 0 #00000080;display:flex;flex-direction:column;aspect-ratio:1/1.3}.style-card:hover{border-color:var(--highlight-color)}.style-card.active{border:var(--border-width) solid var(--highlight-color)}.hot-badge{position:absolute;top:10px;left:10px;background:var(--hot-tag-color);color:#fff;padding:4px 8px;font-size:8px;border:var(--border-width) solid var(--border-color);z-index:3}.style-card-image{flex:1;overflow:hidden;background-color:#0d1025;background-size:cover;background-position:center;min-height:120px;background-repeat:no-repeat;image-rendering:auto}.style-card-content{padding:8px;text-align:center;background-color:var(--darker-bg);color:#fff;font-size:10px;border-top:var(--border-width) solid var(--border-color)}.style-name{font-size:10px}.generate-btn{width:100%;margin-top:20px;padding:16px}.result-panel{display:flex;flex-direction:column;gap:12px}.result-box{border:var(--border-width) dashed var(--border-color);background:#0d1025;min-height:340px;display:grid;place-items:center;padding:14px;box-shadow:inset 0 0 0 1px #00000059;transition:border-color .2s ease,box-shadow .2s ease}.result-box.has-image{border-style:solid;border-color:var(--highlight-color);box-shadow:var(--pixel-unit) var(--pixel-unit) 0 #00000080,inset 0 0 0 1px #483b8c80}.result-image{width:100%;max-height:520px;object-fit:contain;border:var(--border-width) solid var(--border-color);background:#0d1025;box-shadow:var(--pixel-unit) var(--pixel-unit) 0 #00000080;image-rendering:auto}.result-panel .btn{width:auto;margin-top:0}.result-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:var(--border-width) solid var(--border-color);background:linear-gradient(90deg,#8e51fb14,#26c6da14);box-shadow:var(--pixel-unit) var(--pixel-unit) 0 #00000073}.result-actions__text{display:flex;flex:1}.result-badge{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;line-height:1.6;background:var(--primary-color);color:var(--bg-color);padding:10px 20px;border:var(--border-width) solid var(--border-color);box-shadow:var(--pixel-unit) var(--pixel-unit) 0 #00000073;letter-spacing:.5px}.download-btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(90deg,var(--secondary-color),var(--accent-color));color:#0f0b22;border-color:var(--border-color);min-width:160px;text-align:center;box-shadow:var(--pixel-unit) var(--pixel-unit) 0 #0000008c}.download-btn:hover{filter:brightness(1.05)}.download-btn:active{transform:translate(var(--pixel-unit),var(--pixel-unit));box-shadow:none}.result-placeholder{color:var(--muted-text);font-size:12px;text-align:center;padding:12px;line-height:1.6}@media(max-width:768px){body{font-size:10px}.header{flex-direction:column;gap:12px;padding:16px}.styles-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.result-actions{flex-direction:column;align-items:flex-start}.result-actions .download-btn{width:100%}}