:root{--white: #ffffff;--black: #000000;--viewport-background: var(--white);--viewport-primary: #b8b8b8;--panel-background: rgba(255, 255, 255, .3);--panel-border: rgba(255, 255, 255, .5);--panel-heading: #1b1b1b;--panel-subheading: #626262;--scrollbar-thumb: rgba(0,0,0,.1);--divider-color: rgba(0,0,0,.08);--button-selected: var(--black);--button-base: rgba(255, 255, 255, .1);--button-hover-bg: rgba(255, 255, 255, .5);--button-border-glass: rgba(255, 255, 255, .5);--button-disabled: #dcdcdc;--button-disabled-text: #bababa;--button-disabled-bg: rgba(255, 255, 255, .1);--action-btn-border: rgba(0,0,0,.1);--action-btn-border-hover: rgba(0,0,0,.2);--switch-off: #ccc;--switch-knob: var(--white);--overlay-dim: rgba(0,0,0,.4);--popup-bg: var(--white);--popup-text-title: #333333;--popup-text-body: #666666;--tooltip-bg: rgba(0, 0, 0, .8);--tooltip-text: var(--white);--tooltip-error-bg: #d32f2f;--loading-bg: var(--white);--spinner-track: #f3f3f3;--spinner-head: #333333;--border-radius: 12px;--shadow: 0 12px 40px rgba(0,0,0,.12);--shadow-strong: 0 4px 12px rgba(0, 0, 0, .2);--shadow-small: 0 2px 8px rgba(0,0,0,.05);--swatch-inner-shadow: inset 0 0 0 1px rgba(255,255,255,.2)}body{margin:0;overflow:hidden;font-family:Inter,sans-serif;background-color:var(--viewport-background);color:var(--panel-heading)}canvas{display:block;outline:none}#config-ui{position:absolute;top:30px;right:50px;width:400px;max-height:90vh;background:var(--panel-background);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);padding:24px 24px 0;border-radius:var(--border-radius);box-shadow:var(--shadow);z-index:100;transition:transform .3s ease;display:flex;flex-direction:column;border:1px solid var(--panel-border)}#config-ui::-webkit-scrollbar{width:6px}#config-ui::-webkit-scrollbar-track{background:transparent}#config-ui::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:20px}#controls-area{flex-grow:1;overflow-y:auto;padding-right:16px;padding-left:16px;margin-bottom:20px}#controls-area::-webkit-scrollbar{width:4px}#controls-area::-webkit-scrollbar-track{background:transparent}#controls-area::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:20px}.header{margin-bottom:6px}h1{font-size:20px;font-weight:600;margin:0;letter-spacing:-.5px;color:var(--panel-heading)}.subtitle{font-size:12px;color:var(--panel-subheading);margin:4px 0 0}.control-group{margin-bottom:24px}.control-group label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:600;color:var(--panel-subheading);margin-bottom:10px}.seat-btn,.option-btn,.action-btn{font-family:Inter,sans-serif;cursor:pointer;transition:all .2s ease;background:var(--button-base);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--button-border-glass);color:var(--panel-heading);box-shadow:var(--shadow-small);display:flex;align-items:center;justify-content:center}.seat-btn:hover,.option-btn:hover{transform:translateY(-1px);background:var(--button-hover-bg);border-color:var(--button-selected)}.seat-btn.active,.option-btn.active{background:var(--button-selected);color:var(--white);border-color:var(--button-selected);box-shadow:var(--shadow-strong)}.seat-selector{display:flex;gap:10px}.seat-btn{width:40px;height:40px;border-radius:50%;font-weight:400;font-size:14px}.seat-btn.active{font-weight:700}.option-list{display:flex;flex-wrap:wrap;gap:8px}.option-btn{padding:8px 16px;border-radius:20px;font-size:12px;font-weight:500;position:relative}.option-btn.disabled{color:var(--button-disabled-text);background:var(--button-disabled-bg);border-color:transparent;cursor:default;box-shadow:none;pointer-events:auto}.option-btn.disabled:hover:after{content:"Out of Stock";position:absolute;bottom:110%;left:50%;transform:translate(-50%);background:var(--tooltip-bg);color:var(--tooltip-text);padding:4px 8px;border-radius:4px;font-size:10px;white-space:nowrap;z-index:1000;pointer-events:none;animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,5px)}to{opacity:1;transform:translate(-50%)}}.action-btn{width:64px;padding:16px;border-radius:32px;border-color:var(--action-btn-border);font-weight:600;font-size:13px;gap:8px}.action-btn:hover{border-color:var(--action-btn-border-hover);transform:translateY(-1px)}.action-btn .icon{font-size:16px}.switch{position:relative;display:inline-block;width:44px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--switch-off);transition:.4s;border-radius:34px}.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:var(--switch-knob);transition:.4s;border-radius:50%;box-shadow:0 1px 3px #0000004d}input:checked+.slider{background-color:var(--button-selected)}input:focus+.slider{box-shadow:0 0 1px var(--button-selected)}input:checked+.slider:before{transform:translate(20px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.material-list{display:grid;grid-template-columns:repeat(auto-fill,30px);gap:18px}.mat-swatch{display:flex;width:30px;height:30px;border-radius:50%!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;background-blend-mode:multiply;cursor:pointer;border:0px solid var(--button-border-glass);transition:all .2s ease;box-shadow:inset 0 0 0 1px #0000001a;position:relative;box-sizing:border-box;overflow:visible}.mat-swatch.disabled{opacity:.4;cursor:pointer;box-shadow:none}.mat-swatch.disabled:hover{transform:none;z-index:1}.mat-swatch.disabled:active:before{content:"Out of Stock";position:absolute;top:130%;left:50%;transform:translate(-50%);background:none;color:var(--button-selected);font-size:8px;font-weight:400;margin-top:4px;padding:6px 10px;border-radius:8px;white-space:nowrap;z-index:1000;pointer-events:none;animation:fadeOut 3s ease-in-out forwards}.mat-swatch:not(.disabled):hover{transform:scale(1.15);z-index:2;border-color:var(--button-selected)}.mat-swatch.active{border-color:var(--button-selected);border-style:solid;border-width:1.5px;box-shadow:var(--shadow-strong);transform:scale(1.1)}.mat-swatch:after{content:attr(data-name);position:absolute;bottom:130%;top:auto;left:50%;transform:translate(-50%);background:var(--tooltip-bg);color:var(--tooltip-text);font-size:8px;font-weight:400;padding:6px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9999;box-shadow:0 4px 6px #00000026}.mat-swatch:hover:after{opacity:1;transform:translate(-50%) translateY(4px)}.divider{height:1px;background:var(--divider-color);margin:18px 0}.popup{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--overlay-dim);display:flex;justify-content:center;align-items:center;z-index:2000;visibility:hidden;opacity:0;transition:opacity .3s ease;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.popup.visible{visibility:visible;opacity:1}.popup-content{background:var(--popup-bg);padding:32px;border-radius:16px;text-align:center;box-shadow:0 10px 25px #0003;max-width:320px;width:90%;transform:scale(.9);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.popup.visible .popup-content{transform:scale(1)}.popup-icon{font-size:32px;margin-bottom:8px}.popup-title{font-size:18px;font-weight:600;margin:0 0 8px;color:var(--popup-text-title)}.popup-message{font-size:14px;color:var(--popup-text-body);margin:0 0 24px;line-height:1.5}.popup-btn{background:var(--viewport-primary);color:var(--white);border:none;padding:10px 24px;border-radius:8px;font-weight:500;cursor:pointer;width:100%}.popup-btn:hover{background:var(--black)}.panel-footer{border-top:1px solid var(--divider-color);padding:20px 0 24px;margin-top:auto;display:flex;justify-content:space-between;align-items:center}.total-price{text-align:left}.price-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:600;color:var(--panel-subheading);display:block;margin-bottom:4px}#currency-symbol{font-size:16px;font-weight:500;color:var(--panel-heading);vertical-align:top;margin-right:2px}#total-price-value{font-size:24px;font-weight:700;color:var(--panel-heading);letter-spacing:-.5px}.save-btn{font-family:Inter,sans-serif;cursor:pointer;transition:all .2s ease;background:var(--button-selected);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--button-border-glass);color:var(--white);box-shadow:var(--shadow-small);padding:10px 20px;border-radius:20px;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center}.save-btn:hover{transform:translateY(-1px);background:var(--button-hover-bg);color:var(--button-selected);border-color:var(--button-selected);box-shadow:var(--shadow-strong)}#watermark{position:fixed;bottom:30px;left:30px;width:180px;height:auto;z-index:10;pointer-events:none;opacity:.8}#loading-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--loading-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:9999;transition:opacity .5s ease-out}.spinner{width:50px;height:50px;border:5px solid var(--spinner-track);border-top:5px solid var(--spinner-head);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.loading-text{font-family:Inter,sans-serif;font-size:12px;font-weight:400;color:var(--panel-subheading)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fade-out{opacity:.5;pointer-events:none}
