:root,.theme-light{--bg-stage-1: #faf9f5;--bg-stage-2: #e8eaed;--bg-stage-3: #d2d9dd;--bg-panel: #ffffff;--border: #e6e8ec;--border-strong: #d0d4dc;--text: #1a1c22;--text-muted: #6a6f7a;--text-faint: #9ba0ac;--chip-bg: #f4f5f8;--chip-hover: #eceef2;--chip-active-bg: #1a1c22;--chip-active-text: #ffffff;--chip-active-border: #1a1c22;--input-bg: #f4f5f8;--input-focus-border: #1a1c22;--accent: #1a1c22;--shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 20px rgba(0,0,0,.04)}.layout{display:grid;grid-template-columns:1fr 340px;height:100vh;height:100dvh;color:var(--text)}.stage{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#fffffff5,#ffffff9e 34%,#fff0 64%),radial-gradient(ellipse at 24% 24%,#ffe8c638,#ffe8c600 42%),radial-gradient(ellipse at 84% 72%,#a4b7d629,#a4b7d600 48%),linear-gradient(150deg,var(--bg-stage-1) 0%,var(--bg-stage-2) 48%,var(--bg-stage-3) 100%);min-height:0;min-width:0}.stage>div{position:relative;z-index:1}.stage:before,.stage:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.stage:before{z-index:0;opacity:.08;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%20viewBox='0%200%20180%20180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.78'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='180'%20height='180'%20filter='url(%23n)'%20opacity='0.65'/%3E%3C/svg%3E");background-size:180px 180px}.stage:after{z-index:2;background:radial-gradient(ellipse at 50% 46%,#fff0,#fff0 62%,#2d323c17)}.panel{background:var(--bg-panel);border-left:1px solid var(--border);padding:24px 20px;overflow-y:auto;color:var(--text);box-shadow:var(--shadow)}.panel header{margin-bottom:24px}.panel h1{font-size:16px;margin:0 0 4px;letter-spacing:.5px;color:var(--text)}.panel .sub{font-size:11px;color:var(--text-muted);letter-spacing:.6px;text-transform:uppercase}.panel section{margin-bottom:22px}.panel .label{font-size:11px;color:var(--text-muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:.8px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.chip,.pattern{padding:10px 8px;background:var(--chip-bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;font-family:inherit}.chip:hover,.pattern:hover{background:var(--chip-hover)}.chip.active,.pattern.active{background:var(--chip-active-bg);border-color:var(--chip-active-border);color:var(--chip-active-text)}.pattern{aspect-ratio:1;font-size:22px;display:flex;align-items:center;justify-content:center}.chip-color{display:flex;align-items:center;gap:8px;padding:10px;text-align:left}.chip-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px var(--border)}.chip-color.active .chip-dot{box-shadow:0 0 0 1px #ffffff59}.chip-thumb{width:40px;height:40px;border-radius:50%;flex-shrink:0;background-size:cover;background-position:center;box-shadow:0 0 0 1px var(--border),inset 0 0 6px #00000026}.chip-color.active .chip-thumb{box-shadow:0 0 0 2px #ffffff80,inset 0 0 6px #00000026}.chip-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-input{width:100%;box-sizing:border-box;display:block;padding:10px 12px;background:var(--input-bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;outline:none;font-family:inherit;transition:border-color .15s}.text-input::placeholder{color:var(--text-faint)}.text-input:focus{border-color:var(--input-focus-border)}.field{margin-top:12px}.field:first-child{margin-top:0}.slider{display:flex;align-items:center;gap:10px;margin-top:10px}.slider span{font-size:12px;color:var(--text-muted);min-width:32px}.slider .val{text-align:right}.slider input[type=range]{flex:1;accent-color:var(--accent)}.toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer}.toggle input{accent-color:var(--accent)}.tabs{display:none}.tab{flex:1;padding:10px 4px 12px;background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;color:var(--text-muted);font-size:14px;font-family:inherit;cursor:pointer;transition:color .15s,border-color .15s}.tab.active{color:var(--text);border-bottom-color:var(--accent);font-weight:600}@media (max-width: 900px){.layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(220px,32dvh)}.panel{border-left:none;border-top:1px solid var(--border);padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch}.panel header{margin-bottom:12px}.panel h1{font-size:15px}.panel section{margin-bottom:0}.tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border)}.panel[data-tab=material] section[data-section=material],.panel[data-tab=surface] section[data-section=surface],.panel[data-tab=badge] section[data-section=badge],.panel[data-tab=engrave] section[data-section=engrave]{display:block}.panel section[data-section]{display:none}.panel section[data-section]>.label:first-child{display:none}}@media (max-width: 480px){.panel{padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px))}.chip,.pattern{padding:12px 8px;font-size:14px}.text-input{padding:12px;font-size:15px}}@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px){.layout{grid-template-columns:1fr 280px;grid-template-rows:1fr}.panel{border-left:1px solid var(--border);border-top:none;padding:12px 14px}.panel section{margin-bottom:16px}.panel section[data-section]{display:block}.panel section[data-section]>.label:first-child{display:block}.tabs{display:none}}