/* =====================================================================
   modes.css: расширение channels.css
   Новые режимы: hud (Cyberpunk HUD), callout (Object Callout UI), therm (тепловизор),
   term (янтарный терминал), drone (FPV OSD), bp (Blueprint).
   А также: иконки соцсетей и стека, индикаторы, слои эффектов новых режимов.
   Подключается ПОСЛЕ channels.css.
   ===================================================================== */

/* ============ общее: иконки, чипы стека, индикаторы ============ */
.gl { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; overflow: visible; }
.ico { flex: 0 0 auto; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--accent); color: var(--accent); text-shadow: none; transition: background .15s, color .15s, border-color .15s; }
.mono { font-size: 15px; line-height: 1; letter-spacing: 0; text-transform: uppercase; }
.socials a:hover .ico, .chip:hover .ico { background: var(--accent2); border-color: var(--accent2); color: var(--bg); }
.socials { grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); }
.socials .hnd { overflow-wrap: break-word; }

.stack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 186px), 1fr)); gap: 10px; }
.chip { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); min-width: 0; }
.chip:hover { border-color: var(--accent2); }
.chip .ico { width: 34px; height: 34px; }
.chip .gl { width: 20px; height: 20px; }
.chip-txt { flex: 1; min-width: 0; }
.chip .nm { display: block; text-transform: uppercase; letter-spacing: .03em; font-size: 17px; line-height: 1.15; overflow-wrap: break-word; }
.chip .bar { display: block; height: 4px; margin-top: 4px; background: rgba(255, 255, 255, .14); }
.chip .bar b { display: block; height: 100%; background: var(--accent2); }

