*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #8B7355;--primary-hover: #7A6449;--primary-dark: #6A543D;--bg-main: #F1F1EE;--secondary-color: #F5F1ED;--text-dark: #333;--text-light: #666;--text-muted: #999;--border-color: #e0e0e0;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--shadow-md: 0 4px 16px rgba(0, 0, 0, .12);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .16);--shadow-3d: 0 10px 30px rgba(0, 0, 0, .15), 0 6px 12px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .08)}body{font-family:Prata,serif;background-image:url(/assets/ui/background.jpg);background-size:cover;background-position:center;background-attachment:fixed;color:var(--text-dark);min-height:100vh;overflow-x:hidden}.main-content{display:flex;flex-direction:row;min-height:100vh;width:100%;overflow:hidden;padding:20px;box-sizing:border-box;gap:24px}.product-display{flex:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:16px 40px 40px;position:relative;gap:24px;width:100%}.selection-panel{flex:0 1 500px;width:500px;max-width:500px;min-width:33.33%;margin-left:0;background:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;box-shadow:0 10px 30px #00000012;display:flex;flex-direction:column;overflow:hidden;font-size:12px}.instructions-badge{position:relative;z-index:10}.instructions-btn{display:flex;align-items:center;cursor:pointer;border:none;background:transparent;padding:8px 14px;height:36px;width:auto;gap:8px;font-family:Prata,serif;transition:all .3s ease}.instructions-btn:hover{transform:translateY(-2px)}.instructions-btn .badge-text{font-size:14px;font-weight:500;color:#333}.instructions-btn .badge-icon{width:20px;height:20px;filter:brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%)}.display-info-badges{display:flex;flex-direction:row;gap:12px;z-index:10;flex-wrap:wrap;justify-content:flex-end}.info-badge{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:24px;background:#c9b388;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;width:150px;height:36px;box-sizing:border-box}.badge-icon{width:24px;height:24px;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none;-ms-user-drag:none;user-drag:none}.badge-content{display:flex;flex-direction:column;gap:4px;flex:1}.badge-label{font-size:9px;font-weight:400;color:#333;line-height:1}.badge-value{font-size:11px;font-weight:600;color:#333;line-height:1.2}.size-badge{background:#c9b388;width:180px}.size-badge .badge-value{color:#fff}.price-badge{background:#c9b388;width:100px}.bracelet-container{width:350px;max-width:100%;margin:0 auto;aspect-ratio:1;background:url(/assets/ui/tray2.JPEG);background-size:contain;background-position:center center;background-repeat:no-repeat;border-radius:0;box-shadow:0 15px 45px #00000026,0 8px 20px #0000001a,0 3px 8px #00000014;position:relative}#bracelet-svg{width:100%;height:100%;transform:translate(-1%,-1.5%)}#empty-hint{font-family:Prata,serif;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}#bracelet-circle circle{fill:none;stroke:#adacac;stroke-width:2;stroke-dasharray:5,5}.bead{cursor:grab;transition:filter .2s ease,opacity .2s ease;transform-origin:center center}.bead:hover{filter:brightness(1.05) contrast(1.02)}.bead:active{cursor:grabbing}.bead.dragging{opacity:.8;filter:brightness(1.1) drop-shadow(0 8px 16px rgba(0,0,0,.3));transition:none}.bead-flying{pointer-events:none;animation:beadEntry .42s cubic-bezier(.22,1,.36,1) forwards}@keyframes beadEntry{0%{opacity:0;transform:translateY(40px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}.bead-delete-hint{animation:none}.bead image,#shadows-layer circle,#highlights-layer ellipse,#highlights-layer .delete-btn-group{transition:cx 1.86s cubic-bezier(.33,1,.68,1),cy 1.86s cubic-bezier(.33,1,.68,1),x 1.86s cubic-bezier(.33,1,.68,1),y 1.86s cubic-bezier(.33,1,.68,1)}.bead.dragging image,.bead.dragging~*{transition:none!important}.display-actions{display:flex;gap:60px}.btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 32px;border:none;border-radius:24px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);font-family:Prata,serif;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:active:after{width:300px;height:300px}.btn-reset{background:#b9a77c;color:#fff;border:1px solid #B9A77C;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-reset:hover{background:#a8966b;transform:translateY(-2px);box-shadow:0 4px 12px #b9a77c4d}.btn-finish{background:#ceb986;color:#fff}.btn-finish:hover{background:#c0a971;transform:translateY(-2px);box-shadow:0 4px 12px #ceb9864d}.tagline{color:#ffffffe6;font-size:22px;font-style:italic;text-shadow:0 1px 3px rgba(0,0,0,.3);letter-spacing:.3px}.panel-search-header{position:sticky;top:0;z-index:100;padding:12px 16px;background:#fffffff2;border-bottom:1px solid rgba(0,0,0,.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.search-container{position:relative;width:100%}.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none;width:14px;height:14px}#search-input{width:100%;padding:8px 10px 8px 30px;border:1px solid #C9C9C9;border-radius:16px;font-size:12px;font-family:Prata,serif;transition:all .3s ease}#search-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #8b73551a}.panel-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px}.panel-body::-webkit-scrollbar{width:8px}.panel-body::-webkit-scrollbar-track{background:transparent}.panel-body::-webkit-scrollbar-thumb{background:#0000001a;border-radius:4px}.panel-body::-webkit-scrollbar-thumb:hover{background:#0003}.section{margin-bottom:24px}.section:last-child{margin-bottom:0}.section-title{font-size:13px;font-weight:600;color:var(--text-dark);margin-bottom:12px;padding-bottom:6px;border-bottom:2px solid var(--primary-color)}.section-in-use{margin-bottom:20px}.in-use-container{display:flex;gap:12px;align-items:stretch}.in-use-title-box{flex:0 0 120px;width:120px;background:#cec5a3;padding:12px 6px;border-radius:10px;display:flex;flex-direction:column;align-items:flex-start}.in-use-title-box .section-title{margin:0;padding:0;border:none;white-space:nowrap}.in-use-content-box{flex:1;background:#fff;border:1px solid #F2F2F2;padding:8px 6px;border-radius:10px;height:120px;overflow-y:auto;overflow-x:hidden}.in-use-content-box::-webkit-scrollbar{width:6px}.in-use-content-box::-webkit-scrollbar-track{background:transparent}.in-use-content-box::-webkit-scrollbar-thumb{background:#0000001a;border-radius:3px}.in-use-content-box::-webkit-scrollbar-thumb:hover{background:#0003}.beads-in-use-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:4px 2px;max-height:none;overflow-y:visible}.beads-in-use-grid .bead-card{width:100%;flex:none}.in-use-content-box .empty-state{text-align:center;padding:20px;color:var(--text-muted);font-size:11px}.empty-state{text-align:center;padding:20px;color:var(--text-muted);font-size:11px;display:none}.empty-state.show{display:block}.crystal-container{display:flex;gap:12px;height:350px;max-height:350px}.crystal-sidebar-box{flex:0 0 120px;width:120px;background:#f2f2f2;padding:12px 6px;border-radius:10px;display:flex;flex-direction:column}.crystal-sidebar-box .section-title{margin:0 0 12px;padding:0;border-bottom:none;font-size:13px}.crystal-content-box{flex:1;background:#fff;border:1px solid #F2F2F2;padding:8px 6px;border-radius:10px;overflow:hidden}.crystal-content-box .detail-view{height:100%;padding:4px 2px}.master-detail-container{display:flex;gap:12px;min-height:300px}.master-list{flex:1;overflow-y:auto;border-right:none;padding-right:0}.crystal-sidebar-box .master-list{border:none;padding:0}.master-list::-webkit-scrollbar{width:4px}.master-list::-webkit-scrollbar-thumb{background:#0000001a;border-radius:2px}.master-item{padding:8px 6px;border-radius:6px;cursor:pointer;font-size:11px;color:var(--text-light);background:transparent;border:none;font-family:Prata,serif;transition:all .3s ease;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;margin-bottom:3px}.master-item:hover{background:var(--secondary-color);color:var(--primary-color)}.master-item.active{background:#fff;color:var(--text-dark);font-weight:600}.detail-view{flex:1;overflow-y:auto;padding:4px 2px}.detail-view::-webkit-scrollbar{width:6px}.detail-view::-webkit-scrollbar-thumb{background:#0000001a;border-radius:3px}.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:4px 2px}.detail-grid .bead-card{width:100%;flex:none;margin:0}.beads-display{display:none}.loading{text-align:center;padding:40px;color:var(--text-muted);font-size:14px}.bead-card{flex:0 0 auto;width:64px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px;border-radius:8px;background:#fff;border:1px solid #f0f0f0;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.bead-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s}.bead-card:hover:before{left:100%}.bead-card:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 4px 12px #0000001a;border-color:var(--primary-color)}.bead-card:active{transform:translateY(-2px) scale(.98);transition:all .1s ease}.bead-image{width:38px;height:38px;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.bead-name{font-size:8px;text-align:center;color:var(--text-dark);font-weight:500;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.bead-details{display:flex;justify-content:center;gap:3px;font-size:8px;color:var(--text-muted)}.bead-size{color:var(--text-light)}.bead-price{color:var(--primary-dark);font-weight:600}.bead-card-in-use{position:relative;width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#fff;border:1px solid #f0f0f0;cursor:default;transition:all .3s ease;overflow:hidden}.bead-card-in-use:hover{transform:translateY(-2px);box-shadow:0 2px 8px #0000001a;border-color:var(--primary-color)}.bead-card-in-use .bead-image{width:80%;height:80%;object-fit:contain}.master-item-with-icon{display:flex;align-items:center;gap:6px;padding:8px 6px}.master-item-icon{font-size:14px;line-height:1;flex-shrink:0;width:12px;height:12px;display:flex;align-items:center;justify-content:center}.master-item-icon-img{width:100%;height:100%;object-fit:cover;border-radius:4px;pointer-events:none;-webkit-user-select:none;user-select:none}.master-item-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-modal,.instructions-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:none;align-items:center;justify-content:center}.preview-modal.active,.instructions-modal.active{display:flex}.modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal-content{position:relative;z-index:1;background:#fff;border-radius:24px;padding:32px;max-width:400px;box-shadow:0 20px 60px #0003,0 10px 30px #00000026,0 5px 15px #0000001a;animation:modalSlideIn .3s ease}@keyframes modalSlideIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}#preview-image{width:300px;height:300px;object-fit:contain;margin-bottom:16px}.modal-info{text-align:center}.modal-info h3{font-size:18px;margin-bottom:8px;color:var(--text-dark)}.modal-info p{font-size:14px;color:var(--text-light)}.instructions-content{max-width:600px;max-height:80vh;overflow-y:auto}.modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border:none;background:#f0f0f0;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;transition:all .2s ease;color:#666}.modal-close:hover{background:#e0e0e0;transform:rotate(90deg)}.instructions-content h2{font-size:24px;margin-bottom:20px;color:var(--text-dark)}.instructions-content h3{font-size:18px;margin-top:20px;margin-bottom:12px;color:var(--text-dark)}.instructions-text{color:var(--text-dark);line-height:1.6}.instructions-text ol{margin-left:20px;margin-bottom:20px}.instructions-text li{margin-bottom:12px}.instructions-text p{margin-bottom:10px}.instructions-text strong{color:#c9b388}.display-top-row{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}@media(max-width:1024px){.main-content{flex-direction:column;padding:12px;gap:12px;min-height:auto}.product-display{min-height:auto;padding:24px}.bracelet-container{max-width:400px}.display-top-row{flex-direction:column;align-items:flex-start;gap:12px}.display-info-badges{width:100%;justify-content:flex-start}.selection-panel{flex:1 1 auto;width:100%;max-width:100%;min-width:0;min-height:auto;border-radius:20px}}@media(max-width:768px){.main-content{padding:0;gap:4px;height:100vh;min-height:100vh}.product-display{padding:12px;flex:0 0 58vh;gap:12px;min-height:58vh;max-height:58vh;display:flex;flex-direction:column;justify-content:space-between}.display-top-row{flex-direction:row;justify-content:space-between;align-items:center;gap:6px;margin-bottom:0;flex-shrink:0}.instructions-badge{flex-shrink:0}.instructions-btn{padding:6px;height:28px;width:28px;min-height:28px;border-radius:50%;background:#ffffff4d}.instructions-btn .badge-text{display:none}.instructions-btn .badge-icon{width:16px;height:16px}.display-info-badges{width:auto;justify-content:flex-end;gap:4px;flex-wrap:nowrap}.info-badge{padding:4px 6px;font-size:10px;width:auto;min-width:75px;height:auto;min-height:28px}.size-badge{width:auto;min-width:110px}.price-badge{width:auto;min-width:65px}.badge-icon{width:16px;height:16px}.badge-label{font-size:7px;line-height:1.1}.badge-value{font-size:9px;line-height:1.2;word-break:break-word}.bracelet-container{width:min(80vw,320px);max-width:320px;aspect-ratio:1;height:auto;margin:0 auto;flex:0 0 auto;display:flex;align-items:center;justify-content:center}.display-actions{gap:16px;margin-top:0;flex-shrink:0}.btn{padding:8px 24px;font-size:12px;height:auto;min-height:36px;line-height:1.2}.tagline{font-size:11px;margin-top:0;line-height:1.3;flex-shrink:0}.selection-panel{flex:0 0 40vh;width:100%;max-width:100%;min-width:0;border-radius:12px;min-height:40vh;max-height:40vh;overflow:hidden}.panel-search-header{padding:8px 10px;flex-shrink:0}#search-input{font-size:11px;padding:6px 8px 6px 28px;height:32px}.search-icon{width:14px;height:14px;left:10px}.panel-body{padding:8px 10px;flex:1;display:flex;flex-direction:column;gap:8px;overflow:hidden}.section-title{font-size:10px;margin-bottom:6px;padding-bottom:3px;line-height:1.2}.section{margin-bottom:8px}.section-in-use{display:none}.detail-grid,.beads-in-use-grid{grid-template-columns:repeat(3,1fr);gap:4px}.in-use-container{gap:8px}.in-use-title-box{flex:0 0 60px;width:60px;padding:6px 3px}.in-use-content-box{height:80px;padding:5px}.crystal-container{flex:1 1 auto;min-height:0;gap:8px}.crystal-sidebar-box{flex:0 0 118px;width:118px;padding:4px 2px}.crystal-sidebar-box .section-title{font-size:10px;margin-bottom:8px}.crystal-content-box{padding:5px}.master-item{padding:5px 3px;font-size:11px;margin-bottom:2px}.master-item-in-use{position:sticky;top:0;z-index:2;min-height:42px;padding:10px 6px;font-size:12px}.bead-card{width:100%;padding:4px;gap:2px;border-radius:6px}.bead-image{width:100%;height:auto;max-height:42px;object-fit:contain}.bead-name{font-size:9px;line-height:1.1;max-height:18px;overflow:hidden}.bead-details{font-size:7px;gap:2px}}