.cpn-nav{position:sticky;top:64px;z-index:25;background:rgba(255,255,255,.97);border-bottom:1px solid #dbe5ef;box-shadow:0 8px 25px rgba(15,23,42,.045);backdrop-filter:blur(14px);font-family:Inter,sans-serif}
.cpn-shell{width:min(1480px,calc(100% - 40px));margin:0 auto;display:grid;grid-template-columns:190px repeat(4,minmax(190px,1fr));gap:9px;padding:12px 0}
.cpn-intro{display:flex;justify-content:center;flex-direction:column;padding:0 14px}
.cpn-intro span{color:#2563eb;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.cpn-intro strong{color:#0f172a;font-size:13px}
.cpn-item{display:grid;grid-template-columns:38px 1fr 9px;align-items:center;gap:10px;min-height:60px;padding:8px 11px;border:1px solid #e2e8f0;border-radius:13px;background:#fff;color:#334155;text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s}
.cpn-item:hover{transform:translateY(-2px);border-color:#93c5fd;box-shadow:0 10px 24px rgba(37,99,235,.1)}
.cpn-item.active{border-color:#93c5fd;background:#eff6ff;box-shadow:0 9px 23px rgba(37,99,235,.12)}
.cpn-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#f1f5f9;color:#64748b;font-size:14px}
.cpn-item.active .cpn-icon{background:#2563eb;color:#fff}
.cpn-item>span:nth-child(2){min-width:0}
.cpn-item strong{display:block;color:#0f172a;font-size:13px;margin-bottom:3px}
.cpn-item small{display:block;color:#64748b;font-size:9.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpn-item>i{color:#cbd5e1;font-size:8px}
.cpn-item.active>i{color:#2563eb}
@media(max-width:1150px){.cpn-shell{grid-template-columns:repeat(4,minmax(185px,1fr));overflow-x:auto;padding:10px 0}.cpn-intro{display:none}.cpn-item{min-width:210px}}
@media(max-width:680px){.cpn-nav{top:56px}.cpn-shell{width:calc(100% - 24px);gap:7px}.cpn-item{min-width:190px;min-height:55px;grid-template-columns:34px 1fr 8px}.cpn-icon{width:34px;height:34px}.cpn-item strong{font-size:12px}}