/* ===== WIND FARM VIZ — Morandi Light (风电低饱和配色) ===== */
:root{
  /* 底色：暖纸白 / 米灰 */
  --bg:#f1ede6; --bg2:#e7e2d8;
  --card:#fbfaf6; --glass-fill:#fbfaf6;
  --line:#d6cfc2; --line-strong:#c2b9a8;
  --txt:#3b3f46;        /* 暖炭灰，比纯黑柔和 */
  --sub:#73787f;        /* 次级文字 */
  --sub-soft:#9a9ea5;

  /* 莫兰迪风电数据色（低饱和、投影可读） */
  --blue:#6b8cae;       /* 雾蓝 主色 */
  --blue-deep:#547394;  /* 深雾蓝 */
  --blue-soft:#9db1c7;
  --sage:#8aa17a;       /* 鼠尾草绿 P2/增益 */
  --sage-deep:#6f8761;
  --clay:#b08968;       /* 灰陶土 暖色强调/阵列 */
  --lavender:#8e88a6;   /* 灰薰衣草 POD/第三序列 */
  --gold:#c2a86b;       /* 暖金 目标/标记 */
  --rose:#b98484;       /* 灰玫瑰 对比/负向 */
  --accent:var(--blue);

  /* 投影柔和阴影（深色阴影在浅底上要轻） */
  --glow:0 10px 30px rgba(74,70,60,0.10), 0 1px 2px rgba(74,70,60,0.06);
  --radius:20px;

  /* Plotly 用：图表区底色比卡片略暖，网格线 */
  --plot-bg:#f6f3ec;
  --grid:#e2dccf;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);
  font-family:"SF Pro Display","Inter",-apple-system,"PingFang SC","Noto Sans SC",sans-serif;
  font-size:14px;line-height:1.6;min-height:100vh;
  background-image:
    radial-gradient(ellipse 80% 60% at 10% 15%,rgba(107,140,174,0.10) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 85%,rgba(138,161,122,0.08) 0%,transparent 60%);
  background-attachment:fixed}
a{color:var(--blue-deep);text-decoration:none}a:hover{color:var(--blue)}
::selection{background:rgba(107,140,174,0.22);color:var(--txt)}

nav{position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(241,237,230,0.86);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:56px}
.brand{font-size:13px;font-weight:800;color:var(--txt);line-height:1.3}
.nav-links{display:flex;gap:2px;flex-wrap:wrap}
.nav-links a{font-size:12px;color:var(--sub);padding:5px 8px;border-radius:8px;transition:all .15s;white-space:nowrap}
.nav-links a:hover{color:var(--txt);background:rgba(107,140,174,0.10)}
.nav-links a.active{color:var(--blue-deep);background:rgba(107,140,174,0.14);font-weight:600}
@media(max-width:1100px){.nav-inner{flex-wrap:wrap;height:auto;padding:8px 16px;gap:6px}.nav-links{overflow-x:auto;flex-wrap:nowrap;max-width:100%}.brand{white-space:nowrap}}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;margin-bottom:18px;box-shadow:var(--glow)}

.hero{padding:104px 0 40px;text-align:center}
.hero-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--blue-deep);border:1px solid rgba(107,140,174,0.35);border-radius:999px;
  padding:5px 16px;margin-bottom:20px;background:rgba(107,140,174,0.08)}
.hero-title{font-size:40px;font-weight:800;color:var(--txt);line-height:1.15;margin-bottom:12px;letter-spacing:-.5px}
.hero-title span{color:var(--blue);display:block}
.hero-sub{font-size:15px;color:var(--sub);max-width:760px;margin:0 auto;line-height:1.7}
.hero-badges{margin-top:24px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.badge{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:12px;color:var(--sub);box-shadow:0 1px 2px rgba(74,70,60,0.04)}

.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 20px;
  text-align:center;box-shadow:var(--glow);transition:transform .25s,border-color .25s,box-shadow .25s}
.stat-card:hover{transform:translateY(-2px);border-color:var(--blue-soft);box-shadow:0 14px 36px rgba(107,140,174,0.18)}
.stat-number{font-size:32px;font-weight:800;color:var(--blue);line-height:1}
.stat-unit{font-size:16px;color:var(--blue);margin-left:2px}
.stat-label{font-size:12px;color:var(--sub);margin-top:8px}

