/* ==========================================================================
   panel-polish-v221.css — 行情面板 / 实时公交(Chelaile) / 美国潮汐(NOAA) 美化
   ==========================================================================
   纯新增文件,只用更精确的选择器覆盖这三块面板已有的类名(.us-sector-*、
   #ctDrawer 内部、#noaaTidesDrawer 内部),不改 style.css 一个字节,不影响
   其它复用同一批基础类(.news-drawer/.risk-btn等)的面板。零风险,加载顺序
   排在 style.css 之后即可生效(优先级靠更具体的选择器,不用 !important)。
   ========================================================================== */

/* -------------------- 1) 行情面板(美股/A股/期货 · nf-modal 里的 us-sector-*) -------------------- */

.nf-modal .us-sector-head{
  margin-bottom:12px;
}
.nf-modal .us-sector-title{
  font-size:15px;
  letter-spacing:0.01em;
}
.nf-modal .us-sector-status{
  font-weight:700;
  box-shadow:0 1px 3px rgba(42,38,32,0.08);
}
.nf-modal .us-sector-status.open{
  background:linear-gradient(135deg,rgba(95,190,138,0.22),rgba(95,190,138,0.1));
  position:relative;
}
.nf-modal .us-sector-status.open::before{
  content:'';
  display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:#2E7D53;
  margin-right:5px;
  box-shadow:0 0 0 3px rgba(46,125,83,0.22);
  animation:usSectorLivePulse 1.6s ease-in-out infinite;
  vertical-align:1px;
}
@keyframes usSectorLivePulse{
  0%,100%{opacity:1;}
  50%{opacity:0.35;}
}

.nf-modal .us-sector-grid{
  gap:9px;
}
.nf-modal .us-sector-card{
  position:relative;
  background:linear-gradient(165deg,rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.5) 100%);
  border:1px solid rgba(255,255,255,0.65);
  border-radius:13px;
  padding:11px 12px;
  box-shadow:0 2px 8px rgba(42,38,32,0.07),inset 0 1px 0 rgba(255,255,255,0.6);
  transition:transform .15s ease,box-shadow .15s ease;
  overflow:hidden;
}
.nf-modal .us-sector-card::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:linear-gradient(180deg,var(--amber-dim),transparent);
  opacity:0.55;
}
.nf-modal .us-sector-card:active{
  transform:scale(0.97);
  box-shadow:0 1px 4px rgba(42,38,32,0.08);
}
.nf-modal .us-sector-icon{
  font-size:16px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,0.12));
}
.nf-modal .us-sector-name{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.005em;
}
.nf-modal .us-sector-ticker{
  font-size:8px;
  letter-spacing:0.03em;
  opacity:0.85;
}
.nf-modal .us-sector-pct{
  font-size:13px;
  font-weight:800;
  padding:2px 7px;
  border-radius:7px;
  letter-spacing:0.01em;
}
.nf-modal .us-sector-pct.up{
  background:rgba(46,125,83,0.13);
  color:#2E7D53;
}
.nf-modal .us-sector-pct.down{
  background:rgba(193,73,63,0.13);
  color:#C1493F;
}
.nf-modal .us-sector-note{
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed rgba(42,38,32,0.14);
  line-height:1.7;
}

/* 暗色主题(nf-dark)下的行情卡片同步微调,保持和亮色版一致的层次感 */
.nf-modal.nf-dark .us-sector-card{
  background:linear-gradient(165deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.02) 100%);
  border-color:rgba(246,241,228,0.12);
  box-shadow:0 2px 10px rgba(0,0,0,0.28),inset 0 1px 0 rgba(255,255,255,0.05);
}
.nf-modal.nf-dark .us-sector-card::before{
  background:linear-gradient(180deg,var(--amber),transparent);
}
.nf-modal.nf-dark .us-sector-pct.up{ background:rgba(126,217,166,0.14); color:#7ED9A6; }
.nf-modal.nf-dark .us-sector-pct.down{ background:rgba(232,116,106,0.14); color:#E8746A; }
.nf-modal.nf-dark .us-sector-status.open{
  background:linear-gradient(135deg,rgba(126,217,166,0.2),rgba(126,217,166,0.06));
}
.nf-modal.nf-dark .us-sector-status.open::before{
  background:#7ED9A6;
  box-shadow:0 0 0 3px rgba(126,217,166,0.25);
}

/* -------------------- 2) 实时公交(Chelaile) · #ctDrawer -------------------- */

#ctDrawer{
  --ct-azure:#3D6B8A;
  background:linear-gradient(175deg,#FBF8F0 0%,#F3EEE0 100%);
}
#ctDrawer .risk-head{
  border-bottom:1px solid rgba(61,107,138,0.16);
  padding-bottom:10px;
}
#ctDrawer .risk-title{
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:17px;
  display:flex;
  align-items:center;
  gap:9px;
}
#ctDrawer .risk-title::before{
  content:'';
  width:5px;height:18px;border-radius:3px;
  background:linear-gradient(180deg,var(--ct-azure),transparent);
  display:inline-block;flex:0 0 auto;
}
#ctDrawer .risk-btn{
  border-radius:16px;
  font-weight:600;
  letter-spacing:0.02em;
}
#ctDrawer input[type="text"],
#ctDrawer input[type="search"]{
  border-radius:10px !important;
  border:1px solid rgba(61,107,138,0.25) !important;
  background:rgba(255,255,255,0.7) !important;
  transition:border-color .15s ease,box-shadow .15s ease;
}
#ctDrawer input[type="text"]:focus,
#ctDrawer input[type="search"]:focus{
  outline:none;
  border-color:var(--ct-azure) !important;
  box-shadow:0 0 0 3px rgba(61,107,138,0.14);
}

