:root{
  --hardware-bg:#eef2f5;
  --hardware-panel:#ffffff;
  --hardware-panel-strong:#f3f6f8;
  --hardware-ink:#1f2a34;
  --hardware-muted:#677382;
  --hardware-line:rgba(31,42,53,0.1);
  --hardware-accent:#6e8194;
  --hardware-accent-strong:#445769;
  --hardware-accent-soft:rgba(110,129,148,0.14);
  --hardware-shadow:0 20px 50px rgba(23,31,40,0.1);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}

body{
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
  color:var(--hardware-ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(131,146,160,0.18), transparent 26%),
    radial-gradient(circle at 100% 8%, rgba(255,255,255,0.75), transparent 24%),
    linear-gradient(180deg, #f4f7f9 0%, #edf2f5 45%, #e7edf1 100%);
  overflow-x:hidden;
}

html[data-hardware-manage-mode="false"] [data-hardware-manage-visible~="manage"]{
  display:none !important;
}

.hardware-shell [data-auth-visible~="admin"]{
  display:none !important;
}

html[data-edit-unlocked="true"] .hardware-shell [data-auth-visible~="admin"]{
  display:inline-flex !important;
}

html[data-edit-unlocked="true"] .hardware-shell .toolbar [data-auth-visible~="admin"]{
  display:inline-flex !important;
}

html[data-edit-unlocked="true"] .hardware-shell .modal-head-actions [data-auth-visible~="admin"]{
  display:inline-flex !important;
}

body::before,
body::after{
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:0;
  filter:blur(20px);
}

body::before{
  top:72px;
  right:48px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(139,152,166,0.18), transparent 68%);
}

body::after{
  left:20px;
  bottom:48px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.9), transparent 70%);
}

.hardware-shell{
  width:min(1480px, calc(100% - 28px));
  margin:28px auto 44px;
  position:relative;
  z-index:1;
}

.hardware-hero{
  background:
    linear-gradient(145deg, rgba(255,255,255,0.99), rgba(245,248,250,0.98)),
    radial-gradient(circle at top right, rgba(133,146,160,0.1), transparent 34%);
  color:var(--hardware-ink);
  border-radius:32px;
  padding:30px;
  border:1px solid rgba(24,34,45,0.06);
  box-shadow:var(--hardware-shadow);
  position:relative;
  overflow:hidden;
}

.hardware-hero::after{
  content:"";
  position:absolute;
  inset:auto -72px -120px auto;
  width:300px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(128,143,160,0.16), transparent 68%);
}

.hardware-topbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  position:relative;
  z-index:1;
}

.hero-home-btn,
.hero-explore-btn{
  min-height:42px;
  border-radius:14px;
  border:1px solid rgba(28,37,48,0.08);
  background:rgba(255,255,255,0.92);
  color:var(--hardware-ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  text-decoration:none;
  font:inherit;
  font-size:14px;
  font-weight:700;
  box-shadow:0 10px 24px rgba(29,38,48,0.08);
  transition:all .2s ease;
}

.hero-home-btn{width:42px;padding:0}

.hero-home-btn:hover,
.hero-explore-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(68,87,105,0.2);
  background:#fff;
}

.hero-home-btn svg{width:16px;height:16px}

.hardware-hero-main{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
}

.eyebrow{
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(76,88,101,0.62);
  margin-bottom:10px;
}

.hardware-hero h1{
  margin:0;
  font-size:clamp(34px, 5vw, 58px);
  line-height:1.02;
}

.toolbar,
.modal-actions,
.modal-head-actions,
.pagination-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.toolbar{margin-top:24px}

.btn,.inline-btn{
  border:none;
  cursor:pointer;
  font:inherit;
  border-radius:999px;
  padding:12px 18px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.btn{
  background:linear-gradient(135deg, #55697b, #445769);
  color:#f8fafc;
  box-shadow:0 14px 30px rgba(68,87,105,0.2);
}

.inline-btn{
  background:#f8fafb;
  color:var(--hardware-ink);
  border:1px solid rgba(31,41,51,0.08);
  box-shadow:0 8px 20px rgba(31,41,51,0.06);
}

.inline-btn.secondary{
  background:#eef3f6;
}

.btn:hover,
.inline-btn:hover{
  transform:translateY(-1px);
}

.panel{
  margin-top:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,252,0.98));
  border:1px solid rgba(25,34,45,0.06);
  border-radius:30px;
  padding:26px 28px;
  box-shadow:var(--hardware-shadow);
}

