/* ====== 86 校园网套餐 · 科技钴蓝 + 荧光青 ====== */
.cnp{
  --bg:#f2f5fa; --bg2:#e6ecf5; --card:#fff; --card2:#f6f9fd;
  --ink:#111827; --sub:#37455c; --faint:#7b8798; --line:#d8e1ee; --line2:#e7eef8;
  --cobalt:#2b5fd9; --cobalt-d:#1b3f96; --cobalt-soft:#e0e9fb;
  --cyan:#12b3c6; --cyan-soft:#dcf4f7; --amber:#c1862c; --red:#b8463c;
  --shadow-sm:0 1px 2px rgba(17,24,39,.05),0 7px 18px rgba(17,24,39,.05);
  --shadow:0 2px 6px rgba(17,24,39,.07),0 22px 48px rgba(17,24,39,.10);
  --r:20px; --r-sm:13px;
  background:
    radial-gradient(720px 320px at 100% -6%, rgba(43,95,217,.11), transparent 62%),
    radial-gradient(520px 260px at -6% 22%, rgba(18,179,198,.10), transparent 66%),
    repeating-linear-gradient(90deg,rgba(17,24,39,.028) 0 1px,transparent 1px 28px),
    var(--bg);
}
:root[data-theme="dark"] .cnp{
  --bg:#080d16; --bg2:#0d141f; --card:#121a26; --card2:#16202d;
  --ink:#e6ecf5; --sub:#a3b2c6; --faint:#6c7b90; --line:#22303f; --line2:#1a2532;
  --cobalt:#7ea2ec; --cobalt-d:#a8c1f5; --cobalt-soft:rgba(126,162,236,.13);
  --cyan:#4fd0df; --cyan-soft:rgba(79,208,223,.12);
}
.cnp .tsk-h1 b{color:var(--cobalt-d);}

.cnp-hero{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:32px;padding:30px 0 24px;align-items:start;}