.section-title{font-size:13px;font-weight:700;color:var(--sub-soft);letter-spacing:2px;text-transform:uppercase;margin:0 0 16px 4px}
.page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.page-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 20px;
  box-shadow:var(--glow);transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden}
.page-card:hover{transform:translateY(-3px);border-color:var(--blue-soft);box-shadow:0 16px 40px rgba(107,140,174,0.18)}
.page-card .ic{font-size:28px;margin-bottom:8px}
.page-card .nm{font-size:14px;font-weight:700;color:var(--txt);margin-bottom:6px}
.page-card .ds{font-size:12px;color:var(--sub);line-height:1.5;margin-bottom:8px}
.page-tag{display:inline-block;font-size:10px;font-weight:700;padding:3px 8px;border-radius:8px;letter-spacing:.8px;text-transform:uppercase}
.tag-core{background:rgba(107,140,174,0.12);color:var(--blue-deep);border:1px solid rgba(107,140,174,0.28)}
.tag-3d{background:rgba(142,136,166,0.12);color:#6f6a86;border:1px solid rgba(142,136,166,0.28)}
.tag-analysis{background:rgba(138,161,122,0.12);color:var(--sage-deep);border:1px solid rgba(138,161,122,0.30)}
.tag-ai{background:rgba(176,137,104,0.12);color:#8f6a4d;border:1px solid rgba(176,137,104,0.30)}
.tag-pod{background:rgba(142,136,166,0.12);color:#6f6a86;border:1px solid rgba(142,136,166,0.28)}
.tag-array{background:rgba(194,168,107,0.12);color:#9c8449;border:1px solid rgba(194,168,107,0.30)}
.tag-control{background:rgba(138,161,122,0.12);color:var(--sage-deep);border:1px solid rgba(138,161,122,0.30)}

section{padding:40px 0;scroll-margin-top:120px}
.pg-hero{padding:88px 0 28px;text-align:center}
.pg-hero h1{font-size:28px;font-weight:800;color:var(--txt);margin-bottom:8px;letter-spacing:-.3px}
.pg-hero p{color:var(--sub);font-size:14px;max-width:620px;margin:0 auto}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.grid2,.grid3{grid-template-columns:1fr}.page-grid{grid-template-columns:1fr 1fr}.stats-bar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.page-grid{grid-template-columns:1fr}.stats-bar{grid-template-columns:1fr}}

.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.btn{background:rgba(107,140,174,0.10);border:1px solid rgba(107,140,174,0.28);color:var(--blue-deep);
  border-radius:10px;padding:7px 14px;font-size:13px;cursor:pointer;transition:all .18s;font-weight:500}
.btn:hover{background:rgba(107,140,174,0.18);border-color:rgba(107,140,174,0.45)}
.btn.active{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:700;box-shadow:0 2px 8px rgba(107,140,174,0.35)}
input[type=number],input[type=range],input[type=text],select{
  background:var(--card);border:1px solid var(--line-strong);color:var(--txt);
  border-radius:10px;padding:8px 12px;font-size:14px;width:130px}
input[type=range]{-webkit-appearance:none;height:6px;padding:0;border-radius:3px;background:linear-gradient(90deg,var(--bg2),rgba(107,140,174,0.35))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--blue);cursor:pointer;border:2px solid var(--card);box-shadow:0 1px 4px rgba(84,115,148,0.4)}
input[type=number]:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(107,140,174,0.15)}
label{font-size:13px;color:var(--sub)}
select{background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),linear-gradient(135deg,var(--sub) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;-webkit-appearance:none;appearance:none;padding-right:30px}

.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(74,70,60,0.04)}
.stat .v{font-size:26px;font-weight:800;color:var(--txt)}
.stat .k{font-size:12px;color:var(--sub);margin-top:2px}
.stat .v.cyan{color:var(--sage-deep)}
.stat .v.blue{color:var(--blue-deep)}
.stat .v.indigo{color:#6f6a86}
.stat .v.amber{color:var(--clay)}
.stat .v.green{color:var(--sage-deep)}

.img-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.img-grid img{width:100%;border-radius:14px;border:1px solid var(--line)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.gallery img{width:100%;border-radius:12px;border:1px solid var(--line);transition:transform .3s}
.gallery img:hover{transform:scale(1.03)}
.card img{background:var(--plot-bg);border-radius:12px;border:1px solid var(--line);max-width:100%;display:block}
.card .img-grid img{background:transparent}

.code{font-family:"SFMono-Regular",Consolas,"Fira Code",monospace;font-size:12.5px;
  background:#f3eee4;border:1px solid var(--line);border-radius:12px;padding:14px;
  color:#547394;white-space:pre-wrap;line-height:1.7}
.kw{color:#8a6f9e}.fn{color:var(--blue-deep)}.cm{color:var(--sub-soft)}
.note{font-size:12.5px;color:var(--sub);margin-top:10px;line-height:1.7}
.good{color:var(--sage-deep);font-weight:600}.warn{color:var(--clay);font-weight:600}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:6px;background:rgba(142,136,166,0.12);color:#6f6a86;border:1px solid rgba(142,136,166,0.22);margin-left:8px}

.tech-bar{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 28px;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:8px;box-shadow:0 1px 2px rgba(74,70,60,0.04)}
.tech-label{font-size:11px;color:var(--blue-deep);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;opacity:.75}
.tech-items{display:flex;gap:8px;flex-wrap:wrap}
.tech-item{background:rgba(107,140,174,0.07);border:1px solid rgba(107,140,174,0.16);color:var(--sub);font-size:11px;padding:3px 10px;border-radius:6px}

.plotly-container{width:100%;min-height:400px}
.js-plotly-plot .plotly .modebar{top:8px!important;right:8px!important}
.js-plotly-plot .plotly .modebar-btn svg{opacity:.55}
.js-plotly-plot .plotly .modebar-btn:hover svg{opacity:1}

footer{padding:40px 0 60px;color:var(--sub);font-size:12.5px;text-align:center;border-top:1px solid var(--line);margin-top:30px}

/* ===== 数据来源状态条（固定在 nav 下方） ===== */
.wf-banner-spacer{display:block;width:100%}
.wf-banner{position:fixed;top:56px;left:0;right:0;z-index:99;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 24px;font-size:12px;line-height:1.5;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.wf-banner-icon{font-size:14px}
.wf-banner-tag{font-weight:700;letter-spacing:.3px;padding:2px 9px;border-radius:999px;font-size:11px}
.wf-banner-sep{color:var(--line-strong)}
.wf-banner-text{color:var(--sub)}
.wf-banner-close{margin-left:auto;background:transparent;border:none;color:var(--sub);font-size:18px;line-height:1;cursor:pointer;padding:0 4px;border-radius:6px}
.wf-banner-close:hover{color:var(--txt);background:rgba(74,70,60,0.08)}
.wf-banner-warn{flex-basis:100%;color:#a07b2f;font-size:11.5px}
/* 模拟占位：暖琥珀 */
.wf-banner-sim{background:rgba(194,168,107,0.12);border-bottom-color:rgba(194,168,107,0.35)}
.wf-banner-sim .wf-banner-tag{background:rgba(194,168,107,0.18);color:#8a7240;border:1px solid rgba(194,168,107,0.4)}
/* 初步真实：雾蓝 */
.wf-banner-prov{background:rgba(107,140,174,0.10);border-bottom-color:rgba(107,140,174,0.30)}
.wf-banner-prov .wf-banner-tag{background:rgba(107,140,174,0.16);color:var(--blue-deep);border:1px solid rgba(107,140,174,0.35)}
/* 已验证：鼠尾草绿 */
.wf-banner-valid{background:rgba(138,161,122,0.10);border-bottom-color:rgba(138,161,122,0.30)}
.wf-banner-valid .wf-banner-tag{background:rgba(138,161,122,0.18);color:var(--sage-deep);border:1px solid rgba(138,161,122,0.38)}
@media(max-width:640px){.wf-banner{padding:8px 14px;font-size:11px}.wf-banner-text{display:none}.wf-banner-warn{font-size:11px}}