:root{
  --bg1:#060b16;--bg2:#0b1220;--t:#e7edf7;--m:#a9b6cc;--a1:#7c5cff;--a2:#28d7a6;
  --p1:rgba(255,255,255,.06);--b1:1px solid rgba(255,255,255,.08);--b2:1px solid rgba(255,255,255,.12);
  --sh:0 18px 40px rgba(0,0,0,.45);--r:16px;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;color:var(--t);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1100px 600px at 15% 0%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(40,215,166,.12), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}
a{color:#c7b3ff;text-decoration:none} a:hover{color:#fff}
.container{max-width:1320px;margin:0 auto;padding:16px}
.layout{display:grid;grid-template-columns:1fr 320px;gap:14px;align-items:start}
.maincol{min-width:0}.sidebar{position:sticky;top:84px}
@media(max-width:1024px){.layout{grid-template-columns:1fr}.sidebar{position:static}}
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-bottom:var(--b1);background:rgba(8,10,18,.82);backdrop-filter:blur(12px);
}
.brand-link{display:block;color:var(--t)}
.brand-link:hover{color:#fff}
.brand h1{font-size:20px;line-height:1;margin:0;font-weight:900}.brand small{display:block;color:var(--m)}
.nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nav-link,.dropdown-trigger{
  padding:10px 12px;border-radius:999px;border:var(--b1);background:rgba(255,255,255,.05);color:var(--t);cursor:pointer;font-size:13px
}
.nav-link:hover,.dropdown-trigger:hover{border-color:rgba(255,255,255,.22)}
.nav-link.active,.dropdown-item.active{background:rgba(40,215,166,.14);border-color:rgba(40,215,166,.36);color:#fff}
.dropdown{position:relative}.dropdown-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:220px;border:var(--b2);border-radius:14px;
  background:rgba(12,16,28,.98);box-shadow:var(--sh);padding:8px;display:none
}
.dropdown.open .dropdown-menu{display:block}.dropdown-item{display:block;padding:10px 12px;border-radius:10px;color:var(--t)}
.dropdown-item:hover{background:rgba(255,255,255,.06)}
.page-title{margin:0 0 6px 0;font-size:28px;font-weight:900}.page-subtitle{margin:0 0 18px 0;color:var(--m)}
.panel,.card{border-radius:var(--r);border:var(--b1);background:var(--p1);box-shadow:var(--sh)}
.panel{padding:14px;margin-bottom:14px}.panel-title{font-weight:900;margin-bottom:10px}.card{padding:14px}
.grid{display:grid;gap:12px}.grid.auto2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.auto3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.autoFit{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}@media(max-width:900px){.grid.auto3,.grid.auto2{grid-template-columns:1fr}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:14px;border:var(--b2);background:rgba(255,255,255,.08);color:var(--t);cursor:pointer}
.btn:hover{border-color:rgba(255,255,255,.24)}.btn.primary{background:rgba(124,92,255,.18);border-color:rgba(124,92,255,.38)}
.btn.secondary{background:rgba(0,0,0,.20)}.btn.small{padding:8px 10px;border-radius:12px;font-size:12px}
.input,textarea{width:100%;padding:12px;border-radius:14px;border:var(--b2);background:rgba(0,0,0,.26);color:var(--t)}
textarea{min-height:94px;resize:vertical}.search-row{display:flex;gap:10px;align-items:center}.search-row .input{flex:1}
.small{font-size:12px}.muted{color:var(--m)}.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{padding:6px 9px;border-radius:999px;border:var(--b1);background:rgba(255,255,255,.05);font-size:12px}
.list{display:grid;gap:10px}.result-card h3{margin:0 0 6px 0}.result-card p{margin:4px 0}.quick-tile{cursor:pointer;transition:transform .12s ease}.quick-tile:hover{transform:translateY(-2px)}
.favorite-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:var(--b1);border-radius:12px;background:rgba(0,0,0,.14)}
.footer{margin-top:28px;padding:16px;border-top:var(--b1);color:var(--m);text-align:center}
.chat-box{display:grid;gap:12px}.chat-log{border:var(--b1);border-radius:14px;background:rgba(0,0,0,.16);min-height:280px;max-height:420px;overflow:auto;padding:12px;display:grid;gap:10px}
.msg{padding:10px 12px;border-radius:12px;max-width:92%}.msg.bot{background:rgba(124,92,255,.14);border:var(--b1)}.msg.user{background:rgba(40,215,166,.12);border:var(--b1);justify-self:end}
.module-hero{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.key{padding:16px;border-radius:14px;border:var(--b1);background:rgba(0,0,0,.22);text-align:center;cursor:pointer}.key:hover{background:rgba(255,255,255,.06)}
.board-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.hotspot{padding:14px;border-radius:14px;border:var(--b1);background:rgba(255,255,255,.04);cursor:pointer}.hotspot:hover{border-color:rgba(124,92,255,.4)}
.notice{padding:12px;border-radius:12px;border:var(--b1);background:rgba(251,191,36,.10)}code{background:rgba(0,0,0,.25);padding:2px 6px;border-radius:8px}
.detail-actions{flex-wrap:wrap;justify-content:flex-end}
.spec-list{display:grid;border:var(--b1);border-radius:14px;overflow:hidden;background:rgba(0,0,0,.12)}
.spec-row{display:grid;grid-template-columns:minmax(180px,.9fr) 1.1fr;gap:12px;align-items:start;padding:10px 12px;border-bottom:var(--b1)}
.spec-row:last-child{border-bottom:0}.spec-row span{color:var(--m);font-size:12px}.spec-row b{font-size:13px;line-height:1.35}
@media(max-width:700px){.spec-row{grid-template-columns:1fr}.detail-actions{justify-content:flex-start}}
.comparison-wrap{width:100%;overflow:auto;border:var(--b1);border-radius:14px;background:rgba(0,0,0,.12)}
.compare-table{width:100%;border-collapse:collapse;min-width:920px}
.compare-table th,.compare-table td{padding:12px;border-bottom:var(--b1);border-right:var(--b1);vertical-align:top;text-align:left}
.compare-table th:last-child,.compare-table td:last-child{border-right:0}
.compare-table tr:last-child th,.compare-table tr:last-child td{border-bottom:0}
.compare-table thead th{position:sticky;top:0;background:rgba(12,16,28,.98);z-index:1}
.compare-table tbody th{width:180px;color:#fff;background:rgba(255,255,255,.035)}
.compare-table td .badges{margin-bottom:8px}.badge.confidence{background:rgba(40,215,166,.10);border-color:rgba(40,215,166,.28);text-transform:capitalize}
.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.metric-row span{display:grid;gap:2px;padding:10px;border-radius:12px;border:var(--b1);background:rgba(0,0,0,.16)}
.metric-row b{font-size:18px}.metric-row small{color:var(--m);font-size:11px}
@media(max-width:700px){.metric-row{grid-template-columns:1fr}.compare-table{min-width:760px}}
.section-mini-title{margin:14px 0 8px 0;font-size:13px;text-transform:uppercase;color:var(--m);letter-spacing:0}
.wiring-option h4{margin:0 0 6px 0}.wiring-option p{margin:6px 0}
.code-strip{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.code-strip span{display:grid;gap:3px;padding:8px 10px;border:var(--b1);border-radius:12px;background:rgba(0,0,0,.18);font-size:13px}
.code-strip b{color:var(--m);font-size:11px;text-transform:uppercase}.code-strip.wide{max-width:460px}
.visual-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}.visual-slot{margin:0;border:var(--b1);border-radius:14px;overflow:hidden;background:rgba(0,0,0,.18)}
.visual-slot img{display:block;width:100%;height:260px;object-fit:contain;background:#f5f6f8}
.visual-slot figcaption{padding:9px 10px;color:var(--m);font-size:12px;border-top:var(--b1)}
.visual-slot.empty{min-height:260px;display:grid;grid-template-rows:1fr auto}.visual-placeholder{display:grid;place-items:center;min-height:220px;color:var(--m);border:1px dashed rgba(255,255,255,.18);margin:12px;border-radius:12px}
.board-visual-mini .visual-slot img{height:160px}.board-visual-mini .visual-slot figcaption{font-size:11px}.board-card{display:grid;gap:10px}
.voltage-badge{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.5);color:#fff;font-weight:900}
.visual-single{margin:12px 0}.visual-single .visual-slot img{height:150px;object-fit:contain}
.pdf-action{display:grid;gap:8px;justify-items:end}.pdf-cta{min-width:220px;padding:14px 18px;font-size:15px;font-weight:900;border-color:rgba(40,215,166,.45);background:rgba(40,215,166,.16)}
.manual-page-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.manual-page-tile{display:grid;gap:8px;border:var(--b1);border-radius:12px;padding:8px;background:rgba(0,0,0,.14);color:var(--t)}
.manual-page-tile img{width:100%;height:180px;object-fit:cover;object-position:top;background:#f5f6f8;border-radius:8px}
.manual-page-tile span{font-size:12px;color:var(--m)}
@media(max-width:900px){.visual-pair{grid-template-columns:1fr}.visual-slot img{height:220px}}
.catalogue-feature{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:stretch;padding:18px;border-color:rgba(40,215,166,.32);background:linear-gradient(135deg,rgba(40,215,166,.10),rgba(124,92,255,.10)),var(--p1)}
.catalogue-cover{min-height:260px;border-radius:14px;border:var(--b2);background:linear-gradient(160deg,#f7f9fc 0%,#e9edf5 48%,#cfd8e7 100%);color:#0b1220;display:grid;align-content:space-between;padding:18px;box-shadow:0 20px 38px rgba(0,0,0,.32);position:relative;overflow:hidden}
.catalogue-cover:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 22%,transparent 78%,rgba(0,0,0,.10));pointer-events:none}
.catalogue-cover-logo{position:relative;width:92px;height:58px;border-radius:10px 14px 12px 10px;background:#e30613;color:#fff;display:grid;place-items:center;font-size:26px;font-weight:900;letter-spacing:-1px}
.catalogue-cover-title{position:relative;font-size:28px;line-height:1;font-weight:900;text-transform:uppercase;letter-spacing:0;color:#132033}
.catalogue-cover-meta{position:relative;color:#536174;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:0}
.catalogue-content{display:grid;align-content:center;gap:10px}
.catalogue-kicker{color:var(--a2);font-size:12px;text-transform:uppercase;font-weight:900;letter-spacing:0}
.catalogue-content h3{margin:0;font-size:30px}
.catalogue-facts{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 8px}
.catalogue-cta{font-size:15px;font-weight:900;padding:13px 18px;border-color:rgba(40,215,166,.45);background:rgba(40,215,166,.16)}
.catalogue-nav-link{border-color:rgba(40,215,166,.42);background:rgba(40,215,166,.14);font-weight:800}
@media(max-width:760px){.catalogue-feature{grid-template-columns:1fr}.catalogue-cover{min-height:210px}.catalogue-content h3{font-size:24px}}