*{margin:0;padding:0;box-sizing:border-box}
body{min-height:100vh;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at 20% 20%,rgba(0,255,255,.16),transparent 28%),radial-gradient(circle at 85% 15%,rgba(139,92,246,.22),transparent 30%),linear-gradient(135deg,#020617,#0f172a,#111827);color:white;overflow-x:hidden}
.app{min-height:100vh;display:grid;grid-template-columns:1fr 420px}
.stage{padding:24px;display:grid;grid-template-rows:auto 1fr auto;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 22px;border-radius:24px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px)}
.topbar h1{font-size:clamp(1.6rem,4vw,2.8rem)}
.topbar p{color:#cbd5e1;margin-top:5px;font-weight:700}
button{border:none;border-radius:999px;padding:12px 17px;background:#334155;color:white;font-weight:900;cursor:pointer;transition:.2s}
button:hover{transform:translateY(-3px);filter:brightness(1.12)}
.scene{display:grid;place-items:center;min-height:600px;perspective:1200px}
.pc{width:min(660px,90vw);height:460px;position:relative;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-35deg);animation:floatPC 5s ease-in-out infinite}
@keyframes floatPC{0%,100%{transform:rotateX(58deg) rotateZ(-35deg) translateY(0)}50%{transform:rotateX(58deg) rotateZ(-35deg) translateY(-12px)}}
.baseplate{position:absolute;inset:0;border-radius:34px;background:linear-gradient(135deg,rgba(148,163,184,.22),rgba(30,41,59,.55)),repeating-linear-gradient(45deg,transparent 0 18px,rgba(255,255,255,.04) 18px 20px);border:3px solid rgba(148,163,184,.55);box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 40px rgba(255,255,255,.05);display:grid;place-items:center;color:rgba(255,255,255,.18);font-size:3rem;font-weight:900;letter-spacing:6px}
.part{position:absolute;opacity:0;transform:translateZ(0) scale(.7);transition:.45s ease;box-shadow:0 18px 35px rgba(0,0,0,.35)}
.part.show{opacity:1;transform:translateZ(35px) scale(1)}
.case-part{inset:18px;border-radius:32px;border:8px solid rgba(255,255,255,.22);background:rgba(15,23,42,.25);box-shadow:inset 0 0 0 8px rgba(0,0,0,.25),0 30px 80px rgba(0,0,0,.35)}
.case-part.show{transform:translateZ(25px) scale(1)}
.motherboard-part{left:120px;top:95px;width:310px;height:245px;border-radius:22px;background:radial-gradient(circle at 80% 20%,rgba(34,197,94,.35),transparent 20%),linear-gradient(135deg,#064e3b,#052e2b);border:4px solid #22c55e}
.cpu-part{left:220px;top:170px;width:90px;height:80px;border-radius:16px;background:linear-gradient(135deg,#e5e7eb,#94a3b8);border:4px solid #f8fafc}
.cooler-part{left:205px;top:150px;width:120px;height:120px;border-radius:50%;background:conic-gradient(#38bdf8,#0f172a,#38bdf8,#0f172a,#38bdf8);border:6px solid #67e8f9;animation:spin 1.6s linear infinite}
@keyframes spin{to{rotate:360deg}}
.gpu-part{left:190px;top:280px;width:270px;height:62px;border-radius:18px;background:linear-gradient(135deg,#7c2d12,#f97316);border:4px solid #fdba74}
.ram-part{width:28px;height:170px;border-radius:999px;background:linear-gradient(180deg,#a855f7,#22d3ee);border:3px solid #e9d5ff}
.ram1{left:342px;top:125px}.ram2{left:382px;top:125px}
.storage-part{left:455px;top:130px;width:90px;height:150px;border-radius:16px;background:linear-gradient(135deg,#1e3a8a,#60a5fa);border:4px solid #bfdbfe}
.psu-part{left:90px;top:310px;width:120px;height:90px;border-radius:18px;background:linear-gradient(135deg,#111827,#475569);border:4px solid #94a3b8}
.fans-part{left:480px;top:310px;width:105px;height:105px;border-radius:50%;background:conic-gradient(#22c55e,#0f172a,#22c55e,#0f172a,#22c55e);border:5px solid #86efac;animation:spin 1.2s linear infinite}
.summary{display:grid;grid-template-columns:1fr 2fr;gap:14px}
.summary div{padding:18px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.summary strong{display:block;color:#67e8f9;margin-bottom:6px}.summary span{font-size:1.25rem;font-weight:900}
.panel{min-height:100vh;padding:24px;background:rgba(2,6,23,.72);border-left:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);overflow-y:auto}
.panel h2{font-size:2rem;margin-bottom:8px}.hint,.note{color:#cbd5e1;line-height:1.5;font-weight:700}
.select-group{margin:18px 0}.select-group label{display:block;margin-bottom:8px;color:#67e8f9;font-weight:900}
select,input{width:100%;padding:13px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);outline:none;background:#0f172a;color:white;font-size:1rem}
select:focus,input:focus{border-color:#67e8f9}
.build-box{margin:22px 0;padding:18px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.build-box h3{margin-bottom:12px;color:#67e8f9}#buildList{list-style:none}
#buildList li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);color:#e5e7eb;font-weight:700}
.main-btn{width:100%;margin-bottom:12px;background:linear-gradient(135deg,#06b6d4,#8b5cf6,#22c55e)}
#copyBtn{width:100%;margin-top:10px}.note{margin-top:16px;font-size:.9rem}
@media(max-width:1100px){.app{grid-template-columns:1fr}.panel{border-left:none;border-top:1px solid rgba(255,255,255,.12);min-height:auto}.scene{min-height:500px}.pc{transform:rotateX(55deg) rotateZ(-35deg) scale(.78)}@keyframes floatPC{0%,100%{transform:rotateX(55deg) rotateZ(-35deg) scale(.78) translateY(0)}50%{transform:rotateX(55deg) rotateZ(-35deg) scale(.78) translateY(-12px)}}.summary{grid-template-columns:1fr}}