.app-container{display:flex;flex-direction:column;width:100%;height:100vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:#333;background-color:#fff}.canvas-container{width:100%;max-height:400px;height:35vh;background-color:#f9f9f9;position:relative;order:1;display:block;flex:none}.ui-panel{padding:20px 20px 50px;background:#fff;order:2;display:flex;flex-direction:column;gap:20px;height:auto;overflow:visible}.input-group{display:flex;flex-direction:column;gap:8px;position:relative}.input-group label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#888;display:flex;align-items:center;gap:8px}.input-group input{padding:12px;border:1px solid #ddd;font-size:1rem;border-radius:4px}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.option-button{padding:12px;border:1px solid #ddd;background:#fff;cursor:pointer;text-align:center;font-size:.95rem;border-radius:4px;transition:all .2s;color:#555}.option-button:hover{border-color:#999}.option-button.selected{background-color:#888;color:#fff;border-color:#888;font-weight:600}.material-grid{display:grid;gap:12px;margin-top:5px;grid-template-columns:repeat(4,1fr)}.material-icon{width:100%;aspect-ratio:1 / 1;border-radius:50%;border:1px solid #eee;cursor:pointer;transition:transform .2s;padding:0}.material-icon.selected{border:2px solid #222;transform:scale(1.05)}.selected-metal-name{margin-top:8px;font-size:.9rem;color:#333;text-align:center;font-weight:700}.action-button{border:none;padding:15px;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;cursor:pointer;width:100%;border-radius:4px;transition:background .2s}.btn-black{background:#222;color:#fff}.btn-black:hover{background:#444}.btn-black:disabled{background:#ccc;cursor:default}.btn-cart{font-size:1.1rem;padding:18px}.btn-green{background:#28a745;color:#fff}.btn-red{background:#d9534f;color:#fff}.price-summary-container{margin-top:10px;padding-top:10px;border-top:1px solid #eee;text-align:center}.summary-text{font-size:.85rem;color:#666;margin-bottom:5px;text-transform:capitalize}.summary-subtext{font-size:.75rem;color:#999;font-style:italic;margin-bottom:10px}.price-tag{font-size:1.8rem;font-weight:700;color:#222}.tooltip-icon{display:inline-flex;justify-content:center;align-items:center;width:16px;height:16px;border-radius:50%;background:#ccc;color:#fff;font-size:10px;cursor:pointer;position:relative}.tooltip-popup{display:none;position:absolute;bottom:130%;left:0;width:250px;padding:15px;background:#333;color:#fff;font-size:.85rem;line-height:1.4;border-radius:6px;z-index:1000;text-transform:none;font-weight:400;box-shadow:0 4px 15px #00000040}.tooltip-icon:hover .tooltip-popup,.tooltip-icon:active .tooltip-popup{display:block}.tooltip-popup a{color:#4da6ff;text-decoration:underline}.loading-overlay-container{position:absolute;inset:0;background:#ffffffb3;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center}.spinner{display:inline-block;position:relative;width:80px;height:80px}.spinner div{position:absolute;width:6px;height:6px;background:#333;border-radius:50%;animation:spinner 1.2s linear infinite}.spinner div:nth-child(1){animation-delay:0s;top:37px;left:66px}.spinner div:nth-child(2){animation-delay:-.1s;top:22px;left:62px}.spinner div:nth-child(3){animation-delay:-.2s;top:11px;left:52px}.spinner div:nth-child(4){animation-delay:-.3s;top:7px;left:37px}.spinner div:nth-child(5){animation-delay:-.4s;top:11px;left:22px}.spinner div:nth-child(6){animation-delay:-.5s;top:22px;left:11px}.spinner div:nth-child(7){animation-delay:-.6s;top:37px;left:7px}.spinner div:nth-child(8){animation-delay:-.7s;top:52px;left:11px}.spinner div:nth-child(9){animation-delay:-.8s;top:62px;left:22px}.spinner div:nth-child(10){animation-delay:-.9s;top:66px;left:37px}.spinner div:nth-child(11){animation-delay:-1s;top:62px;left:52px}.spinner div:nth-child(12){animation-delay:-1.1s;top:52px;left:62px}@keyframes spinner{0%,20%,80%,to{transform:scale(1)}50%{transform:scale(1.5)}}.loading-text{margin-top:15px;font-weight:700;text-transform:uppercase;font-size:.9rem;letter-spacing:1px}@media(min-width:600px)and (max-width:1023px){.material-grid{grid-template-columns:repeat(6,1fr)}.app-container{height:auto;min-height:0;overflow-y:visible}.canvas-container{height:450px!important;flex:none}.ui-panel{height:auto;padding-bottom:20px}}@media(min-width:1024px){.app-container{flex-direction:row-reverse;height:auto;min-height:100vh;max-width:100%;margin:0 auto}.canvas-container{flex:1.5;height:900px!important;max-height:none!important;order:1}.ui-panel{flex:1;max-width:380px;height:1200px!important;order:2;overflow-y:auto;box-shadow:-5px 0 15px #0000000d;gap:12px;padding:20px 20px 60px}.material-grid{grid-template-columns:repeat(4,1fr);gap:6px}.material-icon{transform:scale(.9)}.selected-metal-name{font-size:.8rem;margin-top:4px}.input-group label{font-size:.75rem}.input-group input{padding:8px;font-size:.9rem}.option-button{padding:8px;font-size:.85rem}.action-button.btn-black{padding:10px;font-size:.8rem}.summary-text{font-size:.8rem}.price-tag{font-size:1.5rem}}