/* qianceng-lang.cn — 潮汐与海浪：深海蓝绿 + 月白 + 沙金 */
:root{
  --abyss:#061a24;
  --deep:#0b2a38;
  --shelf:#10394a;
  --foam:#e9f4f3;
  --haze:#8fb3bd;
  --moon:#f3e9c8;
  --sand:#d9a05b;
  --kelp:#3fae96;
  --alarm:#e2705b;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--foam);
  background:linear-gradient(180deg,#041319 0%,var(--abyss) 38%,#04222d 100%);
  background-attachment:fixed;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",sans-serif;
  font-size:16px;line-height:1.8;
}
.bay{max-width:1060px;margin:0 auto;padding:0 20px}

/* ── 首屏 ───────────────────────────────────────── */
.crest{padding:44px 0 0;position:relative;overflow:hidden}
.wavetop{display:block;width:100%;height:auto;margin-top:26px}
h1{
  margin:0;font-weight:800;line-height:1.22;letter-spacing:.005em;
  font-size:clamp(17px,4.4vw,34px);
}
h1 .brandline{display:block}
h1 .role{
  display:block;margin-top:14px;font-weight:400;color:var(--kelp);
  font-size:clamp(14px,3.2vw,19px);letter-spacing:.05em;
}
.intro{margin:20px 0 0;color:var(--haze);font-size:15.5px;max-width:58ch}

.plain{
  margin:22px 0 0;padding:15px 17px;border-radius:10px;
  background:rgba(63,174,150,.09);border:1px solid rgba(63,174,150,.28);
  font-size:14.5px;color:#cfe4e0;
}
.plain b{color:var(--kelp)}

.anchors{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0 0;padding:0;list-style:none}
.anchors a{
  display:inline-block;font-size:13.5px;text-decoration:none;color:var(--moon);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:5px 14px;
}
.anchors a:hover{border-color:var(--kelp);color:var(--kelp)}

/* ── 区块 ───────────────────────────────────────── */
section{padding:42px 0}
h2{margin:0 0 8px;font-size:clamp(20px,4.6vw,29px);font-weight:700;line-height:1.3}
h2 small{display:block;font-size:12.5px;font-family:var(--mono);letter-spacing:.18em;color:var(--sand);font-weight:400;margin-bottom:7px}
h3{margin:24px 0 8px;font-size:17px}
.lead{margin:0 0 20px;color:var(--haze);font-size:15px;max-width:66ch}
p{margin:0 0 14px}

/* ── 观潮台：圆盘 + 读数 ────────────────────────── */
.deck{
  display:grid;gap:24px;grid-template-columns:minmax(0,230px) minmax(0,1fr);
  background:rgba(16,57,74,.55);border:1px solid rgba(143,179,189,.2);
  border-radius:16px;padding:22px;
}
@media (max-width:700px){ .deck{grid-template-columns:1fr} }
.dialwrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.dial{width:100%;max-width:210px;height:auto}
.dial-cap{font-family:var(--mono);font-size:12px;color:var(--haze);letter-spacing:.1em}

.pick label{display:block;font-size:12.5px;color:var(--haze);letter-spacing:.05em;margin-bottom:6px}
.pick select,.pick input[type=text]{
  font:inherit;font-size:15px;width:100%;padding:10px 12px;border-radius:9px;
  background:rgba(4,25,34,.7);color:var(--foam);border:1px solid rgba(143,179,189,.3);
}
.pick select:focus,.pick input:focus{outline:2px solid var(--kelp);outline-offset:1px}
.duo{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}

.readouts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-top:18px}
.ro{background:rgba(4,25,34,.55);border:1px solid rgba(143,179,189,.18);border-radius:10px;padding:12px 14px}
.ro .k{font-size:11.5px;color:var(--haze);letter-spacing:.09em}
.ro .v{font-size:clamp(17px,4.4vw,23px);font-weight:700;line-height:1.35;margin-top:3px}
.ro .v.big{color:var(--moon)}
.ro .v.hot{color:var(--sand)}
.ro .v.cool{color:var(--kelp)}

.bar{height:10px;border-radius:5px;background:rgba(4,25,34,.75);overflow:hidden;margin-top:16px;border:1px solid rgba(143,179,189,.18)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--kelp),var(--sand));border-radius:5px}
.explain{margin:14px 0 0;font-size:14px;color:#c6dbdd;min-height:3em}
.caveat{margin:12px 0 0;font-size:13px;color:var(--haze)}

/* ── 浪级表 ─────────────────────────────────────── */
.seatable{width:100%;border-collapse:collapse;margin-top:18px;font-size:14.5px}
.seatable caption{text-align:left;color:var(--haze);font-size:13px;padding-bottom:10px}
.seatable th,.seatable td{text-align:left;padding:9px 10px;border-bottom:1px solid rgba(143,179,189,.16)}
.seatable th{color:var(--sand);font-size:12.5px;letter-spacing:.07em;font-weight:600;white-space:nowrap}
.seatable td:first-child{font-family:var(--mono);color:var(--moon);width:3em}
.seatable tr.hit td{background:rgba(63,174,150,.18)}
.seatable tr.hit td:first-child{color:var(--kelp);font-weight:700}
.tablewrap{overflow-x:auto}

.verdictline{
  margin-top:16px;font-size:15.5px;background:rgba(4,25,34,.55);
  border-left:3px solid var(--sand);border-radius:0 9px 9px 0;padding:12px 15px;
}
.verdictline b{color:var(--sand)}

/* ── 条目列表 ───────────────────────────────────── */
.facts{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));margin:0;padding:0;list-style:none}
.facts li{
  background:rgba(16,57,74,.4);border:1px solid rgba(143,179,189,.16);
  border-radius:12px;padding:16px 18px;font-size:14.5px;
}
.facts b{display:block;color:var(--kelp);font-size:15px;margin-bottom:5px}

footer{padding:30px 0 48px;border-top:1px solid rgba(143,179,189,.18);color:var(--haze);font-size:13.5px}
footer a{color:var(--moon)}

/* ── 404 ────────────────────────────────────────── */
.adrift{padding:60px 0 84px;max-width:620px}
.adrift .sig{font-family:var(--mono);letter-spacing:.2em;color:var(--sand);font-size:12.5px}
.adrift p{color:var(--haze)}
.adrift a.shore{
  display:inline-block;margin-top:16px;padding:11px 22px;border-radius:9px;
  background:var(--kelp);color:#042028;text-decoration:none;font-weight:700;font-size:15px;
}

@media (max-width:520px){
  .bay{padding:0 15px}
  body{font-size:15.5px}
  section{padding:32px 0}
  .deck{padding:17px}
}