:root{font-family:Arial,sans-serif;line-height:1.5;font-weight:400;color:#111;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}::-webkit-scrollbar{width:0px;height:0px}body,h1{margin:0}*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #0f1720;--color-accent: #d4af37;--color-accent-light: #f5ecd6;--color-text: #1a1a1a;--color-text-muted: #6b7280;--color-bg: #fafafa;--color-white: #ffffff;--color-border: #e5e7eb;--color-border-hover: #d1d5db;--color-loader: #1f2937;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .12);--transition-fast: .15s ease;--transition-normal: .25s ease;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-full: 9999px}.config-panel{flex:0 0 42%;background:var(--color-white);overflow-y:auto;display:flex!important;flex-direction:column;border-left:1px solid var(--color-border);min-width:420px;position:relative;height:100vh}.config-panel::-webkit-scrollbar{width:6px}.config-panel::-webkit-scrollbar-track{background:transparent}.config-panel::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px}.config-panel::-webkit-scrollbar-thumb:hover{background:#bbb}.customization-section{padding:24px;border-bottom:1px solid var(--color-border)}.customization-section:last-child{border-bottom:none}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--color-text)}.tab-row{display:flex;gap:8px;padding:20px 24px 16px;background:var(--color-white);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:10}.shank-category-wrap{padding-left:63px;padding-right:24px}.shank-category-row{display:flex;gap:18px;padding:12px 0;margin:0;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap;cursor:grab;touch-action:pan-x;-webkit-overflow-scrolling:touch}.shank-category-row::-webkit-scrollbar{display:none}.shank-category-pill{flex:0 0 calc(33.333% - 12px);position:relative;padding:12px 18px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--color-text);font-weight:600;font-size:13px;cursor:pointer;transition:all .2s ease;min-width:0;text-align:center;scroll-snap-align:start}.shank-category-row.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}.shank-category-pill.active{background:var(--color-white);border-color:#1f2937}.shank-category-pill.active:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #1f2937}.carousel-shell{position:relative;display:flex;align-items:center;overflow:visible}.carousel-shell:before,.carousel-shell:after{content:"";position:absolute;top:0;bottom:0;width:64px;pointer-events:none;z-index:55}.carousel-shell:before{left:0;background:linear-gradient(90deg,var(--color-white, #fff) 70%,transparent)}.carousel-shell:after{right:0;background:linear-gradient(270deg,var(--color-white, #fff) 70%,transparent)}.carousel{display:flex;gap:22px;overflow-x:auto;scroll-behavior:smooth;padding:8px 56px;flex:1;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;touch-action:pan-x}.carousel.is-dragging{cursor:grabbing;scroll-behavior:auto;-webkit-user-select:none;user-select:none}.carousel img{-webkit-user-select:none;user-select:none;pointer-events:none;-webkit-user-drag:none}.carousel *,.carousel.is-dragging *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.carousel::-webkit-scrollbar{display:none}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:9999px;border:1px solid var(--color-border);background:#fffffffa;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);z-index:60;opacity:1;pointer-events:auto;transition:opacity .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease}.carousel-button:hover{background:var(--color-white);border-color:var(--color-border-hover);box-shadow:var(--shadow-md);transform:translateY(-50%) translateY(-2px);color:var(--color-text)}.carousel-button.prev{left:6px}.carousel-button.next{right:6px}.carousel-shell .carousel{padding-left:52px;padding-right:52px}.carousel-shell .shape-grid,.carousel-shell .carat-row,.carousel-shell .setting-row{padding-left:52px!important;padding-right:52px!important}.shape-grid,.carat-row,.setting-row{display:flex;gap:20px;flex-wrap:nowrap;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.shape-grid::-webkit-scrollbar,.carat-row::-webkit-scrollbar,.setting-row::-webkit-scrollbar{display:none}.setting-row{align-items:stretch}.setting-row .band-card{width:124px;min-height:108px;flex-shrink:0}.setting-row .band-image-container{padding:10px}.setting-row .band-label{line-height:1.15}.shape-pill,.carat-pill{padding:10px 14px;border:2px solid var(--color-border);background:var(--color-white);border-radius:var(--radius-lg);font-weight:600;font-size:13px;color:var(--color-text);cursor:pointer;transition:var(--transition-normal);display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;min-width:90px;-webkit-tap-highlight-color:transparent;outline:none}.shape-pill:focus-visible,.carat-pill:focus-visible{outline:1px solid var(--color-border-hover);outline-offset:2px}.shape-pill:active,.carat-pill:active{background:var(--color-white);border-color:var(--color-border);box-shadow:none}.shape-pill.active:active,.carat-pill.active:active{border-color:#000}.shape-pill:hover,.carat-pill:hover{border-color:var(--color-text);background:var(--color-bg)}.shape-pill.active,.carat-pill.active{background:var(--color-white);color:var(--color-text);border-color:#000;border-width:2px;box-shadow:none}.shape-thumb{width:56px;height:40px;display:flex;align-items:center;justify-content:center}.shape-thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}.shape-label{font-size:12px;font-weight:700;line-height:1.2;text-align:center}.shape-pill.disabled,.carat-pill.disabled,.band-card.disabled,.ring-design-card.disabled{opacity:.35;cursor:not-allowed;pointer-events:none;filter:grayscale(1)}.setting-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}.band-card{background:var(--color-white);border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;display:flex;flex-direction:column;overflow:hidden;transition:var(--transition-normal);min-height:110px}.band-card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-md);transform:translateY(-2px)}.band-card.active{border-color:#000;border-width:2px;box-shadow:none}.band-image-container{display:flex;align-items:center;justify-content:center;padding:12px;flex:1}.band-image{width:100%;height:100%;max-height:60px;object-fit:contain}.band-label{padding:8px 4px;text-align:center;font-size:11px;font-weight:600;border-top:1px solid var(--color-border);background:#fdfdfd}.matching-bands-options{display:flex;gap:12px;justify-content:center;padding:8px 0}.matching-bands-options .band-count-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;min-width:110px;height:48px;border-radius:10px;border:1px solid #e9e9e9;background:#fff;color:#111;font-weight:700;cursor:pointer;box-shadow:none;transition:box-shadow .12s ease,transform .08s ease,border-color .12s ease;font-size:14px}.matching-bands-options .band-count-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--color-border-hover)}.matching-bands-options .band-count-btn.active{border-color:#111;box-shadow:0 6px 14px #0000000f;background:#fff;transform:none}.matching-bands-options .band-count-btn:disabled,.matching-bands-options .band-count-btn.disabled{opacity:.5;cursor:not-allowed;background:#f5f5f5;border-color:#e0e0e0;color:#999}.matching-bands-options .band-count-btn:disabled:hover,.matching-bands-options .band-count-btn.disabled:hover{transform:none;box-shadow:none;border-color:#e0e0e0}.metal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.metal-card{background:var(--color-white);border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;display:flex;flex-direction:column;overflow:hidden;transition:var(--transition-normal);min-height:90px}.metal-card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-md);transform:translateY(-2px)}.metal-card.active{border-color:#000;border-width:2px;box-shadow:none}.metal-swatch{height:60px;width:100%}.metal-label{padding:10px 8px;text-align:center;font-size:11px;font-weight:700;color:var(--color-text);background:var(--color-white);border-top:1px solid var(--color-border)}.two-tone-toggle{display:flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none}.two-tone-toggle input[type=checkbox]{display:none}.toggle-slider{position:relative;width:44px;height:24px;background:#ddd;border-radius:24px;transition:background .3s;flex-shrink:0}.toggle-slider:before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .3s}.two-tone-toggle input[type=checkbox]:checked+.toggle-slider{background:#000}.two-tone-toggle input[type=checkbox]:checked+.toggle-slider:before{transform:translate(20px)}.toggle-label{font-size:13px;font-weight:600;color:var(--color-text)}.quality-grid{display:grid;gap:12px}.quality-field{display:flex;flex-direction:column;gap:6px}.quality-options{display:flex;flex-wrap:wrap;gap:10px}.quality-label{font-size:11px;font-weight:700;color:var(--color-text);text-transform:uppercase;letter-spacing:.5px}.gemstone-slots{display:flex;flex-direction:column}.gemstone-slot{display:flex;flex-direction:column;gap:10px;padding:14px 0}.gemstone-slot:first-child{padding-top:0}.gemstone-slot:not(:last-child){border-bottom:1px solid var(--color-border)}.gemstone-slot-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.gemstone-slot-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--color-text)}.gemstone-slot-badge{font-size:11px;font-weight:600;color:var(--color-text-muted);background:#f3f4f6;padding:2px 9px;border-radius:var(--radius-full);line-height:1.7;white-space:nowrap}.gem-chip-row{display:flex;gap:8px;flex-wrap:wrap}.gem-chip{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:none;padding:2px;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;border-radius:var(--radius-sm)}.gem-chip:focus-visible{outline:1px solid var(--color-border-hover);outline-offset:2px}.gem-chip-circle{width:54px;height:54px;border-radius:999px;border:2px solid transparent;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.gem-chip:hover .gem-chip-circle{border-color:#9ca3af;transform:translateY(-2px);box-shadow:0 4px 10px #0000001a}.gem-chip.active .gem-chip-circle{border-color:#111;box-shadow:0 0 0 2px #00000014,0 4px 12px #0000001a;transform:translateY(-1px)}.gem-chip.active:hover .gem-chip-circle{border-color:#111}.gem-chip.gem-diamond .gem-chip-circle,.gem-chip.gem-natural .gem-chip-circle{background:linear-gradient(145deg,#f0f8ff,#dbeeff 45%,#b0d8ff 80%,#cde7ff)}.gem-chip.gem-ruby .gem-chip-circle{background:linear-gradient(145deg,#fff1f2,#fca5a5 35%,#ef4444 68%,#b91c1c)}.gem-chip.gem-emerald .gem-chip-circle{background:linear-gradient(145deg,#f0fdf4,#86efac 35%,#22c55e 68%,#15803d)}.gem-chip.gem-sapphire .gem-chip-circle{background:linear-gradient(145deg,#eff6ff,#93c5fd 35%,#3b82f6 68%,#1d4ed8)}.gem-chip-image{width:100%;height:100%;object-fit:cover}.gem-chip-name{font-size:10px;font-weight:600;color:var(--color-text-muted);text-align:center;line-height:1.2;white-space:nowrap;text-transform:capitalize}.gem-chip.active .gem-chip-name{color:var(--color-text)}.ring-design-card{width:167px;height:107px;background:var(--color-white);border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;display:flex;flex-direction:column;overflow:hidden;transition:var(--transition-normal);flex-shrink:0;padding:8px}.ring-design-card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-md);transform:translateY(-2px)}.ring-design-card.active{border-color:#000;border-width:2px;box-shadow:none}.ring-image-container{display:flex;align-items:center;justify-content:center;background:#fff;padding:8px;flex:1}.ring-image{width:100%;height:60px;object-fit:contain}.ring-label{padding:0 6px;text-align:center;font-size:11px;font-weight:600;background:#fff;border-top:1px solid var(--color-border)}@media(max-width:1024px){.config-panel{min-width:100%;height:100dvh;min-height:100dvh;flex:1 1 auto}}@media(max-width:640px){.customization-section{padding:10px 12px}.gemstone-slot{gap:8px;padding:10px 0}.gem-chip-row{gap:6px}.gem-chip-circle{width:46px;height:46px}.gem-chip-name{font-size:9px}.gemstone-slot-badge{font-size:10px;padding:2px 8px}.section-title{font-size:11px;letter-spacing:.4px}.section-header{margin-bottom:12px}.shank-category-wrap{padding-left:38px;padding-right:12px}.shank-category-row{gap:8px;padding:8px 0}.shank-category-pill{padding:8px 10px;font-size:11px;min-width:0}.carousel-shell:before,.carousel-shell:after{width:44px}.carousel-button{width:28px;height:28px;font-size:13px}.carousel-button.prev{left:4px}.carousel-button.next{right:4px}.carousel{gap:10px;padding:6px 30px}.carousel-shell .carousel{padding-left:34px;padding-right:34px}.ring-design-card{width:128px;height:84px;padding:5px}.ring-image-container{padding:6px}.ring-image{height:44px}.ring-label{font-size:9px;padding:0 4px}.shape-grid,.carat-row,.setting-row{gap:8px}.setting-row .band-card{width:104px;min-height:86px}.setting-row .band-image-container{padding:7px}.setting-row .band-image{max-height:42px}.setting-row .band-label{font-size:9px;padding:5px 3px}.shape-pill,.carat-pill{min-width:68px;padding:6px 8px;font-size:11px;gap:6px}.shape-thumb{width:40px;height:28px}.shape-label{font-size:10px}.band-card{min-height:92px}.band-image-container{padding:8px}.band-image{max-height:48px}.band-label{font-size:10px;padding:6px 4px}.matching-bands-options{gap:6px;padding:6px 0}.quality-options{gap:8px}.matching-bands-options .band-count-btn{min-width:72px;height:34px;padding:6px 8px;font-size:11px;border-radius:8px}.metal-grid{grid-template-columns:repeat(3,1fr);gap:8px}.metal-card{min-height:72px}.metal-swatch{height:46px}.metal-label{font-size:10px;padding:6px 4px}.toggle-slider{width:38px;height:20px}.toggle-slider:before{width:14px;height:14px}.two-tone-toggle input[type=checkbox]:checked+.toggle-slider:before{transform:translate(18px)}.toggle-label{font-size:11px}.matching-bands-options{flex-wrap:wrap}}.panel-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6;opacity:1;pointer-events:auto;transition:opacity .2s ease;z-index:200}.panel-loader.visible{display:flex;opacity:1;pointer-events:auto}.panel-loader.hidden{opacity:0;pointer-events:none}.dot-breath{width:14px;height:14px;border-radius:999px;background:var(--color-loader);border:none;box-shadow:0 0 #1f293759;animation:dot-breath 1.2s ease-in-out infinite;will-change:transform,opacity,box-shadow}@keyframes dot-breath{0%,to{transform:scale(.9);opacity:.65;box-shadow:0 0 #1f29372e}50%{transform:scale(1.25);opacity:1;box-shadow:0 0 0 12px #1f293700}}