:root { --ink:#332d37; --muted:#746d78; --line:rgba(205,185,151,.74); --paper:#fffdf9; --gold:#a97d42; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:82px; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:"PingFang SC","Microsoft YaHei",sans-serif; background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.75)),radial-gradient(circle at 18% 0%,#f4e9d6,transparent 35%),#f4f1eb; }
a { color:inherit; text-decoration:none; }
.equipment-topbar { position:sticky; top:0; z-index:10; border-bottom:1px solid var(--line); background:rgba(255,253,249,.94); backdrop-filter:blur(14px); }
.equipment-topbar__inner { width:min(1200px,calc(100% - 32px)); min-height:62px; margin:0 auto; display:flex; align-items:center; gap:18px; }
.home-link { display:flex; align-items:center; gap:9px; font-weight:800; }
.home-link > span { color:#8c6635; font-size:20px; }
.home-link img { width:36px; height:36px; border-radius:6px; object-fit:cover; }
.category-nav { margin-left:auto; display:flex; gap:6px; }
.category-nav a { padding:8px 11px; border:1px solid transparent; border-radius:6px; color:var(--muted); font-size:13px; font-weight:800; }
.category-nav a:hover { border-color:var(--line); background:#f7edda; color:#765429; }
.equipment-page { width:min(1200px,calc(100% - 32px)); margin:28px auto 64px; }
.equipment-heading { min-height:210px; display:grid; grid-template-columns:180px minmax(0,1fr); align-items:center; gap:28px; padding:24px 34px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:linear-gradient(45deg,transparent 49%,rgba(255,255,255,.3) 49.5%,rgba(255,255,255,.3) 50.5%,transparent 51%),radial-gradient(circle at 15% 40%,rgba(255,255,255,.88),transparent 30%),linear-gradient(135deg,#fffaf0,#e6d2aa 62%,#bd955c); }
.equipment-heading img { width:164px; height:164px; object-fit:contain; filter:drop-shadow(0 14px 18px rgba(78,52,32,.2)); }
.equipment-heading p { margin:0 0 7px; color:#8c6a3e; font-size:13px; font-weight:800; }
.equipment-heading h1 { margin:0 0 10px; font-size:34px; letter-spacing:0; }
.equipment-heading span { color:#725b3d; font-size:13px; }
.equipment-groups { display:grid; gap:24px; margin-top:18px; }
.equipment-group { padding:24px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.equipment-group__head { min-height:46px; margin-bottom:14px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); }
.equipment-group__head h2 { margin:0; color:#765429; font-size:22px; }
.equipment-group__head span { padding:3px 7px; border-radius:4px; background:#eee7dc; color:var(--muted); font-size:11px; }
.equipment-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.equipment-card { min-width:0; min-height:126px; display:grid; grid-template-columns:112px minmax(0,1fr); padding:0; border:1px solid rgba(218,203,178,.9); border-radius:8px; overflow:hidden; background:#fff; color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.equipment-card:hover { transform:translateY(-2px); border-color:#b98a4c; box-shadow:0 14px 28px rgba(77,53,31,.13); }
.equipment-card__icon { display:grid; place-items:center; background:radial-gradient(circle at 48% 38%,rgba(255,255,255,.86),transparent 34%),linear-gradient(135deg,#faf5ea,#ddc99f 58%,#b69158); }
.equipment-card__icon img { width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 8px 12px rgba(72,48,28,.2)); }
.equipment-card__body { min-width:0; display:grid; align-content:center; gap:9px; padding:12px; }
.equipment-card__body strong { font-size:15px; line-height:1.35; }
.attribute-list { display:flex; flex-wrap:wrap; gap:5px; }
.attribute-list span { padding:3px 6px; border-radius:4px; background:#f3eee6; color:#79664e; font-size:10px; }
.loading-state { min-height:240px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--muted); }
.equipment-dialog { width:min(720px,calc(100% - 28px)); max-height:86vh; padding:0; border:1px solid var(--line); border-radius:8px; background:#fffdf9; color:var(--ink); overflow:auto; box-shadow:0 30px 80px rgba(36,25,19,.3); }
.equipment-dialog::backdrop { background:rgba(30,24,30,.64); backdrop-filter:blur(4px); }
.dialog-close { position:sticky; z-index:4; top:12px; float:right; width:36px; height:36px; margin:12px 12px -48px 0; display:grid; place-items:center; border:1px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(45,35,43,.72); color:#fff; font-size:25px; cursor:pointer; }
.equipment-dialog__hero { min-height:230px; display:grid; grid-template-columns:210px minmax(0,1fr); align-items:center; gap:26px; padding:24px 48px 24px 24px; background:linear-gradient(135deg,#f8ebd2,#e3c58e 65%,#b78e57); }
.equipment-dialog__icon { width:190px; height:190px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.65); border-radius:8px; background:rgba(255,255,255,.35); }
.equipment-dialog__icon img { width:86%; height:86%; object-fit:contain; filter:drop-shadow(0 12px 16px rgba(70,43,23,.2)); }
.equipment-dialog__hero p { margin:0 0 8px; color:#74552e; font-size:13px; font-weight:800; }
.equipment-dialog__hero h2 { margin:0; font-size:30px; }
.equipment-dialog section { padding:22px 26px; border-top:1px solid var(--line); }
.equipment-dialog section h3 { margin:0 0 12px; font-size:17px; }
.equipment-dialog section p { margin:0; color:#655f68; line-height:1.8; }
.attribute-list--large span { padding:6px 9px; font-size:13px; }
@media (max-width:900px) { .equipment-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .equipment-topbar__inner,.equipment-page { width:min(100% - 20px,1200px); } .home-link img { display:none; } .home-link strong { font-size:13px; } .category-nav { gap:1px; } .category-nav a { padding:7px 6px; font-size:12px; } .equipment-page { margin-top:14px; } .equipment-heading { min-height:164px; grid-template-columns:110px minmax(0,1fr); gap:12px; padding:18px; } .equipment-heading img { width:106px; height:106px; } .equipment-heading h1 { font-size:26px; } .equipment-group { padding:16px; } .equipment-grid { grid-template-columns:1fr; } .equipment-card { grid-template-columns:104px minmax(0,1fr); min-height:112px; } .equipment-dialog__hero { min-height:170px; grid-template-columns:120px minmax(0,1fr); gap:14px; padding:18px 46px 18px 18px; } .equipment-dialog__icon { width:112px; height:112px; } .equipment-dialog__hero h2 { font-size:23px; } }
@media (max-width:460px) { .equipment-topbar__inner { gap:8px; } .home-link strong { display:none; } .category-nav { min-width:0; overflow-x:auto; scrollbar-width:none; } .category-nav::-webkit-scrollbar { display:none; } .category-nav a { flex:none; } .equipment-heading { min-height:138px; grid-template-columns:82px minmax(0,1fr); padding:15px; } .equipment-heading img { width:78px; height:78px; } .equipment-heading h1 { font-size:23px; } .equipment-group { padding:13px; } .equipment-card { grid-template-columns:88px minmax(0,1fr); } .equipment-dialog__hero { grid-template-columns:88px minmax(0,1fr); min-height:144px; padding:16px 44px 16px 16px; } .equipment-dialog__icon { width:84px; height:84px; } .equipment-dialog__hero h2 { font-size:21px; } }