.kb-nav-header{position:-webkit-sticky;position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(20px,5vw,64px);background:rgba(13,17,23,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.kb-hero{max-width:1200px;margin:0 auto;padding:clamp(28px,5vw,52px) clamp(20px,5vw,64px) 0}.kb-hero h1{font-size:clamp(1.7rem,4vw,2.4rem);letter-spacing:-1px}.kb-hero p{color:var(--text-dim);margin-top:10px;max-width:60ch}.kb{display:grid;grid-template-columns:1.1fr .95fr;grid-gap:28px;gap:28px;align-items:start;max-width:1200px;margin:0 auto;padding:24px clamp(20px,5vw,64px) 90px}.kb-canvas-wrap{position:-webkit-sticky;position:sticky;top:88px;height:min(62vh,560px);min-height:380px;border-radius:var(--radius);overflow:hidden;position:relative;border:1px solid var(--border);background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.45)}.kb-canvas-wrap canvas{display:block;touch-action:none}.kb-canvas-loading{display:grid;place-items:center;height:100%;color:#6b7280;font-family:var(--mono);font-size:.9rem}.kb-hint{position:absolute;left:0;right:0;bottom:10px;text-align:center;color:#6b7280;font-size:.78rem;pointer-events:none}.kb-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(20px,3vw,30px)}.kb-steps{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap}.kb-step{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--text-dim);padding:6px 10px 6px 6px;border-radius:20px;background:var(--bg-elev)}.kb-step.active{color:var(--text);background:rgba(126,231,135,.12)}.kb-step.done{color:var(--accent)}.kb-step-n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--bg-hover);font-size:.72rem;font-family:var(--mono)}.kb-step.active .kb-step-n{background:var(--accent);color:#07120a;font-weight:700}.kb-step.done .kb-step-n{background:transparent;color:var(--accent)}.kb-step-body h2{font-size:1.3rem;margin-bottom:6px}.kb-sub{color:var(--text-dim);font-size:.88rem;margin-bottom:18px}.kb-cords{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));grid-gap:12px;gap:12px}.kb-cord{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--bg-elev);border:1.5px solid var(--border);border-radius:12px;padding:14px 8px;cursor:pointer;transition:border-color .15s,transform .15s;font-family:var(--sans);color:var(--text)}.kb-cord:hover{transform:translateY(-2px)}.kb-cord.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.kb-cord-swatch{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.15)}.kb-cord-name{font-size:.82rem;font-weight:600}.kb-cord-price{font-family:var(--mono);font-size:.76rem;color:var(--tok-num)}.kb-palette{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.kb-swatch{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid var(--border);transition:transform .15s,border-color .15s}.kb-swatch:hover{transform:scale(1.1)}.kb-swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(126,231,135,.3)}.kb-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}.kb-chip{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-weight:700;font-size:.88rem;padding:6px 4px 6px 10px;border-radius:8px}.kb-chip button{background:rgba(0,0,0,.18);border:none;color:inherit;width:20px;height:20px;border-radius:5px;cursor:pointer;font-size:.78rem;line-height:1;display:grid;place-items:center}.kb-chip button:hover{background:rgba(0,0,0,.32)}.kb-name-gen{display:flex;gap:10px;margin-bottom:8px}.kb-name-input{flex:1 1;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:11px 13px;color:var(--text);font-size:.95rem;font-family:var(--sans);text-transform:uppercase;transition:border-color .15s,box-shadow .15s}.kb-name-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(126,231,135,.12)}.kb-charmtypes{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));grid-gap:10px;gap:10px;margin-bottom:16px}.kb-charmtype{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--bg-elev);border:1.5px solid var(--border);border-radius:12px;padding:12px 6px;cursor:pointer;color:var(--text);transition:border-color .15s,transform .15s}.kb-charmtype:hover:not(:disabled){transform:translateY(-2px);border-color:var(--accent-2)}.kb-charmtype:disabled{opacity:.4;cursor:not-allowed}.kb-charm-emoji{font-size:1.5rem}.kb-charm-price{font-family:var(--mono);font-size:.74rem;color:var(--tok-num)}.kb-summary{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:18px}.kb-summary-row{display:flex;justify-content:space-between;font-size:.88rem;padding:6px 0;color:var(--text-dim)}.kb-summary-row span:last-child{font-family:var(--mono);color:var(--text)}.kb-summary-total{border-top:1px solid var(--border);margin-top:6px;padding-top:10px;font-weight:700}.kb-summary-total span{color:var(--text)!important;font-size:1.05rem}.kb-summary-total span:last-child{color:var(--tok-num)!important}.kb-ai{margin-bottom:18px}.kb-ai-btn{background:linear-gradient(120deg,var(--accent-2),var(--accent))!important;box-shadow:0 8px 24px rgba(210,168,255,.3)!important}.kb-ai-result{display:flex;flex-direction:column;gap:10px}.kb-ai-result img{width:100%;border-radius:12px;border:1px solid var(--border);box-shadow:0 18px 40px rgba(0,0,0,.35)}.kb .field{margin-bottom:14px}.kb .field label{display:block;font-size:.86rem;font-weight:600;margin-bottom:7px}.kb .field input{width:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:11px 13px;color:var(--text);font-size:.92rem;font-family:var(--sans);transition:border-color .15s,box-shadow .15s}.kb .field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(126,231,135,.12)}.kb .err-msg{color:var(--coral);font-size:.8rem;margin:-6px 0 12px}.kb-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}.kb-nav button:only-child{margin-left:auto}.kb-done{text-align:center;padding:10px 0}.kb-done-check{width:64px;height:64px;border-radius:50%;background:rgba(126,231,135,.14);color:var(--accent);display:grid;place-items:center;margin:0 auto 14px;font-size:2rem}.kb-done h3{font-size:1.3rem;margin-bottom:8px}.kb-done p{color:var(--text-dim)}.kb-orderno{font-family:var(--mono);color:var(--tok-num);font-weight:700}.kb-wa-link{color:var(--accent);font-weight:700;text-decoration:none}.kb-wa-link:hover{text-decoration:underline}.kb-error,.kb-loading{max-width:1200px;margin:60px auto;padding:0 24px;color:var(--text-dim);font-family:var(--mono);text-align:center}@media (max-width:900px){.kb{grid-template-columns:1fr;padding-bottom:60px}.kb-canvas-wrap{position:relative;top:0;height:340px}}