/* ---- 网络套餐单 ---- */
.cnp-panel{
  position:relative;border-radius:var(--r);padding:20px 22px 22px;color:#e8effa;
  background:linear-gradient(158deg,#16233a,#0f1a2b 68%,#0b1420);
  box-shadow:0 22px 46px rgba(15,26,43,.30);overflow:hidden;
}
.cnp-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 24px);
}
.cnp-panel-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;}
.cnp-panel-head span{font-size:11.5px;font-weight:800;letter-spacing:.3em;color:#bcd0ea;}
.cnp-panel-head em{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.24em;color:rgba(188,208,234,.5);}

.cnp-signal{position:relative;z-index:1;display:flex;align-items:flex-end;gap:5px;height:52px;margin:12px 0 4px;}
.cnp-signal i{flex:0 0 10px;border-radius:3px;background:rgba(255,255,255,.14);transition:background .25s,box-shadow .25s;}
.cnp-signal i:nth-child(1){height:14px;}
.cnp-signal i:nth-child(2){height:24px;}
.cnp-signal i:nth-child(3){height:35px;}
.cnp-signal i:nth-child(4){height:48px;}
.cnp-signal i.on{background:linear-gradient(180deg,#54e0ea,#12b3c6);box-shadow:0 0 12px rgba(84,224,234,.55);}
.cnp-signal b{margin-left:8px;font:800 13px/1.2 var(--num,"Bahnschrift",monospace);color:#8de6ee;}

.cnp-grid2{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;}
.cnp-panel label{display:block;font-size:11.5px;font-weight:700;color:#a3b8d4;margin-top:9px;}
.cnp-panel input{
  width:100%;height:35px;margin-top:4px;padding:0 10px;border:1.5px solid rgba(255,255,255,.16);border-radius:8px;
  background:rgba(255,255,255,.06);color:#eaf2fd;font:700 13.5px/33px var(--num,"Bahnschrift",monospace);outline:none;
}
.cnp-panel input:focus{border-color:#5cd6e4;box-shadow:0 0 0 3px rgba(92,214,228,.2);}
.cnp-panel .tsk-btn-main{
  background:linear-gradient(180deg,#3f74e8,#1b3f96);border:0;font-weight:800;
  box-shadow:0 10px 22px rgba(43,95,217,.34);
}
.cnp-panel-foot{margin-top:10px;font-size:10.5px;color:rgba(188,208,234,.6);text-align:center;}

/* ---- 结果 ---- */
.cnp-result{margin-top:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px;}
.cnp-res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;}
.cnp-res-card{background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:15px 17px;}
.cnp-res-card b{display:block;font:800 23px/1.15 var(--num,"Bahnschrift",monospace);color:var(--ink);font-variant-numeric:tabular-nums;}
.cnp-res-card span{display:block;font-size:11.5px;color:var(--faint);font-weight:700;margin-top:5px;}
.cnp-res-card i{display:block;font-style:normal;font-size:10.5px;color:var(--sub);margin-top:4px;line-height:1.5;}
.cnp-res-card.cnp-main{background:var(--cyan-soft);border-color:rgba(18,179,198,.34);}
.cnp-res-card.cnp-main b{color:var(--cobalt-d);font-size:19px;}

.cnp-bars{margin-top:16px;display:grid;gap:9px;}
.cnp-bar-row{display:grid;grid-template-columns:62px 1fr 66px;gap:10px;align-items:center;}
.cnp-bar-row span{font-size:11.5px;font-weight:800;color:var(--faint);}
.cnp-bar-row b{font:800 12px/1.4 var(--num,"Bahnschrift",monospace);color:var(--sub);text-align:right;}
.cnp-bar{height:13px;border-radius:99px;background:var(--line2);overflow:hidden;}
.cnp-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--cobalt),#5a86ea);transition:width .45s ease;}
.cnp-bar.cnp-b i{background:linear-gradient(90deg,var(--cyan),#5cd6e4);}
.cnp-bar.cnp-c i{background:linear-gradient(90deg,#9aa7bd,#78879e);}

.cnp-alert{margin-top:14px;padding:12px 15px;border-radius:10px;background:var(--cobalt-soft);border:1px solid rgba(43,95,217,.26);font-size:12.5px;line-height:1.8;color:var(--sub);}
.cnp-alert b{color:var(--cobalt-d);}
.cnp-alert.is-warn{background:rgba(184,70,60,.09);border-color:rgba(184,70,60,.3);}
.cnp-alert.is-warn b{color:var(--red);}

/* ---- 方案表 ---- */
.cnp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cnp-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-sm);min-width:680px;}
.cnp-table th,.cnp-table td{padding:12px 15px;text-align:left;font-size:12.5px;line-height:1.7;border-bottom:1px solid var(--line2);vertical-align:top;}
.cnp-table tr:last-child td{border-bottom:0;}
.cnp-table thead th{background:var(--card2);font-weight:800;color:var(--cobalt-d);font-size:12px;}
.cnp-table tbody tr:nth-child(even){background:var(--card2);}
.cnp-strong{font-weight:800;color:var(--ink);white-space:nowrap;}

/* ---- 带宽 ---- */
.cnp-speed{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;}
.cnp-speed-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:15px 17px;box-shadow:var(--shadow-sm);}
.cnp-speed-card b{display:inline-block;font:800 13px/1.4 var(--num,"Bahnschrift",monospace);color:var(--ink);}
.cnp-tag{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:99px;}
.cnp-tag-1{background:var(--cobalt-soft);color:#2b5fd9;}
.cnp-tag-2{background:var(--cyan-soft);color:#0e8b9b;}
.cnp-tag-3{background:rgba(43,95,217,.18);color:#1b3f96;}
.cnp-tag-4{background:rgba(193,134,44,.16);color:#a2761f;}
:root[data-theme="dark"] .cnp-tag-1{color:#a8c1f5;}
:root[data-theme="dark"] .cnp-tag-2{color:#66dbe8;}
:root[data-theme="dark"] .cnp-tag-3{color:#b9cdf7;}
:root[data-theme="dark"] .cnp-tag-4{color:#e2b86e;}
.cnp-speed-card p{margin:6px 0 0;font-size:12px;line-height:1.75;color:var(--sub);}

/* ---- 共享 ---- */
.cnp-share{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;}
.cnp-share-item{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 17px;box-shadow:var(--shadow-sm);position:relative;padding-left:42px;}
.cnp-share-item::before{
  content:"";position:absolute;left:16px;top:17px;width:12px;height:12px;border-radius:3px;
  background:var(--cyan);box-shadow:0 0 0 3px rgba(18,179,198,.16);
}
.cnp-share-item b{font-size:12.5px;font-weight:800;color:var(--cobalt-d);}
.cnp-share-item p{margin:5px 0 0;font-size:12px;line-height:1.75;color:var(--sub);}

@media (max-width:900px){
  .cnp-hero{grid-template-columns:1fr;gap:22px;}
}
@media (max-width:520px){
  .cnp-grid2{grid-template-columns:1fr;}
  .cnp-bar-row{grid-template-columns:52px 1fr 58px;}
}