.diypet-customizer{--ink:#24322c;--sand:#f5f0e9;--line:#ded7cd;--accent:#b47e70;max-width:1240px;margin:40px auto;padding:28px;border:1px solid var(--line);border-radius:28px;background:#fffdfa;color:var(--ink);font-family:inherit}.diy-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.diy-head h1{margin:2px 0 8px;font-size:clamp(28px,4vw,46px);letter-spacing:-.04em}.diy-head p{margin:0;color:#6b746e}.diy-kicker{font-size:11px!important;letter-spacing:.16em;color:var(--accent)!important}.diy-total{text-align:right;border-left:1px solid var(--line);padding-left:28px;white-space:nowrap}.diy-total span{display:block;font-size:13px;color:#6b746e}.diy-total strong{font-size:29px}.diy-targets{display:flex;gap:10px;margin:28px 0 22px}.diy-targets button,.diy-actions button{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:10px 16px;cursor:pointer}.diy-targets .is-active{background:var(--ink);color:#fff;border-color:var(--ink)}.diy-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;border:1px solid var(--line);border-radius:22px;overflow:hidden}.diy-preview-wrap{min-height:600px;background:radial-gradient(circle at 50% 45%,#fff 0 28%,#f7f1e9 29% 61%,#ece3d8 62% 63%,#fffdfa 64%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px}.diy-preview{position:relative;width:min(460px,80vw);aspect-ratio:1;border:15px solid rgba(177,153,125,.24);border-radius:50%;box-shadow:inset 0 0 34px rgba(78,57,36,.12),0 16px 35px rgba(54,40,28,.1);touch-action:none}.diy-preview>p{position:absolute;left:50%;top:50%;width:220px;transform:translate(-50%,-50%);text-align:center;color:#8b867f;line-height:1.6}.diy-bead{--r:calc(min(460px, 80vw) * -.38);position:absolute;top:50%;left:50%;width:clamp(30px,8vw,55px);aspect-ratio:1;border:0;border-radius:50%;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(var(--r)) rotate(calc(var(--angle) * -1));background-color:var(--color);background-size:cover;background-position:center;box-shadow:inset -5px -5px 9px rgba(0,0,0,.12),inset 5px 5px 8px rgba(255,255,255,.65),0 3px 5px rgba(0,0,0,.14);cursor:grab;z-index:1}.diy-bead:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.diy-bead.is-dragging{cursor:grabbing;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(var(--r)) rotate(calc(var(--angle) * -1)) scale(1.16);z-index:3}.diy-bead--charm{border-radius:35% 35% 45% 45%}.diy-hint{margin:22px 0 14px;font-size:13px;color:#6b746e}.diy-actions{display:flex;gap:8px}.diy-actions button{font-size:13px}.diy-catalog{background:#fff;padding:22px;border-left:1px solid var(--line)}.diy-catalog-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:15px}.diy-catalog-head h2{margin:0;font-size:20px}.diy-catalog-head span{font-size:13px;color:#6b746e}.diy-catalog-list{display:grid;gap:12px;max-height:535px;overflow:auto;padding:15px 2px}.diy-component-card{display:grid;grid-template-columns:68px 1fr auto;align-items:center;gap:12px;padding:9px;border:1px solid #eee7df;border-radius:14px}.diy-component-image,.diy-component-image img,.diy-component-placeholder{display:block;width:68px;height:68px;border-radius:12px;object-fit:cover}.diy-component-placeholder{box-shadow:inset -6px -6px 10px rgba(0,0,0,.12),inset 6px 6px 10px rgba(255,255,255,.7)}.diy-component-info h3{font-size:14px;margin:0 0 3px}.diy-component-info p{margin:0 0 4px;font-size:12px;color:#74746e}.diy-component-info strong{font-size:14px}.diy-component-card button{border:0;background:var(--sand);border-radius:9px;padding:8px 10px;color:var(--ink);cursor:pointer}.diy-component-card button:disabled{opacity:.55;cursor:not-allowed}.diy-empty-catalog,.diy-loading{color:#73746f;line-height:1.6;font-size:14px}.diy-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px}.diy-footer p{margin:0;color:#6b746e;font-size:13px}.diy-primary{border:0;border-radius:999px;background:var(--ink);color:#fff;padding:15px 24px;font-weight:700;opacity:.6;cursor:not-allowed}@media(max-width:800px){.diypet-customizer{margin:15px 0;padding:18px;border-radius:18px}.diy-head{display:block}.diy-total{border:0;padding:16px 0 0;text-align:left}.diy-layout{grid-template-columns:1fr}.diy-preview-wrap{min-height:430px}.diy-catalog{border-left:0;border-top:1px solid var(--line)}.diy-catalog-list{max-height:none}.diy-footer{display:block}.diy-primary{margin-top:14px;width:100%}}