/* TWZ COMPACT SPEED PACKAGES V9 */

.twz9-heading{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:8px;
 margin:8px 0 14px;
}
.twz9-heading h2{
 font-size:20px;
 color:#102d56;
 margin:0 0 3px;
}
.twz9-heading p{
 font-size:11px;
 color:#7286a0;
 margin:0;
}
.twz9-count{
 flex:none;
 font-size:10px;
 font-weight:800;
 color:#1265d8;
 background:#e2eeff;
 border-radius:20px;
 padding:7px 9px;
}
.twz9-grid{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:10px;
 align-items:stretch;
}
.twz9-card{
 --accent:#1175e5;
 --accent2:#29c7ed;
 min-width:0;
 background:#fff;
 border:1px solid #e0e9f6;
 border-radius:18px;
 padding:12px;
 box-shadow:0 6px 18px #153e7f0c;
 display:flex;
 flex-direction:column;
 gap:10px;
 animation:twz9Appear .35s ease both;
}
.twz9-card.turbo{
 --accent:#633fea;
 --accent2:#09b6f2;
 background:linear-gradient(160deg,#f4f0ff,#fff 55%);
}
.twz9-card.standard{
 background:linear-gradient(160deg,#eaf7ff,#fff 55%);
}
.twz9-top{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:4px;
}
.twz9-type{
 font-size:9px;
 color:#64748b;
 font-weight:900;
 letter-spacing:.3px;
}
.twz9-live{
 font-size:8px;
 font-weight:900;
 color:var(--accent);
 white-space:nowrap;
 display:flex;
 align-items:center;
 gap:4px;
}
.twz9-live i{
 width:6px;
 height:6px;
 border-radius:50%;
 background:var(--accent2);
 box-shadow:0 0 8px var(--accent2);
 animation:twz9Blink 1.5s infinite;
}
.twz9-name{
 font-size:13px;
 font-weight:850;
 color:#183352;
 line-height:1.3;
 min-height:34px;
 overflow-wrap:anywhere;
}
.twz9-speed{
 display:flex;
 align-items:center;
 gap:8px;
}
.twz9-wifi{
 width:36px;
 height:36px;
 border-radius:12px;
 display:grid;
 place-items:center;
 flex:none;
 font-size:30px;
 font-weight:900;
 color:var(--accent);
 background:color-mix(in srgb,var(--accent) 10%,white);
 animation:twz9Glow 2.5s ease-in-out infinite;
}
.twz9-speedtext{
 min-width:0;
}
.twz9-speedtext strong{
 display:block;
 font-size:19px;
 font-weight:900;
 color:#142f53;
 white-space:nowrap;
 letter-spacing:-.7px;
}
.twz9-speedtext small{
 font-size:9px;
 color:#8290a4;
}
.twz9-meter{
 height:24px;
 background:#f0f5fc;
 border-radius:10px;
 padding:5px 6px;
 display:flex;
 align-items:flex-end;
 gap:3px;
}
.twz9-meter i{
 flex:1;
 height:55%;
 border-radius:3px;
 background:#d9e2ee;
}
.twz9-meter i.on{
 height:var(--level);
 background:linear-gradient(to top,var(--accent),var(--accent2));
 animation:twz9Wave 1.5s ease-in-out infinite alternate;
 animation-delay:calc(var(--i)*.09s);
}
.twz9-bottom{
 margin-top:auto;
 padding-top:8px;
 border-top:1px solid #e8edf5;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:4px;
}
.twz9-bottom strong{
 font-size:23px;
 font-weight:900;
 color:var(--accent);
 white-space:nowrap;
}
.twz9-bottom span{
 font-size:11px;
 white-space:nowrap;
 color:#65778e;
}
.twz9-select{
 display:flex;
 justify-content:center;
 align-items:center;
 gap:10px;
 border:0;
 border-radius:12px;
 width:100%;
 min-height:40px;
 padding:10px 6px;
 font-size:12px;
 font-weight:800;
 color:#fff;
 background:linear-gradient(110deg,var(--accent),var(--accent2));
 box-shadow:0 4px 10px #1261bc20;
}
.twz9-select span{
 font-size:18px;
 line-height:0;
}
.twz9-select:active{
 transform:scale(.97);
}
.twz9-empty{
 padding:20px;
 text-align:center;
 background:#fff;
 border-radius:16px;
 color:#64748b;
}
@keyframes twz9Blink{
 50%{opacity:.25}
}
@keyframes twz9Glow{
 50%{filter:brightness(1.18);transform:scale(1.05)}
}
@keyframes twz9Wave{
 from{opacity:.55;transform:scaleY(.65);transform-origin:bottom}
 to{opacity:1;transform:scaleY(1);transform-origin:bottom}
}
@keyframes twz9Appear{
 from{opacity:0;transform:translateY(8px)}
 to{opacity:1;transform:translateY(0)}
}
@media(max-width:370px){
 .twz9-grid{gap:7px}
 .twz9-card{padding:9px;gap:8px}
 .twz9-name{font-size:12px}
 .twz9-speedtext strong{font-size:16px}
 .twz9-wifi{width:30px;height:30px;font-size:25px}
 .twz9-bottom strong{font-size:20px}
 .twz9-bottom span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .twz9-card,.twz9-live i,.twz9-wifi,.twz9-meter i.on{
  animation:none!important;
 }
}