.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.section-head-copy{
  min-width:220px;
}

.section-head h2{
  margin:0;
  font-size:30px;
}

.section-head p,
#hardwareMeta{
  margin:8px 0 0;
  color:var(--hardware-muted);
  line-height:1.65;
}

.hardware-head-filters{
  display:none;
}

.hardware-head-tools{
  flex:1 1 520px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.field-search-inline{
  width:min(420px, 100%);
}

.field-search-inline input{
  min-height:46px;
  padding:12px 16px;
  border-radius:16px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field span,
.field label{
  color:#566270;
  font-size:13px;
  font-weight:600;
}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(31,41,51,0.1);
  background:#fbfcfd;
  color:var(--hardware-ink);
  font:inherit;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:rgba(68,87,105,0.4);
  box-shadow:0 0 0 4px rgba(86,105,123,0.12);
}

.field textarea{
  resize:vertical;
  min-height:112px;
}

.field small{
  color:var(--hardware-muted);
  font-size:12px;
}

.hardware-head-tools .inline-btn{
  min-height:46px;
}

.hardware-row-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.hardware-row-actions .inline-btn{
  min-width:72px;
  padding:10px 14px;
}

.hardware-row-actions .inline-btn.danger{
  background:#f8ecec;
  border-color:rgba(170,82,82,0.16);
  color:#9f3f3f;
}

.table-wrap{
  overflow:auto;
  border-radius:22px;
  border:1px solid rgba(31,41,51,0.08);
  background:#f7f9fb;
}

.hardware-table{
  width:100%;
  border-collapse:collapse;
  min-width:1120px;
}

.hardware-table thead th{
  padding:0;
  text-align:left;
  font-size:13px;
  color:#5c6875;
  background:#edf2f6;
  border-bottom:1px solid rgba(31,41,51,0.08);
  white-space:nowrap;
}

.hardware-table thead th:first-child,
.hardware-table thead th:last-child{
  padding:15px 16px;
}

.hardware-th-button{
  width:100%;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 16px;
  border:none;
  background:transparent;
  color:#53606e;
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:background .18s ease, color .18s ease;
}

.hardware-th-button:hover{
  background:rgba(255,255,255,0.52);
  color:#25303a;
}

.hardware-th-button.is-active{
  color:#213a51;
}

.hardware-th-indicator{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(86,105,123,0.08);
  color:#708093;
  font-size:12px;
  line-height:1;
}

.hardware-th-button.is-active .hardware-th-indicator{
  background:rgba(68,87,105,0.14);
  color:#30475b;
}

.hardware-table tbody td{
  padding:16px;
  border-bottom:1px solid rgba(31,41,51,0.06);
  vertical-align:middle;
}

.hardware-table tbody tr:hover{
  background:#f1f5f8;
}

.thumb-col{width:110px}
.detail-col{width:110px}

.hardware-thumb{
  width:96px;
  height:96px;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(180deg, #eef2f6, #dce4ea);
  border:1px solid rgba(31,41,51,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  box-sizing:border-box;
}

.hardware-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}

.hardware-thumb-placeholder{
  color:#778492;
  font-size:12px;
  font-weight:700;
}

.hardware-name{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.hardware-name strong{
  font-size:16px;
}

.hardware-name small{
  color:var(--hardware-muted);
}

.hardware-empty{
  display:none;
}

.hardware-filter-menu{
  position:fixed;
  min-width:220px;
  max-width:280px;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(31,41,51,0.1);
  background:rgba(255,255,255,0.98);
  box-shadow:0 22px 48px rgba(31,41,51,0.16);
  display:grid;
  gap:6px;
  z-index:125000;
}

.hardware-filter-menu[hidden]{
  display:none;
}

.hardware-filter-option{
  width:100%;
  border:none;
  border-radius:14px;
  background:transparent;
  color:#32404d;
  font:inherit;
  text-align:left;
  padding:10px 12px;
  cursor:pointer;
  transition:background .16s ease,color .16s ease;
}

.hardware-filter-option:hover{
  background:#eef3f7;
}

.hardware-filter-option.is-active{
  background:#e0e8f0;
  color:#21384d;
  font-weight:700;
}

.pagination-bar{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.pagination-meta{
  color:var(--hardware-muted);
}

.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(20,28,36,0.42);
  backdrop-filter:blur(10px);
  z-index:120000;
}

.modal.show{display:flex}

.modal-card{
  width:min(1200px, 100%);
  max-height:min(88vh, 960px);
  overflow:auto;
  border-radius:30px;
  border:1px solid rgba(25,34,45,0.08);
  background:linear-gradient(180deg, rgba(255,255,255,0.99), rgba(246,248,250,0.99));
  box-shadow:0 26px 80px rgba(28,36,46,0.22);
  padding:28px 30px 30px;
}

.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}

.modal-head h3{
  margin:0;
  font-size:30px;
}

.modal-subtitle{
  margin:8px 0 0;
  color:var(--hardware-muted);
  line-height:1.65;
}

.hardware-detail-layout{
  display:grid;
  grid-template-columns:280px minmax(0, 1fr);
  gap:24px;
  align-items:start;
}

.hardware-cover-panel{
  display:block;
  align-self:start;
}

.hardware-cover-frame{
  width:100%;
  max-width:260px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(31,41,51,0.08);
  background:linear-gradient(180deg, #eef2f6, #dce4eb);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  box-sizing:border-box;
  min-height:220px;
}

.hardware-cover-frame img{
  max-width:100%;
  max-height:min(56vh, 560px);
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
  display:block;
}

.hardware-cover-placeholder{
  color:#6e7988;
  font-size:15px;
  font-weight:700;
}

.hardware-detail-content{
  display:grid;
  gap:18px;
}

.hardware-detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.hardware-detail-item,
.hardware-detail-section{
  border-radius:20px;
  border:1px solid rgba(25,34,45,0.08);
  background:#f8fafb;
  padding:18px 20px;
}

.hardware-detail-item label{
  display:block;
  color:var(--hardware-muted);
  font-size:12px;
  margin-bottom:8px;
}

.hardware-detail-item strong{
  display:block;
  font-size:16px;
  line-height:1.55;
}

.hardware-detail-section h4{
  margin:0 0 10px;
  font-size:17px;
}

.hardware-detail-block{
  color:#46525f;
  line-height:1.75;
  white-space:pre-wrap;
}

.hardware-form{
  display:grid;
  gap:18px;
}

.hardware-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.field-wide{grid-column:1 / -1}

.hardware-upload-field{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:14px 16px;
  border-radius:20px;
  border:1px dashed rgba(68,87,105,0.24);
  background:#f8fafc;
}

.hardware-upload-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  background:linear-gradient(135deg,#55697b,#445769);
  color:#f8fafc !important;
  font-size:14px !important;
  font-weight:700 !important;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(68,87,105,0.18);
}

.hardware-upload-file-name{
  color:#607080;
  font-size:13px;
  line-height:1.6;
}

.toast-stack{
  position:fixed;
  right:18px;
  bottom:18px;
  display:grid;
  gap:10px;
  z-index:130000;
}

.toast{
  min-width:240px;
  max-width:360px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(31,41,51,0.08);
  background:rgba(255,255,255,0.98);
  box-shadow:0 16px 40px rgba(29,38,48,0.14);
  color:var(--hardware-ink);
}

.toast.success{border-color:rgba(85,105,123,0.28)}
.toast.error{border-color:rgba(218,100,100,0.34)}
.toast.info{border-color:rgba(115,132,148,0.24)}

@media (max-width: 1280px){
  .hardware-hero-main{
    flex-direction:column;
  }

  .hardware-head-tools{
    justify-content:flex-start;
  }
}

@media (max-width: 1100px){
  .hardware-detail-layout{
    grid-template-columns:1fr;
  }

  .hardware-cover-panel{
    justify-content:flex-start;
  }

  .hardware-cover-frame{
    max-width:220px;
    min-height:180px;
  }
}

@media (max-width: 900px){
  .hardware-head-filters,
  .hardware-form-grid,
  .hardware-detail-grid{
    grid-template-columns:1fr;
  }

  .hardware-head-tools{
    width:100%;
  }
}

@media (max-width: 640px){
  .hardware-shell{
    width:min(100%, calc(100% - 16px));
    margin:16px auto 32px;
  }

  .hardware-hero,
  .panel,
  .modal-card{
    border-radius:24px;
  }

  .hardware-hero,
  .panel{
    padding:20px;
  }

  .modal{
    padding:12px;
  }

  .modal-card{
    padding:20px;
  }
}