*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #3E8A2C;--secondary-color: #E2B448;--text-color: #333;--border-radius: 16px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:var(--primary-color);color:var(--text-color);overflow-x:hidden;min-height:100vh;position:relative}.app-header{display:flex;justify-content:flex-end;align-items:center;padding:20px 40px;position:relative;z-index:100}.header-controls{display:flex;gap:12px}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:40px;min-height:120px}.logo-container img{max-height:120px;max-width:400px;object-fit:contain}.icon-btn{width:48px;height:48px;border:none;background:#fff3;color:#fff;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.icon-btn:hover{background:#ffffff4d;transform:translateY(-2px)}.icon-btn:active{transform:translateY(0)}.main-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;min-height:calc(100vh - 120px);position:relative;z-index:10}.display-panel{width:100%;max-width:900px;background:#fff;border-radius:var(--border-radius);padding:60px 40px;box-shadow:0 20px 60px #0003;margin-bottom:40px;position:relative;overflow:hidden;border:12px solid var(--secondary-color)}.display-panel:before{content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;background:repeating-linear-gradient(0deg,white 0px,white 20px,var(--secondary-color) 20px,var(--secondary-color) 30px);border-radius:calc(var(--border-radius) + 6px);z-index:-1}.name-display{font-size:72px;font-weight:700;text-align:center;min-height:100px;display:flex;align-items:center;justify-content:center;color:var(--text-color);word-break:break-word;transition:transform .2s}.name-display.animating{animation:nameFlash .1s ease-in-out}@keyframes nameFlash{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.draw-button{padding:20px 80px;font-size:28px;font-weight:700;color:#fff;background:var(--secondary-color);border:none;border-radius:16px;cursor:pointer;transition:all .3s;box-shadow:0 8px 24px #0003;text-transform:uppercase;letter-spacing:2px}.draw-button:hover{transform:translateY(-4px);box-shadow:0 12px 32px #0000004d}.draw-button:active{transform:translateY(-2px)}.draw-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.settings-panel{position:fixed;top:0;right:-500px;width:100%;max-width:500px;height:100vh;background:var(--secondary-color);box-shadow:-4px 0 20px #0000004d;transition:right .4s cubic-bezier(.4,0,.2,1);z-index:1000;overflow-y:auto}.settings-panel.open{right:0}.settings-content{padding:40px}.settings-content h2{font-size:36px;color:#fff;margin-bottom:32px}.settings-section{margin-bottom:32px}.settings-label{display:block;font-size:18px;font-weight:600;color:#fff;margin-bottom:12px}.name-list-textarea{width:100%;padding:16px;font-size:16px;font-family:Courier New,monospace;border:2px solid rgba(255,255,255,.3);border-radius:12px;background:#fffffff2;resize:vertical;min-height:200px}.name-list-textarea:focus{outline:none;border-color:#fff;background:#fff}.help-text{display:block;margin-top:8px;font-size:13px;color:#ffffffe6}.toggle-label{display:flex;justify-content:space-between;align-items:center;font-size:18px;font-weight:600;color:#fff;cursor:pointer}.toggle-switch{position:relative;width:64px;height:34px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ffffff4d;border-radius:34px;transition:.4s}.toggle-slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;border-radius:50%;transition:.4s}.toggle-switch input:checked+.toggle-slider{background-color:#d32f2f}.toggle-switch input:checked+.toggle-slider:before{transform:translate(30px)}.color-input-group{display:flex;gap:12px;align-items:center}.color-picker{width:60px;height:48px;border:2px solid rgba(255,255,255,.3);border-radius:8px;cursor:pointer;background:#fff}.color-text{flex:1;padding:12px 16px;font-size:16px;font-family:Courier New,monospace;border:2px solid rgba(255,255,255,.3);border-radius:8px;background:#fffffff2;text-transform:uppercase}.color-text:focus{outline:none;border-color:#fff;background:#fff}.logo-preview{width:100%;min-height:120px;background:#fffffff2;border:2px dashed rgba(255,255,255,.5);border-radius:12px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;overflow:hidden}.logo-preview img{max-width:100%;max-height:120px;object-fit:contain}.logo-preview.empty:after{content:"No logo uploaded";color:#0006;font-size:14px}.secondary-button{width:100%;padding:14px;font-size:16px;font-weight:600;color:var(--text-color);background:#ffffffe6;border:2px solid rgba(255,255,255,.3);border-radius:12px;cursor:pointer;transition:all .3s}.secondary-button:hover{background:#fff;transform:translateY(-2px)}.settings-actions{display:flex;flex-direction:column;gap:16px;margin-top:40px}.save-button{width:100%;padding:18px;font-size:18px;font-weight:700;color:var(--text-color);background:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .3s;text-transform:uppercase;letter-spacing:1px}.save-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0003}.discard-button{width:100%;padding:18px;font-size:18px;font-weight:700;color:#fff;background:#d32f2f;border:none;border-radius:12px;cursor:pointer;transition:all .3s;text-transform:uppercase;letter-spacing:1px}.discard-button:hover{background:#b71c1c;transform:translateY(-2px);box-shadow:0 8px 20px #0003}.sunburst{position:fixed;top:50%;left:50%;width:200vmax;height:200vmax;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,transparent 0deg 10deg,rgba(0,0,0,.1) 10deg 20deg,transparent 20deg 30deg,rgba(0,0,0,.1) 30deg 40deg,transparent 40deg 50deg,rgba(0,0,0,.1) 50deg 60deg,transparent 60deg 70deg,rgba(0,0,0,.1) 70deg 80deg,transparent 80deg 90deg,rgba(0,0,0,.1) 90deg 100deg,transparent 100deg 110deg,rgba(0,0,0,.1) 110deg 120deg);opacity:0;pointer-events:none;z-index:1;transition:opacity .5s}.sunburst.active{opacity:1;animation:rotateSunburst 20s linear infinite}@keyframes rotateSunburst{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;overflow:hidden}.confetti{position:absolute;width:10px;height:10px;background:#ff0;opacity:0}.confetti.active{animation:confettiFall 3s ease-out forwards}@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0)}to{opacity:0;transform:translateY(100vh) rotate(720deg)}}@media (max-width: 768px){.app-header{padding:16px 20px}.logo-container{min-height:80px;margin-bottom:24px}.logo-container img{max-height:80px;max-width:300px}.icon-btn{width:42px;height:42px}.display-panel{padding:40px 24px;max-width:calc(100% - 40px)}.name-display{font-size:48px;min-height:80px}.draw-button{padding:16px 48px;font-size:22px}.settings-panel{max-width:100%;right:-100%}.settings-content{padding:24px}.settings-content h2{font-size:28px}}@media (max-width: 480px){.name-display{font-size:36px}.draw-button{padding:14px 36px;font-size:20px}}