:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:#f5f7fa;min-height:100vh;margin:0;display:flex;justify-content:center;align-items:center;padding:20px}#root{width:100%;max-width:1200px;margin:0 auto}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:#f5f7fa;min-height:100vh;height:100vh;margin:0;display:flex;justify-content:center;align-items:center;padding:0}.container{background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026;overflow:hidden;max-width:900px;width:100%;margin:auto}.header{background:#fff;color:#2c3e50;padding:10px;text-align:center;border-bottom:1px solid #e9ecef;transition:all .3s ease}.header h1{font-size:1.2rem;margin-bottom:4px}.header p{opacity:.8;font-size:.9rem}.main-content{display:flex;align-items:stretch;min-height:350px}.controls-panel{flex:1;padding:10px;background:#f8f9fa;border-right:1px solid #e9ecef}.preview-panel{flex:1;padding:10px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.control-group{margin-bottom:10px}.control-group label{display:block;font-weight:600;margin-bottom:4px;color:#2c3e50;font-size:.95rem}.input-group{display:flex;gap:6px;margin-bottom:6px}input[type=text],input[type=color]{padding:10px;border:2px solid #ddd;border-radius:8px;font-size:14px;transition:all .3s ease}input[type=text]{flex:1;text-transform:uppercase}input[type=color]{width:50px;height:42px;cursor:pointer;border-radius:8px}input:focus{outline:none;border-color:#007bff;box-shadow:0 0 8px #007bff40}.preset-colors{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}.preset-color{width:30px;height:30px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:all .3s ease}.preset-color:hover{transform:scale(1.05);border-color:#007bff}.preset-color.active{border-color:#007bff;box-shadow:0 0 10px #007bff4d}.coating-options,.printing-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}.coating-option,.printing-option{padding:8px;border:2px solid #ddd;border-radius:8px;cursor:pointer;text-align:center;transition:all .3s ease;background:#fff;font-size:.85rem;color:#222!important}.coating-option:hover,.printing-option:hover{border-color:#007bff;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.coating-option.active,.printing-option.active{border-color:#007bff!important;background:#007bff!important;color:#fff!important}.coating-option.active strong,.coating-option.active small,.printing-option.active strong,.printing-option.active small{color:#fff!important}.slider{-webkit-appearance:none;width:100%;height:8px;border-radius:4px;background:#ddd;outline:none;transition:all .3s ease}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#007bff;cursor:pointer;box-shadow:0 2px 6px #0003}.slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#007bff;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.info-display{margin-top:10px;padding:8px;background:#e9f4ff;border-radius:8px;border-left:4px solid #007bff;font-size:.85rem}.info-item{display:flex;justify-content:space-between;margin-bottom:6px}.info-label{font-weight:600;color:#2c3e50}.info-value{color:#007bff;font-weight:500}.company-name{margin-top:8px;text-align:center;font-size:.9rem;font-weight:600;color:#2c3e50;padding:6px}.note-text{font-size:.8rem;color:#666;margin-bottom:10px;font-style:italic}.opacity-display{display:flex;justify-content:space-between;font-size:.8rem;color:#666;margin-top:6px}.cosmetic-container{width:180px;height:260px;transition:all .5s ease;filter:drop-shadow(0 10px 25px rgba(0,0,0,.15))}.container-svg{width:100%;height:100%}.container-body{transition:all .5s ease}@media (max-width: 768px){.main-content{flex-direction:column}.header h1{font-size:1.4rem}.cosmetic-container{width:200px;height:280px}.controls-panel{border-right:none;border-bottom:1px solid #e9ecef}}.animate-pulse{animation:pulse 1.5s ease-in-out}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.glass-reflection{animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%,to{opacity:.3}50%{opacity:.7}}.floating-home-btn{position:fixed;bottom:32px;right:32px;z-index:9999;background:#fff;border-radius:28px;box-shadow:0 4px 16px #0000001f;height:56px;display:flex;align-items:center;gap:12px;padding:0 20px 0 16px;font-weight:600;color:#333;text-decoration:none;transition:box-shadow .2s,background .2s;cursor:pointer;border:none}.floating-home-btn:hover{background:#f5f5f5;box-shadow:0 8px 24px #0000002e}.floating-home-btn svg{display:block}.floating-home-text{font-size:16px;letter-spacing:.01em}@media (max-width: 600px){.floating-home-text{display:none}.floating-home-btn{padding:0 16px;border-radius:50%;width:56px;justify-content:center}}