/* 附近站点 / 搜索结果行 —— 卡片化,替代原本news-row那种简陋的横条 */
#ctDrawer .news-row{
  background:rgba(255,255,255,0.6);
  border:1px solid rgba(61,107,138,0.1);
  border-radius:11px;
  padding:10px 12px;
  margin-bottom:8px;
  box-shadow:0 1px 3px rgba(42,38,32,0.05);
  border-top:none !important;
}
#ctDrawer .news-row:active{
  background:rgba(61,107,138,0.08);
}

/* 线路/到站行(transit-route-row 已在 style.css 定义基础布局,这里只做质感升级) */
.transit-route-row{
  border-radius:10px;
  padding:8px 9px !important;
  transition:background .12s ease;
}
.transit-route-row:active{
  background:rgba(61,107,138,0.08);
}
.transit-route-row + .transit-route-row{
  border-top:1px dashed rgba(42,38,32,0.1) !important;
}
.transit-badge{
  font-family:'IBM Plex Mono',monospace;
  letter-spacing:0.02em;
  box-shadow:0 1px 3px rgba(0,0,0,0.15);
}
.transit-route-name{
  font-weight:700;
}
.transit-cd{
  font-family:'IBM Plex Mono',monospace;
  padding:2px 8px;
  border-radius:10px;
}
.transit-cd.cd-ok{
  background:rgba(61,107,79,0.12);
}
.transit-cd.cd-soon{
  background:rgba(181,121,58,0.14);
}
.transit-cd.cd-gone{
  background:rgba(107,101,87,0.1);
}

/* "看车"实时车辆图钉 —— 呼吸感更强,和静态图层的公交点区分开 */
.m-transit-highlight{
  border-color:var(--ct-azure);
}

/* -------------------- 3) 美国潮汐(NOAA) · #noaaTidesDrawer -------------------- */

#noaaTidesDrawer{
  --ntp-teal:#2E6E7A;
  background:linear-gradient(175deg,#F6FBFA 0%,#EAF3F1 100%);
}
#noaaTidesDrawer .risk-head{
  border-bottom:1px solid rgba(46,110,122,0.16);
  padding-bottom:10px;
}
#noaaTidesDrawer .risk-title{
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:17px;
  display:flex;
  align-items:center;
  gap:9px;
}
#noaaTidesDrawer .risk-title::before{
  content:'🌊';
  font-size:15px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}
#noaaTidesDrawer .risk-btn{
  border-radius:16px;
  font-weight:600;
}
#noaaTidesDrawer input[type="text"]{
  border-radius:10px !important;
  border:1px solid rgba(46,110,122,0.25) !important;
  background:rgba(255,255,255,0.75) !important;
  transition:border-color .15s ease,box-shadow .15s ease;
}
#noaaTidesDrawer input[type="text"]:focus{
  outline:none;
  border-color:var(--ntp-teal) !important;
  box-shadow:0 0 0 3px rgba(46,110,122,0.14);
}
#noaaTidesDrawer .ntp-preset-btn{
  background:rgba(46,110,122,0.08) !important;
  border-color:rgba(46,110,122,0.3) !important;
  color:var(--ntp-teal) !important;
  border-radius:14px !important;
}
#noaaTidesDrawer .ntp-preset-btn:active{
  background:rgba(46,110,122,0.18) !important;
}

/* 查询结果卡片(ntpSnapshotCard复用了 .info-window,这里针对NOAA场景加质感, */
/* 用属性选择器只命中 #noaaTidesDrawer 内部,不影响地图上其它 info-window 弹窗) */
#noaaTidesDrawer #ntpLog .info-window{
  background:linear-gradient(180deg,#FFFFFF,#F1F8F7);
  border:1px solid rgba(46,110,122,0.16);
  border-radius:14px;
  box-shadow:0 3px 12px rgba(20,40,40,0.08);
  max-width:none;
  padding:13px 15px;
}
#noaaTidesDrawer #ntpLog .info-window b{
  font-family:'Fraunces',serif;
  color:var(--ntp-teal);
}
#noaaTidesDrawer #ntpLog > div + div{
  margin-top:10px;
}