
/* === Configurator styles (restored) + Ruijie brand accent === */
:root{ --ruijie:#E60012; --ruijie-ghost: rgba(230,0,18,.18); }

.config-steps{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 18px}
.toggle{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid rgba(255,255,255,.12);border-radius:999px;cursor:pointer;user-select:none;transition:box-shadow .15s,border-color .15s,background .15s,color .15s}
.toggle input{display:none}
.toggle.active{background: var(--ruijie); border-color: var(--ruijie); color:#fff; box-shadow:0 4px 16px var(--ruijie-ghost)}
.toggle.active span{color:#fff}
.toggle:not(.active):hover{border-color: rgba(230,0,18,.5); box-shadow:0 2px 10px var(--ruijie-ghost)}
.toggle:focus-within{box-shadow:0 0 0 2px rgba(230,0,18,.45); border-color: var(--ruijie)}

.badge{padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:12px;color:#aeb4c2}

.params{display:none;margin-top:8px}
.params.active{display:block}
.params .grid{gap:12px}
.params label{display:block;font-size:14px;color:#aeb4c2}
.params select,.params input[type="search"], .params input[type="text"], .params input[type="number"], textarea{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0f1016;color:#e8edf7
}

.legend{display:flex;align-items:center;gap:8px;margin:18px 0 8px}
.legend .icon{width:18px;height:18px;vertical-align:-3px}

#results .card{background:#161823;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px}
#results .card .model{font-weight:800;font-size:18px}
#results .card .meta{color:#aeb4c2;margin:4px 0 6px}
#results .actions{display:flex;gap:8px;margin-top:8px}
#results .btn{padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#11131a;color:#e8edf7;text-decoration:none}
#results .btn.primary{background: var(--ruijie); border-color: var(--ruijie)}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid rgba(255,255,255,.08);padding:8px 10px;text-align:left}
.table th{color:#aeb4c2;font-weight:600}

.empty{color:#aeb4c2;padding:10px 0}

@media (max-width:960px){
  .grid.cols-2{grid-template-columns:1fr}
  #results.grid.cols-3{grid-template-columns:1fr}
}