.meter { display: inline-block; width: 72px; height: 8px; border: 1px solid currentColor; vertical-align: middle; margin-left: 4px; }
.meter b { display: block; height: 100%; background: currentColor; opacity: .85; }
.hl { display: inline-block; background: var(--accent); color: #000; padding: 0 7px; text-shadow: none; }

/* подписи и рамка детектора (видны только в Callout) */
.co { display: none; }
.det { display: none; }

/* ============ палитры новых режимов ============ */
body[data-mode="hud"] {
  --bg: #04050d; --fg: #cffbff; --dim: #5f8fa6; --accent: #fcee0a; --accent2: #00f0ff; --hot: #ff2a6d;
  --line: rgba(0, 240, 255, .4); --vig: .6; --grain-op: .06;
  --img-filter: saturate(1.5) contrast(1.12) hue-rotate(-8deg);
  --glow: 0 0 8px rgba(0, 240, 255, .55);
}
body[data-mode="callout"] {
  --bg: #0c1014; --fg: #eef2f6; --dim: #8794a3; --accent: #ffd400; --accent2: #39ffb4; --hot: #ff5a4d;
  --line: rgba(255, 212, 0, .5); --vig: .35; --grain-op: .05;
  --img-filter: contrast(1.05) saturate(.9);
  --glow: 0 0 0 transparent;
}
body[data-mode="therm"] {
  --bg: #12001f; --fg: #ffe9c9; --dim: #b98aa6; --accent: #ff7a1a; --accent2: #ffd23f; --hot: #ff2f6a;
  --line: rgba(255, 160, 90, .42); --vig: .65; --grain-op: .14;
  --img-filter: url(#ironbow);
  --glow: 0 0 6px rgba(255, 120, 30, .45);
}
body[data-mode="term"] {
  --bg: #130b00; --fg: #ffb62e; --dim: #b07a14; --accent: #ffd978; --accent2: #ffb62e; --hot: #ff6a2e;
  --line: rgba(255, 182, 46, .5); --vig: .8; --grain-op: .18;
  --img-filter: grayscale(1) sepia(1) saturate(3.5) hue-rotate(-12deg) brightness(.95) contrast(1.15);
  --glow: 0 0 7px rgba(255, 170, 30, .7);
}
body[data-mode="drone"] {
  --bg: #0b1016; --fg: #ffffff; --dim: #b4bdc8; --accent: #ffe000; --accent2: #8dff9e; --hot: #ff4d4d;
  --line: rgba(255, 255, 255, .55); --vig: .75; --grain-op: .12;
  --img-filter: saturate(1.15) contrast(1.1) brightness(1.02);
  --glow: 1px 0 rgba(255, 0, 60, .35), -1px 0 rgba(0, 200, 255, .35);
}
body[data-mode="bp"] {
  --bg: #0c3b94; --fg: #eaf3ff; --dim: #a9c6f5; --accent: #ffffff; --accent2: #ffe27a; --hot: #ff9ab0;
  --line: rgba(234, 243, 255, .6); --vig: .3; --grain-op: .07;
  --img-filter: grayscale(1) contrast(1.25) brightness(1.1) sepia(1) hue-rotate(178deg) saturate(2.8);
  --glow: 0 0 0 transparent;
}

/* слои эффектов: по умолчанию скрыты */
.fx-hex, .fx-hudframe, .fx-horizon, .fx-scale { display: none; }

/* общие поправки слоёв по режимам */
body[data-mode="callout"] .fx-scan, body[data-mode="bp"] .fx-scan { display: none; }
body[data-mode="hud"] .fx-scan, body[data-mode="drone"] .fx-scan, body[data-mode="therm"] .fx-scan { opacity: .45; }
body[data-mode="callout"] .fx-corners, body[data-mode="bp"] .fx-corners { display: block; }
body[data-mode="bp"] .fx-vig { opacity: .45; }

/* ============ HUD: Cyberpunk ============ */
body[data-mode="hud"] .fx-hex {
  display: block; z-index: 4; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='24' viewBox='0 0 41.569 24.000' preserveAspectRatio='none'%3E%3Cpath d='M13.86 0.00 L6.93 12.00 L-6.93 12.00 L-13.86 0.00 L-6.93 -12.00 L6.93 -12.00Z M55.43 0.00 L48.50 12.00 L34.64 12.00 L27.71 0.00 L34.64 -12.00 L48.50 -12.00Z M13.86 24.00 L6.93 36.00 L-6.93 36.00 L-13.86 24.00 L-6.93 12.00 L6.93 12.00Z M55.43 24.00 L48.50 36.00 L34.64 36.00 L27.71 24.00 L34.64 12.00 L48.50 12.00Z M34.64 12.00 L27.71 24.00 L13.86 24.00 L6.93 12.00 L13.86 0.00 L27.71 0.00Z M34.64 -12.00 L27.71 0.00 L13.86 0.00 L6.93 -12.00 L13.86 -24.00 L27.71 -24.00Z M34.64 36.00 L27.71 48.00 L13.86 48.00 L6.93 36.00 L13.86 24.00 L27.71 24.00Z' fill='none' stroke='%2300f0ff' stroke-opacity='.28' stroke-width='.8'/%3E%3C/svg%3E") 0 0 / 42px 24px;
}
body[data-mode="hud"] .fx-hudframe {
  display: block; z-index: 8;
  background:
    repeating-linear-gradient(-45deg, var(--accent) 0 6px, #000 6px 12px) 0 0 / 24% 5px no-repeat,
    repeating-linear-gradient(-45deg, var(--accent2) 0 6px, transparent 6px 12px) 100% 100% / 24% 5px no-repeat,
    linear-gradient(var(--accent2), var(--accent2)) 0 0 / 2px 46px no-repeat,
    linear-gradient(var(--accent2), var(--accent2)) 100% 0 / 2px 46px no-repeat,
    linear-gradient(var(--hot), var(--hot)) 0 100% / 2px 46px no-repeat,
    linear-gradient(var(--hot), var(--hot)) 100% 100% / 2px 46px no-repeat;
}
body[data-mode="hud"] .fx-sweep { display: block; background: linear-gradient(90deg, transparent, rgba(0, 240, 255, .13), transparent); }
body[data-mode="hud"] .hud { text-shadow: 0 0 6px rgba(0, 240, 255, .5); }
body[data-mode="hud"] .hud small { color: var(--accent2); opacity: .8; }
body[data-mode="hud"] .hero h1 { color: var(--fg); text-shadow: 0 0 14px rgba(0, 240, 255, .55); }
body[data-mode="hud"] .panel-head { border-left: 4px solid var(--accent); background: linear-gradient(90deg, rgba(252, 238, 10, .14), transparent 65%); padding-top: 4px; padding-bottom: 4px; }
body[data-mode="hud"] .panel-head h2 { color: var(--accent); text-shadow: 2px 0 var(--hot), 0 0 12px rgba(252, 238, 10, .35); }
body[data-mode="hud"] .block {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(0, 240, 255, .09), rgba(255, 42, 109, .05) 70%), rgba(2, 6, 16, .74);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  box-shadow: inset 0 0 24px rgba(0, 240, 255, .08);
}
body[data-mode="hud"] .block::before, body[data-mode="hud"] .block::after { content: ""; position: absolute; pointer-events: none; }
body[data-mode="hud"] .block::before {
  top: -1px; right: -1px; width: 19px; height: 19px;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--accent2) 50%, transparent calc(50% + 1px));
}
body[data-mode="hud"] .block::after { top: 12px; left: -1px; width: 3px; height: 26px; background: var(--accent); }
body[data-mode="hud"] .block-tag { color: var(--accent); }
body[data-mode="hud"] .block-tag::before { content: "▮ "; color: var(--hot); }
body[data-mode="hud"] .block h3 { color: var(--accent2); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
body[data-mode="hud"] .btn { background: var(--accent); color: #000; border: 0; padding: 7px 18px; text-shadow: none; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
body[data-mode="hud"] .btn:hover { background: var(--accent2); }
body[data-mode="hud"] .chip, body[data-mode="hud"] .socials a { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); background: linear-gradient(135deg, rgba(0, 240, 255, .08), rgba(2, 6, 16, .7)); }
body[data-mode="hud"] .ico { border-color: var(--hot); color: var(--hot); }
body[data-mode="hud"] .chip .bar b { background: linear-gradient(90deg, var(--accent2), var(--accent)); }

/* ============ CALLOUT: Object Callout UI ============ */
body[data-mode="callout"] .block-photo, body[data-mode="callout"] .block-gif { --co: #39ffb4; }
body[data-mode="callout"] .block-video { --co: #ff5a4d; }
body[data-mode="callout"] .block-audio { --co: #4db8ff; }
body[data-mode="callout"] .block-link, body[data-mode="callout"] .socials li { --co: #ffffff; }
body[data-mode="callout"] .block-stack { --co: #ff9d2e; }
body[data-mode="callout"] .hero { --co: #ff5a4d; }
body[data-mode="callout"] .panel-head { --co: #4db8ff; }

body[data-mode="callout"] .grid { gap: 48px 30px; padding-top: 6px; }
body[data-mode="callout"] .panel-head { position: relative; margin: 30px 0 38px; }
body[data-mode="callout"] .hero { position: relative; width: fit-content; max-width: 100%; padding: 12px 24px 8px 6px; margin-top: 14px; }
body[data-mode="callout"] .socials { gap: 44px 16px; margin-top: 54px; }
body[data-mode="callout"] .socials li { position: relative; }
body[data-mode="callout"] .block { border-color: transparent; background: rgba(255, 255, 255, .015); outline: 1px solid rgba(255, 255, 255, .15); }
body[data-mode="callout"] .block-tag, body[data-mode="callout"] .block::after { display: none; }
body[data-mode="callout"] .block::before, body[data-mode="callout"] .hero::before, body[data-mode="callout"] .panel-head::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(var(--co, var(--accent)), var(--co, var(--accent))) 0 0 / 16px 2px no-repeat,
    linear-gradient(var(--co, var(--accent)), var(--co, var(--accent))) 0 0 / 2px 16px no-repeat,
    linear-gradient(var(--co, var(--accent)), var(--co, var(--accent))) 100% 0 / 16px 2px no-repeat,
    linear-gradient(var(--co, var(--accent)), var(--co, var(--accent))) 100% 0 / 2px 16px no-repeat,
    linear-gradient(var(--co, var(--accent)), var(--co, var(--accent))) 0 100% / 16px 2px no-repeat,
    linear-gradient(var(--co, var(--accent)), var(--co, var(--accent))) 0 100% / 2px 16px no-repeat,
    linear-gradient(var(--co, var(--accent)), var(--co, var(--accent))) 100% 100% / 16px 2px no-repeat,
    linear-gradient(var(--co, var(--accent)), var(--co, var(--accent))) 100% 100% / 2px 16px no-repeat;
}
body[data-mode="callout"] .hero::before, body[data-mode="callout"] .panel-head::before { inset: -4px -6px; }
body[data-mode="callout"] .panel-head { border-left-width: 0; padding-left: 12px; }
body[data-mode="callout"] .co {
  display: block; position: absolute; left: -1px; top: -21px; height: 20px; line-height: 20px; padding: 0 8px; z-index: 2;
  background: var(--co, var(--accent)); color: #000; font-size: 15px; letter-spacing: .05em; white-space: nowrap;
  text-shadow: none; text-transform: none; pointer-events: none;
}
body[data-mode="callout"] .hero .co, body[data-mode="callout"] .panel-head .co { top: -25px; left: -6px; }
body[data-mode="callout"] .co b { font-weight: normal; text-transform: uppercase; }
body[data-mode="callout"] .co::before { content: ""; position: absolute; left: calc(100% + 22px); top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: var(--co, var(--accent)); }
body[data-mode="callout"] .co::after { content: ""; position: absolute; left: 100%; top: 50%; width: 22px; height: 1px; background: var(--co, var(--accent)); }
body[data-mode="callout"] .co i { position: absolute; left: calc(100% + 34px); top: 0; font-style: normal; font-size: 14px; color: var(--dim); }
body[data-mode="callout"] .hud small { color: var(--accent); }
body[data-mode="callout"] .hud { text-shadow: 0 0 3px #000; }
body[data-mode="callout"] .btn { border-color: var(--co, var(--accent)); color: var(--co, var(--accent)); }
body[data-mode="callout"] .btn:hover { background: var(--co, var(--accent)); }
body[data-mode="callout"] .chip { border-color: rgba(255, 157, 46, .5); }

body[data-mode="callout"] .det {
  display: block; position: absolute; z-index: 11; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0;
  border: 1px solid var(--accent2); background: rgba(57, 255, 180, .06); box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 0 18px rgba(57, 255, 180, .25);
  transition: left .12s ease-out, top .12s ease-out, width .12s ease-out, height .12s ease-out, opacity .15s;
}
body[data-mode="callout"] .det.on { opacity: 1; }
body[data-mode="callout"] .det::before, body[data-mode="callout"] .det::after { content: ""; position: absolute; width: 14px; height: 14px; border: 3px solid var(--accent2); }
body[data-mode="callout"] .det::before { left: -3px; top: -3px; border-right: 0; border-bottom: 0; }
body[data-mode="callout"] .det::after { right: -3px; bottom: -3px; border-left: 0; border-top: 0; }
.det-card {
  position: absolute; top: -1px; left: 100%; margin-left: 28px; min-width: 150px; padding: 6px 11px; white-space: nowrap;
  font-size: 16px; line-height: 1.2; letter-spacing: .05em; color: var(--fg); background: rgba(6, 10, 14, .94);
  border: 1px solid var(--accent2); text-shadow: none; text-transform: uppercase;
}
.det-card b { font-weight: normal; color: var(--accent2); }
.det-card::before { content: ""; position: absolute; right: 100%; top: 11px; width: 28px; height: 1px; background: var(--accent2); }
.det-card::after { content: ""; position: absolute; right: calc(100% + 26px); top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent2); }
.det.flip .det-card { left: auto; right: 100%; margin: 0 28px 0 0; }
.det.flip .det-card::before { right: auto; left: 100%; }
.det.flip .det-card::after { right: auto; left: calc(100% + 26px); }
.det.inside .det-card { left: auto; right: 10px; top: 10px; margin: 0; }
.det.inside .det-card::before, .det.inside .det-card::after { display: none; }

/* ============ THERM: тепловизор ============ */
body[data-mode="therm"] .screen { background: radial-gradient(ellipse at 28% 18%, #2c0b4d, #12001f 70%); }
body[data-mode="therm"] .viewport { padding-right: clamp(70px, 8vw, 110px); }
body[data-mode="therm"] .fx-cross { display: block; opacity: .55; }
body[data-mode="therm"] .block { background: rgba(28, 0, 48, .55); border: 1px solid rgba(255, 140, 60, .45); box-shadow: inset 0 0 26px rgba(255, 90, 20, .1); }
body[data-mode="therm"] .block h3 { color: var(--accent2); }
body[data-mode="therm"] .panel-head { border-left-color: var(--accent2); }
body[data-mode="therm"] .fx-scale {
  display: block; z-index: 9; inset: 64px 14px 54px auto; width: 14px; border: 1px solid rgba(255, 255, 255, .65);
  background: linear-gradient(to top, #000 0, #2a0a6a 16%, #730a8c 33%, #d91a4d 50%, #ff7f0d 66%, #ffe64d 83%, #fff 100%);
}
.fx-scale span { position: absolute; right: 22px; font-size: 15px; line-height: 1; color: #fff; text-shadow: 1px 1px 0 #000, 0 0 4px #000; white-space: nowrap; }
.fx-scale .s-hi { top: -4px; }
.fx-scale .s-mid { top: 50%; margin-top: -8px; }
.fx-scale .s-lo { bottom: -4px; }
body[data-mode="therm"] .track.live { display: block; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border-color: var(--accent2); }
body[data-mode="therm"] .track::before, body[data-mode="therm"] .track::after { background: var(--accent2); }
body[data-mode="therm"] .track span { left: 30px; top: 50%; margin-top: -9px; padding: 0 6px; color: #fff; background: rgba(0, 0, 0, .6); font-size: 16px; }
body[data-mode="therm"] .ico { border-color: var(--accent2); color: var(--accent2); }

/* ============ TERM: янтарный терминал ============ */
body[data-mode="term"] .screen { margin: 4px 6px; border-radius: 18px / 14px; box-shadow: inset 0 0 0 1px rgba(255, 182, 46, .25); }
body[data-mode="term"] .fx-tint { display: block; background: rgba(255, 140, 0, .06); mix-blend-mode: screen; }
body[data-mode="term"] .fx-scan { opacity: 1; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .34) 0, rgba(0, 0, 0, .34) 1px, transparent 1px, transparent 3px); }
body[data-mode="term"] .viewport { animation: flicker 6s steps(1) infinite; }
body[data-mode="term"] .hero h1 { text-shadow: 0 0 14px rgba(255, 170, 30, .6); }
body[data-mode="term"] .tagline::after { content: "█"; margin-left: .25em; color: var(--fg); animation: blink 1s steps(1) infinite; }
body[data-mode="term"] .panel-head { border-left: 0; padding-left: 0; }
body[data-mode="term"] .panel-head h2 { text-transform: none; letter-spacing: .02em; }
body[data-mode="term"] .panel-head h2::before { content: "$ cat "; color: var(--dim); }
body[data-mode="term"] .sub { text-transform: none; letter-spacing: .03em; }
body[data-mode="term"] .sub::before { content: "# "; }
body[data-mode="term"] .block { border: 3px double var(--line); background: rgba(24, 12, 0, .55); padding-top: 10px; }
body[data-mode="term"] .block-tag { color: var(--dim); text-transform: none; letter-spacing: .06em; }
body[data-mode="term"] .block-tag::before { content: "[ "; }
body[data-mode="term"] .block-tag::after { content: " ]"; }
body[data-mode="term"] .block h3 { text-transform: none; color: var(--fg); letter-spacing: .02em; }
body[data-mode="term"] .block h3::before { content: "> "; color: var(--dim); }
body[data-mode="term"] .btn { border: 0; padding: 0; color: var(--fg); }
body[data-mode="term"] .btn::before { content: "[ "; }
body[data-mode="term"] .btn::after { content: " ]"; }
body[data-mode="term"] .btn:hover { background: var(--fg); color: var(--bg); }
body[data-mode="term"] .chip, body[data-mode="term"] .socials a { border-style: dashed; }
body[data-mode="term"] .ico { border-style: solid; }
body[data-mode="term"] .hud { text-transform: none; }

/* ============ DRONE: FPV OSD ============ */
body[data-mode="drone"] .viewport, body[data-mode="drone"] .hud { text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, var(--glow); }
body[data-mode="drone"] .fx-horizon { display: grid; place-items: center; z-index: 8; }
.fx-horizon::before {
  content: ""; grid-area: 1 / 1; width: min(56%, 520px); height: 230px; opacity: .72; animation: roll 9s ease-in-out infinite;
  background:
    linear-gradient(var(--fg), var(--fg)) 0 50% / 36% 2px no-repeat,
    linear-gradient(var(--fg), var(--fg)) 100% 50% / 36% 2px no-repeat,
    linear-gradient(var(--fg), var(--fg)) 36% 50% / 2px 10px no-repeat,
    linear-gradient(var(--fg), var(--fg)) 64% 50% / 2px 10px no-repeat,
    linear-gradient(var(--fg), var(--fg)) 50% 22% / 24% 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) 50% 78% / 24% 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) 50% 4% / 14% 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) 50% 96% / 14% 1px no-repeat;
}
.fx-horizon::after { content: ""; grid-area: 1 / 1; width: 16px; height: 16px; border: 2px solid var(--accent); border-radius: 50%; }
body[data-mode="drone"] .block { background: rgba(0, 0, 0, .38); border: 1px solid var(--line); }
body[data-mode="drone"] .block h3 { color: var(--accent); }
body[data-mode="drone"] .block-tag { color: var(--accent2); }
body[data-mode="drone"] .panel-head { border-left-color: var(--accent); }
body[data-mode="drone"] .ico { border-color: var(--fg); color: var(--fg); }
body[data-mode="drone"] .chip .bar b { background: var(--accent2); }

/* ============ BP: Blueprint ============ */
body[data-mode="bp"] .screen {
  background-color: #0c3b94;
  background-image:
    linear-gradient(rgba(255, 255, 255, .2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .2) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
}
body[data-mode="bp"] .grid { gap: 40px 24px; padding-top: 10px; }
body[data-mode="bp"] .block { background: rgba(8, 40, 112, .55); border: 1px dashed var(--line); margin-top: 0; }
body[data-mode="bp"] .block::before {
  content: attr(data-w) " mm"; position: absolute; left: 0; right: 0; top: -22px; height: 14px; line-height: 14px; text-align: center;
  font-size: 14px; letter-spacing: .08em; color: var(--accent2); pointer-events: none; text-shadow: none;
  background:
    linear-gradient(var(--line), var(--line)) 0 50% / calc(50% - 30px) 1px no-repeat,
    linear-gradient(var(--line), var(--line)) 100% 50% / calc(50% - 30px) 1px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) 100% 0 / 1px 100% no-repeat;
}
body[data-mode="bp"] .block-tag { color: var(--accent2); }
body[data-mode="bp"] .block h3 { color: var(--fg); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
body[data-mode="bp"] .panel-head { border-left: 0; border-bottom: 2px solid var(--fg); padding: 0 0 8px; }
body[data-mode="bp"] .hero h1 { text-shadow: none; }
body[data-mode="bp"] .btn { border-style: dashed; }
body[data-mode="bp"] .chip, body[data-mode="bp"] .socials a { border-style: dashed; background: rgba(8, 40, 112, .5); }
body[data-mode="bp"] .ico { border-style: dashed; }
body[data-mode="bp"] .hud { text-shadow: none; }
body[data-mode="bp"] .hud.br { border: 1px solid var(--fg); padding: 5px 10px; background: rgba(12, 59, 148, .9); }
body[data-mode="bp"] .hud small { color: var(--accent2); }

/* ============ анимации новых режимов ============ */
@keyframes roll { 0%, 100% { transform: rotate(-2.5deg) translateY(4px); } 50% { transform: rotate(3deg) translateY(-6px); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 91% { opacity: 1; } 92% { opacity: .9; } 93% { opacity: 1; } 96% { opacity: .95; } 97% { opacity: 1; } }

/* ============ адаптив ============ */
@media (max-width: 700px) {
  .modes { flex-wrap: nowrap; overflow-x: auto; width: 100%; justify-content: flex-start; scrollbar-width: none; }
  .modes::-webkit-scrollbar { display: none; }
  .modes button { flex: 0 0 auto; }
  body[data-mode="callout"] .co i { display: none; }
  body[data-mode="callout"] .grid { gap: 44px 16px; }
  body[data-mode="therm"] .viewport { padding-right: 56px; }
  body[data-mode="therm"] .fx-scale { right: 8px; width: 10px; }
  body[data-mode="therm"] .fx-scale span { right: 16px; font-size: 13px; }
  body[data-mode="bp"] .hud.br { display: none; }
  .fx-horizon::before { height: 170px; }
  .hud .meter { display: none; }
  body[data-mode="hud"] .hud.tr small, body[data-mode="drone"] .hud.tl small { display: none; }
}