:root {
  --ink: #0b0d11;
  --paper: #f3f0e9;
  --cyan: #4ee8d1;
  --orange: #ff8b5c;
  --line: rgba(255, 255, 255, 0.13);
  --shell: min(1080px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #090b0f;
  color: #fff;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.shell { width: var(--shell); margin-inline: auto; }

.flash-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88px;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 850; letter-spacing: 0.18em; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.back-link { color: #8b9097; font-size: 13px; }
.back-link:hover { color: var(--cyan); }

.flash-hero { padding: 92px 0 58px; }
.eyebrow { color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: 0.24em; }
h1 { margin: 22px 0 26px; font-size: clamp(48px, 6.5vw, 82px); line-height: 1; letter-spacing: -0.055em; }
h1 em { color: var(--cyan); font-style: normal; }
.lead { max-width: 700px; color: #858a92; font-size: 17px; }

.compatibility {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #12161c;
}
.compatibility span { flex: none; padding: 4px 10px; border-radius: 99px; background: #303640; font-size: 11px; font-weight: 800; }
.compatibility p { margin: 0; color: #9398a0; font-size: 13px; }
.compatibility.ready { border-color: rgba(78, 232, 209, 0.28); }
.compatibility.ready span { background: rgba(78, 232, 209, 0.15); color: var(--cyan); }
.compatibility.error { border-color: rgba(255, 139, 92, 0.35); }
.compatibility.error span { background: rgba(255, 139, 92, 0.15); color: var(--orange); }

.board-warning { margin: 0 0 22px; padding: 16px 18px; border-left: 3px solid var(--orange); background: #15181e; }
.board-warning strong { color: var(--orange); font-size: 13px; }
.board-warning p { margin: 4px 0 0; color: #92979e; font-size: 12px; }

.device-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.device-card {
  min-height: 560px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
  transition: border-color 0.25s, transform 0.25s;
}
.device-card.accent { background: linear-gradient(145deg, rgba(78, 232, 209, 0.12), rgba(255, 255, 255, 0.02)); }
.device-card.selected { border-color: var(--cyan); transform: translateY(-3px); }
.card-head { display: flex; justify-content: space-between; align-items: center; }
.chip { color: #9298a0; font-size: 10px; letter-spacing: 0.16em; }
.state { padding: 5px 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); color: #9b9da0; font-size: 10px; letter-spacing: 0.08em; }
.state.live { background: rgba(78, 232, 209, 0.14); color: var(--cyan); }
.number { margin: 50px 0 7px; color: #50555d; font: 700 11px ui-monospace, monospace; }
.device-card h2 { margin: 0 0 14px; font-size: 31px; letter-spacing: -0.04em; }
.description { min-height: 78px; margin: 0; color: #8e9299; }
.device-card dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 32px 0; padding-top: 19px; border-top: 1px solid var(--line); }
.device-card dl div { display: flex; flex-direction: column; }
.device-card dt { color: #676c74; font-size: 9px; letter-spacing: 0.14em; }
.device-card dd { margin: 4px 0; font-size: 13px; }

.installer { min-height: 106px; margin-top: 28px; }
.installer.pending { display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 13px; color: #727780; font-size: 13px; text-align: center; }
.installer.pending p { margin: 0 20px; }
esp-web-install-button { display: block; }
.install-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  border-radius: 11px;
  background: var(--cyan);
  color: #07100f;
  cursor: pointer;
  font-weight: 850;
}
.install-button:hover { background: #78f4e2; }
.download-fallback { display: block; margin-top: 13px; color: #777d86; font-size: 12px; text-align: center; }
.download-fallback:hover { color: #fff; }
.slot-message { margin: 0; padding: 13px; border: 1px solid rgba(255, 139, 92, 0.35); border-radius: 10px; color: var(--orange); font-size: 12px; }

.instructions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 72px 0; padding-top: 34px; border-top: 1px solid var(--line); }
.step-number { color: var(--cyan); font: 700 10px ui-monospace, monospace; }
.instructions h3 { margin: 9px 0 8px; font-size: 18px; }
.instructions div > p:last-child { margin: 0; color: #7f848b; font-size: 13px; }
.warning { margin-bottom: 76px; padding: 24px 26px; border-left: 3px solid var(--orange); background: #15181e; }
.warning strong { color: var(--orange); }
.warning p { margin: 7px 0 0; color: #92979e; font-size: 13px; }
.warning code { padding: 2px 6px; border-radius: 4px; background: #282d34; }

footer { display: flex; justify-content: space-between; padding: 34px 0 48px; border-top: 1px solid var(--line); color: #626871; font-size: 11px; }
footer a:hover { color: var(--cyan); }

@media (max-width: 980px) {
  .device-grid { grid-template-columns: 1fr; }
  .device-card { min-height: auto; }
  .description { min-height: 0; }
}

@media (max-width: 760px) {
  :root { --shell: min(100% - 30px, 620px); }
  .flash-nav { height: 72px; }
  .flash-hero { padding: 62px 0 42px; }
  h1 { font-size: 48px; }
  .lead { font-size: 15px; }
  .compatibility { align-items: flex-start; }
  .device-grid, .instructions { grid-template-columns: 1fr; }
  .device-card { min-height: auto; padding: 23px; }
  .description { min-height: 0; }
  .instructions { gap: 20px; }
  footer { flex-direction: column; gap: 8px; }
}