:root{font-family:"Noto Sans SC","Microsoft YaHei",sans-serif;color:#e9e7dc;background:#111820;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.app{display:grid;grid-template-columns:336px minmax(0,1fr);height:100vh;min-height:690px}.catalog{background:#19212a;border-right:1px solid #34404a;display:flex;flex-direction:column;min-height:0}.brand{display:flex;gap:13px;align-items:center;padding:26px 25px 14px}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border:1px solid #b99a5d;color:#d4b471;font-family:serif;font-size:22px;transform:rotate(45deg)}.brand-mark::first-letter{transform:rotate(-45deg)}.brand-mark{line-height:1}.brand-mark>span{transform:rotate(-45deg)}.brand strong{display:block;font-family:serif;font-size:22px;font-weight:600;letter-spacing:2px;line-height:1.2}.eyebrow{font-size:10px;letter-spacing:2.4px;color:#c5a66b;text-transform:uppercase;font-weight:700}.catalog-intro{color:#a8b2b8;font-size:12px;line-height:1.8;padding:6px 25px 21px}.search-wrap{margin:0 20px 24px;height:40px;display:flex;align-items:center;gap:10px;background:#242e37;border:1px solid #3b4751;border-radius:7px;padding:0 11px;color:#b8c0c4}.search-wrap>span{font-size:24px;line-height:1}.search-wrap input{background:none;border:0;outline:0;color:#f4f1e7;min-width:0;flex:1;font:inherit;font-size:12px}.search-wrap input::placeholder{color:#87939a}.search-wrap kbd{border:1px solid #58636a;border-radius:3px;padding:1px 5px;color:#9aa4aa;font-size:10px}.catalog-heading{display:flex;justify-content:space-between;padding:0 24px 13px;color:#e6dfce;font-size:12px;font-weight:700;letter-spacing:1px}.catalog-heading span:last-child{font-weight:400;color:#9ca8ae}.skin-list{overflow:auto;padding:0 12px 16px;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:9px;scrollbar-color:#49545e transparent;scrollbar-width:thin}.skin-card{border:1px solid #35424a;background:#232d36;border-radius:7px;padding:0;text-align:left;color:inherit;cursor:pointer;overflow:hidden;transition:transform .15s,border-color .15s,background .15s;min-width:0}.skin-card:hover{transform:translateY(-2px);border-color:#a98d5c}.skin-card.selected{border-color:#c4a36b;background:#34342f;box-shadow:0 0 0 1px #c4a36b55}.card-art{height:83px;position:relative;background:radial-gradient(ellipse at 50% 70%,#64758955 0%,transparent 55%),linear-gradient(145deg,#36434b,#202b35);overflow:hidden;display:flex;align-items:center;justify-content:center}.card-art::after{content:"";position:absolute;inset:auto 9px 9px;height:1px;background:linear-gradient(90deg,transparent,#bda37777,transparent)}.card-art img{height:100%;width:100%;object-fit:contain;position:relative;z-index:1}.card-art .fallback{font-family:serif;color:#ac956e;font-size:33px;opacity:.7}.card-num{position:absolute;z-index:2;top:7px;left:8px;font-family:Arial,sans-serif;color:#dac8a3;background:#151c22a9;padding:2px 5px;border-radius:2px;font-size:9px;letter-spacing:1px}.card-title{padding:9px 10px 10px;display:flex;align-items:center;justify-content:space-between;gap:3px;font-size:11px;white-space:nowrap;overflow:hidden}.card-title span:first-child{overflow:hidden;text-overflow:ellipsis}.card-title .arrow{color:#a99976;font-size:14px}.catalog-foot{border-top:1px solid #303c45;padding:15px 21px;color:#89959b;font-size:10px;line-height:1.5}.main{display:flex;flex-direction:column;min-width:0;background:#121a21}.topbar{height:60px;border-bottom:1px solid #2d3842;display:flex;align-items:center;justify-content:space-between;padding:0 31px;font-size:12px;color:#a7b2b8}.breadcrumb strong{color:#eee8da;font-weight:500}.breadcrumb span{margin:0 12px;color:#697781}.topbar-right{display:flex;align-items:center;gap:9px;color:#b7c1c5}.live-dot{width:6px;height:6px;border-radius:50%;background:#bda36b;box-shadow:0 0 9px #d3b678}.index-pill{border:1px solid #3c4a53;border-radius:4px;padding:5px 9px;margin-left:15px;color:#c9b58e;letter-spacing:1px}.stage{position:relative;flex:1;min-height:340px;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#31434d 0%,#202e39 32%,#16212a 73%,#121b23 100%)}.stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,transparent 30%,#000 100%);pointer-events:none}.stage-glow{position:absolute;width:53vw;height:53vw;max-width:700px;max-height:700px;left:50%;top:52%;transform:translate(-50%,-50%);border:1px solid #a9945b1c;border-radius:50%;box-shadow:0 0 0 85px #a9945b07,0 0 0 170px #a9945b05;pointer-events:none}.viewer{position:absolute;inset:0}.viewer canvas{display:block;width:100%;height:100%}.stage-label{position:absolute;top:25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;color:#cbb889;font-size:10px;letter-spacing:2.5px;white-space:nowrap;pointer-events:none}.stage-label-line{height:1px;width:35px;background:#9e8b61}.loading{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:#17212aba;color:#d5c49b;font-size:12px;letter-spacing:1px}.loading.show{display:flex}.spinner{width:27px;height:27px;border:2px solid #92876866;border-top-color:#d4b676;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.viewer-hint{position:absolute;bottom:21px;left:26px;color:#a3b0b5;font-size:11px;pointer-events:none}.viewer-hint span{margin:0 6px;color:#849096}.view-controls{position:absolute;bottom:17px;right:22px;display:flex;gap:7px}.view-controls button,.actions button{border:1px solid #5b6971;background:#23313aba;color:#d7dfdf;border-radius:5px;cursor:pointer;transition:background .15s,border-color .15s}.view-controls button{height:34px;padding:0 11px;font-size:14px}.view-controls button span{font-size:10px;margin-left:4px}.view-controls button:hover,.view-controls button.active{border-color:#c3a76c;background:#494636;color:#f1dfac}.details{height:213px;padding:22px 31px 18px;border-top:1px solid #374651;background:linear-gradient(130deg,#1e2932,#18222b)}.details-head{display:flex;justify-content:space-between;align-items:center}.details-head .eyebrow span{margin-left:9px;color:#8d9ba2}.details h1{font-size:26px;font-family:serif;letter-spacing:2px;font-weight:600;margin:5px 0 0}.actions{display:flex;gap:7px}.actions button{width:35px;height:35px;font-size:17px}.actions button:hover{background:#3e4850}.detail-divider{height:1px;background:linear-gradient(90deg,#a78d5a,#3c4a53 35%,#3c4a53);margin:17px 0 15px}.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.facts div{display:flex;flex-direction:column;gap:4px}.facts span{color:#8e9ba3;font-size:10px}.facts strong{font-size:15px;color:#e4e1d7;font-weight:500;font-family:Arial,sans-serif}.detail-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:15px;font-size:10px}.detail-footer span{color:#82919a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-footer a{flex:none;color:#d2b87d;text-decoration:none;border-bottom:1px solid #bda36b;padding-bottom:2px}.detail-footer a:hover{color:#ffe2a1}@media(max-width:850px){.app{grid-template-columns:245px 1fr}.brand{padding-left:18px}.catalog-intro{padding-left:18px;padding-right:18px}.skin-list{grid-template-columns:1fr}.card-art{height:75px}.card-title{padding:7px 9px}.details{height:226px}.viewer-hint{display:none}}@media(max-width:620px){.app{display:flex;flex-direction:column;height:auto;min-height:100vh}.catalog{order:2;border-right:0;border-top:1px solid #34404a}.brand,.catalog-intro,.catalog-foot{display:none}.search-wrap{margin:12px 16px}.catalog-heading{padding:0 17px 9px}.skin-list{display:flex;overflow:auto;padding:0 16px 14px}.skin-card{flex:0 0 130px}.main{order:1;height:70vh;min-height:550px}.topbar{height:48px;padding:0 18px}.topbar-right{font-size:10px}.stage{min-height:280px}.stage-label{top:14px}.view-controls{right:10px;bottom:11px}.view-controls button span{display:none}.details{height:187px;padding:15px 18px}.details h1{font-size:22px}.facts{gap:8px}.detail-footer{margin-top:12px}}
.skin-list{grid-auto-rows:122px}.skin-card{height:122px}@media(max-width:850px){.skin-list{grid-auto-rows:112px}.skin-card{height:112px}}@media(max-width:620px){.skin-card{height:112px}}
.facts{grid-template-columns:repeat(5,1fr)}.view-controls button:disabled{opacity:.4;cursor:default;border-color:#5b6971;background:#23313aba;color:#d7dfdf}@media(max-width:620px){.facts{grid-template-columns:repeat(5,1fr)}.facts strong{font-size:12px}}