@jjlmoya/utils-drones 1.23.0 → 1.24.0

package/src/tool/fpv-drone-thrust-to-weight-ratio/dom-views.ts

@@ -0,0 +1,148 @@
+import type { DroneTwrInputs, DroneTwrResults, AgilityTier } from './logic';
+import type { AgilityEvaluation } from './evaluator';
+import type { FpvDroneThrustToWeightRatioUI } from './ui';
+
+export interface DOMResultElements {
+  twrRatio: HTMLElement;
+  hoverThrottle: HTMLElement;
+  currentThrust: HTMLElement;
+  instantGForce: HTMLElement;
+  zeroToHundred: HTMLElement;
+  recommendedCamAngle: HTMLElement;
+  windResistance: HTMLElement;
+  totalMaxThrust: HTMLElement;
+  maxPitchAngle: HTMLElement;
+  tpaSetting?: HTMLElement;
+  dynamicIdleSetting?: HTMLElement;
+  propwashRisk?: HTMLElement;
+  agilityBadge: HTMLElement;
+  statusTitle: HTMLElement;
+  statusDesc: HTMLElement;
+  svgContainer: HTMLElement;
+  stickPercentBadge?: HTMLElement;
+}
+
+export function getTierColor(tier: AgilityTier): string {
+  if (tier === 'underpowered') return '#ef4444';
+  if (tier === 'cinematic') return '#0284c7';
+  if (tier === 'freestyle') return '#10b981';
+  if (tier === 'acro_pro') return '#8b5cf6';
+  return '#f59e0b';
+}
+
+function renderDroneVectors(stickPercent: number, tierColor: string, camAngle: number): string {
+  const vHeight = Math.max(10, (stickPercent / 100) * 60);
+  const opacity = Math.min(1, Math.max(0.25, stickPercent / 100));
+  const tiltAngle = (camAngle - 20) * 0.4;
+  return `<g transform="translate(130, 115) rotate(${tiltAngle})">
+    <polygon points="0,-18 55,${-18 - camAngle * 0.6} 55,${-18 + camAngle * 0.6}" fill="var(--n-primary, #38bdf8)" fill-opacity="0.08" stroke="var(--n-primary, #38bdf8)" stroke-dasharray="2,2" stroke-width="1"/>
+    <line x1="-80" y1="0" x2="80" y2="0" stroke="var(--n-svg-stroke, #334155)" stroke-width="4.5" stroke-linecap="round"/>
+    <line x1="-35" y1="0" x2="0" y2="-18" stroke="var(--n-primary, #38bdf8)" stroke-width="3"/>
+    <circle cx="0" cy="-18" r="8" fill="var(--n-primary, #38bdf8)" fill-opacity="0.35" stroke="var(--n-primary, #38bdf8)" stroke-width="2"/>
+    <rect x="-24" y="-8" width="48" height="16" rx="4" fill="var(--n-svg-card, #0f172a)" stroke="var(--n-svg-stroke, #334155)" stroke-width="2"/>
+    <circle cx="0" cy="0" r="4" fill="${tierColor}"/>
+    
+    <g transform="translate(-80, 0)">
+      <ellipse cx="0" cy="-3" rx="20" ry="4" fill="${tierColor}" fill-opacity="0.2" stroke="${tierColor}" stroke-width="1"/>
+      <rect x="-10" y="-4" width="20" height="8" rx="2" fill="var(--n-svg-inner, #1e293b)" stroke="${tierColor}" stroke-width="1.5"/>
+      <line x1="0" y1="-4" x2="0" y2="${-4 - vHeight}" stroke="${tierColor}" stroke-width="3.5" stroke-linecap="round" opacity="${opacity}"/>
+      <polygon points="-5,${-4 - vHeight + 5} 5,${-4 - vHeight + 5} 0,${-4 - vHeight}" fill="${tierColor}" opacity="${opacity}"/>
+    </g>
+    
+    <g transform="translate(80, 0)">
+      <ellipse cx="0" cy="-3" rx="20" ry="4" fill="${tierColor}" fill-opacity="0.2" stroke="${tierColor}" stroke-width="1"/>
+      <rect x="-10" y="-4" width="20" height="8" rx="2" fill="var(--n-svg-inner, #1e293b)" stroke="${tierColor}" stroke-width="1.5"/>
+      <line x1="0" y1="-4" x2="0" y2="${-4 - vHeight}" stroke="${tierColor}" stroke-width="3.5" stroke-linecap="round" opacity="${opacity}"/>
+      <polygon points="-5,${-4 - vHeight + 5} 5,${-4 - vHeight + 5} 0,${-4 - vHeight}" fill="${tierColor}" opacity="${opacity}"/>
+    </g>
+  </g>`;
+}
+
+function renderDroneStage(inputs: DroneTwrInputs, results: DroneTwrResults, ui: FpvDroneThrustToWeightRatioUI): string {
+  const tierColor = getTierColor(results.agilityTier);
+  const vectorsHtml = renderDroneVectors(inputs.throttleStickPercent, tierColor, results.recommendedCamAngleDeg);
+  return `<g transform="translate(15, 15)">
+    <rect x="0" y="0" width="250" height="180" rx="14" fill="var(--n-svg-card, #0f172a)" stroke="var(--n-svg-stroke, #334155)" stroke-width="2" />
+    <text x="15" y="24" fill="var(--n-text-muted, #94a3b8)" font-size="10" font-weight="700" letter-spacing="0.5">${ui.hudVectorPowerLabel.toUpperCase()}</text>
+    <text x="235" y="24" fill="${tierColor}" font-size="11" font-weight="800" text-anchor="end">${results.instantGForce.toFixed(2)}G</text>
+    ${vectorsHtml}
+    <text x="125" y="152" fill="var(--n-text, #f8fafc)" font-size="15" font-weight="900" text-anchor="middle">${results.currentThrustGrams.toLocaleString()} g</text>
+    <text x="125" y="168" fill="var(--n-text-muted, #94a3b8)" font-size="9" font-weight="600" text-anchor="middle">STICK @ ${inputs.throttleStickPercent}% | CAM ${results.recommendedCamAngleDeg}°</text>
+  </g>`;
+}
+
+function renderCurvePoints(results: DroneTwrResults, inputs: DroneTwrInputs): string {
+  const hoverX = 25 + (results.hoverThrottlePercent / 100) * 190;
+  const hoverY = 145 - Math.pow(results.hoverThrottlePercent / 100, 1.8) * 105;
+  const stickX = 25 + (inputs.throttleStickPercent / 100) * 190;
+  const stickY = 145 - Math.pow(inputs.throttleStickPercent / 100, 1.8) * 105;
+  return `<g>
+    <rect x="${25 + 0.25 * 190}" y="40" width="${0.35 * 190}" height="105" fill="var(--n-primary, #38bdf8)" fill-opacity="0.06"/>
+    <rect x="${25 + 0.70 * 190}" y="40" width="${0.30 * 190}" height="105" fill="#f59e0b" fill-opacity="0.08"/>
+    <line x1="${hoverX}" y1="40" x2="${hoverX}" y2="145" stroke="#38bdf8" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.7"/>
+    <circle cx="${hoverX}" cy="${hoverY}" r="4.5" fill="#38bdf8" stroke="#fff" stroke-width="1.5"/>
+    <circle cx="${stickX}" cy="${stickY}" r="6" fill="#f59e0b" stroke="#fff" stroke-width="2"/>
+    <circle cx="${stickX}" cy="${stickY}" r="11" fill="none" stroke="#f59e0b" stroke-width="1.5" opacity="0.4"/>
+  </g>`;
+}
+
+function renderCurveStage(inputs: DroneTwrInputs, results: DroneTwrResults, ui: FpvDroneThrustToWeightRatioUI): string {
+  const pointsHtml = renderCurvePoints(results, inputs);
+  return `<g transform="translate(280, 15)">
+    <rect x="0" y="0" width="265" height="180" rx="14" fill="var(--n-svg-card, #0f172a)" stroke="var(--n-svg-stroke, #334155)" stroke-width="2" />
+    <text x="15" y="24" fill="var(--n-text-muted, #94a3b8)" font-size="10" font-weight="700" letter-spacing="0.5">${ui.hudThrustCurveTitle.toUpperCase()}</text>
+    <path d="M 25 145 L 215 145" stroke="var(--n-svg-stroke, #334155)" stroke-width="1.5" />
+    <path d="M 25 40 L 25 145" stroke="var(--n-svg-stroke, #334155)" stroke-width="1.5" />
+    <path d="M 25 145 Q 120 135 215 40" fill="none" stroke="var(--n-primary, #38bdf8)" stroke-width="3.5" stroke-linecap="round" />
+    ${pointsHtml}
+    <text x="25" y="165" fill="var(--n-text-muted, #94a3b8)" font-size="8" font-weight="700">0% IDLE</text>
+    <text x="120" y="165" fill="#38bdf8" font-size="8" font-weight="700" text-anchor="middle">HOVER ${results.hoverThrottlePercent}%</text>
+    <text x="215" y="165" fill="#f59e0b" font-size="8" font-weight="700" text-anchor="end">PUNCH ${results.twrRatio.toFixed(1)}:1</text>
+  </g>`;
+}
+
+export function renderTwrSVG(inputs: DroneTwrInputs, results: DroneTwrResults, ui: FpvDroneThrustToWeightRatioUI): string {
+  const droneSvg = renderDroneStage(inputs, results, ui);
+  const curveSvg = renderCurveStage(inputs, results, ui);
+  return `<svg viewBox="0 0 560 210" width="100%" height="210" xmlns="http://www.w3.org/2000/svg">
+    ${droneSvg}
+    ${curveSvg}
+  </svg>`;
+}
+
+function updateCoreTelemetry(elements: DOMResultElements, results: DroneTwrResults): void {
+  if (elements.twrRatio) elements.twrRatio.textContent = `${results.twrRatio.toFixed(2)} : 1`;
+  if (elements.hoverThrottle) elements.hoverThrottle.textContent = `${results.hoverThrottlePercent.toFixed(1)} %`;
+  if (elements.currentThrust) elements.currentThrust.textContent = `${results.currentThrustGrams.toLocaleString()} g`;
+  if (elements.instantGForce) elements.instantGForce.textContent = `${results.instantGForce.toFixed(2)} G`;
+}
+
+function updateFlightDynamics(elements: DOMResultElements, results: DroneTwrResults): void {
+  if (elements.zeroToHundred) elements.zeroToHundred.textContent = `${results.zeroToHundredTimeSec.toFixed(2)} s`;
+  if (elements.recommendedCamAngle) elements.recommendedCamAngle.textContent = `${results.recommendedCamAngleDeg}°`;
+  if (elements.windResistance) elements.windResistance.textContent = `${results.windResistanceKmh} km/h`;
+  if (elements.totalMaxThrust) elements.totalMaxThrust.textContent = `${results.totalMaxThrustGrams.toLocaleString()} g`;
+  if (elements.maxPitchAngle) elements.maxPitchAngle.textContent = `${results.maxPitchAngleDeg}°`;
+  if (elements.stickPercentBadge) elements.stickPercentBadge.textContent = `${results.currentThrottlePercent}%`;
+}
+
+function updateTuningMetrics(elements: DOMResultElements, results: DroneTwrResults): void {
+  if (elements.tpaSetting) elements.tpaSetting.textContent = results.tuneAdvice.tpaSetting;
+  if (elements.dynamicIdleSetting) elements.dynamicIdleSetting.textContent = results.tuneAdvice.dynamicIdleSetting;
+  if (elements.propwashRisk) elements.propwashRisk.textContent = results.tuneAdvice.propwashRisk;
+}
+
+export function updateDOMMetrics(elements: DOMResultElements, results: DroneTwrResults): void {
+  updateCoreTelemetry(elements, results);
+  updateFlightDynamics(elements, results);
+  updateTuningMetrics(elements, results);
+}
+
+export function updateDOMSafety(elements: DOMResultElements, evalData: AgilityEvaluation): void {
+  if (elements.agilityBadge) {
+    elements.agilityBadge.className = `sc-safety-badge ${evalData.badgeClass}`;
+    elements.agilityBadge.textContent = evalData.title;
+  }
+  if (elements.statusTitle) elements.statusTitle.textContent = evalData.title;
+  if (elements.statusDesc) elements.statusDesc.textContent = evalData.description;
+}

package/src/tool/fpv-drone-thrust-to-weight-ratio/entry.ts

@@ -0,0 +1,27 @@
+import type { DronesToolEntry, ToolLocaleContent } from '../../types';
+import type { FpvDroneThrustToWeightRatioUI } from './ui';
+
+export type { FpvDroneThrustToWeightRatioUI };
+export type FpvDroneThrustToWeightRatioLocaleContent = ToolLocaleContent<FpvDroneThrustToWeightRatioUI>;
+
+export const fpvDroneThrustToWeightRatio: DronesToolEntry<FpvDroneThrustToWeightRatioUI> = {
+  id: 'fpv-drone-thrust-to-weight-ratio',
+  icons: { bg: 'mdi:quadcopter', fg: 'mdi:gauge' },
+  i18n: {
+    es: () => import('./i18n/es').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    de: () => import('./i18n/de').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+  },
+};

package/src/tool/fpv-drone-thrust-to-weight-ratio/evaluator.ts

@@ -0,0 +1,30 @@
+import type { AgilityTier } from './logic';
+import type { FpvDroneThrustToWeightRatioUI } from './ui';
+
+export interface AgilityEvaluation {
+  tier: AgilityTier;
+  badgeClass: string;
+  title: string;
+  description: string;
+}
+
+const TIER_CONFIG: Record<AgilityTier, { badgeClass: string; titleKey: keyof FpvDroneThrustToWeightRatioUI; descKey: keyof FpvDroneThrustToWeightRatioUI }> = {
+  underpowered: { badgeClass: 'status-danger', titleKey: 'tierUnderpoweredTitle', descKey: 'tierUnderpoweredDesc' },
+  cinematic: { badgeClass: 'status-info', titleKey: 'tierCinematicTitle', descKey: 'tierCinematicDesc' },
+  freestyle: { badgeClass: 'status-optimal', titleKey: 'tierFreestyleTitle', descKey: 'tierFreestyleDesc' },
+  acro_pro: { badgeClass: 'status-accent', titleKey: 'tierAcroProTitle', descKey: 'tierAcroProDesc' },
+  racing_extreme: { badgeClass: 'status-warning', titleKey: 'tierRacingExtremeTitle', descKey: 'tierRacingExtremeDesc' },
+};
+
+export function evaluateAgilityPresentation(
+  tier: AgilityTier,
+  ui: FpvDroneThrustToWeightRatioUI
+): AgilityEvaluation {
+  const cfg = TIER_CONFIG[tier] || TIER_CONFIG.freestyle;
+  return {
+    tier,
+    badgeClass: cfg.badgeClass,
+    title: ui[cfg.titleKey],
+    description: ui[cfg.descKey],
+  };
+}

package/src/tool/fpv-drone-thrust-to-weight-ratio/fpv-drone-thrust-to-weight-ratio.css

@@ -0,0 +1,404 @@
+:root {
+  --n-bg: #f8fafc;
+  --n-surface: #fff;
+  --n-card-bg: rgba(255, 255, 255, 0.95);
+  --n-border: #cbd5e1;
+  --n-text: #0f172a;
+  --n-text-muted: #475569;
+  --n-primary: #0284c7;
+  --n-primary-hover: #0369a1;
+  --n-accent: #8b5cf6;
+  --n-accent-cyan: #06b6d4;
+  --n-success: #10b981;
+  --n-warning: #f59e0b;
+  --n-danger: #ef4444;
+  --n-info: #0284c7;
+  --n-svg-card: #f1f5f9;
+  --n-svg-inner: #fff;
+  --n-svg-stroke: #cbd5e1;
+  --n-radius: 16px;
+  --n-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08);
+}
+
+.theme-dark {
+  --n-bg: #070b12;
+  --n-surface: #0f172a;
+  --n-card-bg: rgba(15, 23, 42, 0.92);
+  --n-border: #1e293b;
+  --n-text: #f8fafc;
+  --n-text-muted: #94a3b8;
+  --n-primary: #38bdf8;
+  --n-primary-hover: #7dd3fc;
+  --n-accent: #a78bfa;
+  --n-accent-cyan: #22d3ee;
+  --n-success: #34d399;
+  --n-warning: #fbbf24;
+  --n-danger: #f87171;
+  --n-info: #38bdf8;
+  --n-svg-card: #0b1120;
+  --n-svg-inner: #1e293b;
+  --n-svg-stroke: #334155;
+  --n-shadow: 0 14px 35px -5px rgba(0, 0, 0, 0.6);
+}
+
+.sc-fpv-cockpit {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+  background-color: var(--n-card-bg);
+  border: 1px solid var(--n-border);
+  border-radius: var(--n-radius);
+  padding: 2rem;
+  box-shadow: var(--n-shadow);
+  backdrop-filter: blur(14px);
+  color: var(--n-text);
+  margin-bottom: 2rem;
+}
+
+@media (min-width: 1024px) {
+  .sc-fpv-cockpit {
+    grid-template-columns: 380px 1fr;
+  }
+}
+
+.sc-cockpit-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.sc-cockpit-title {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--n-text);
+  margin-bottom: 0.8rem;
+  letter-spacing: -0.01em;
+}
+
+.sc-preset-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.sc-preset-chip {
+  background-color: var(--n-surface);
+  border: 1px solid var(--n-border);
+  color: var(--n-text);
+  border-radius: 8px;
+  padding: 0.45rem 0.85rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.sc-preset-chip:hover {
+  border-color: var(--n-primary);
+  color: var(--n-primary);
+}
+
+.sc-preset-chip.active {
+  background-color: var(--n-primary);
+  border-color: var(--n-primary);
+  color: #fff;
+  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
+}
+
+.sc-field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.sc-field-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sc-field-header label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--n-text-muted);
+}
+
+.sc-input {
+  width: 100%;
+  background-color: var(--n-surface);
+  border: 1px solid var(--n-border);
+  border-radius: 8px;
+  padding: 0.55rem 0.8rem;
+  color: var(--n-text);
+  font-size: 0.95rem;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.sc-input:focus {
+  border-color: var(--n-primary);
+}
+
+.sc-slider {
+  width: 100%;
+  accent-color: var(--n-primary);
+  cursor: pointer;
+  margin-top: 0.2rem;
+}
+
+.sc-throttle-box {
+  background-color: var(--n-surface);
+  border: 1px solid var(--n-border);
+  border-radius: 12px;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  border-left: 3px solid var(--n-accent-cyan);
+}
+
+.sc-throttle-label {
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--n-text);
+}
+
+.sc-throttle-badge {
+  background-color: var(--n-accent-cyan);
+  color: #000;
+  font-weight: 800;
+  font-size: 0.85rem;
+  padding: 0.15rem 0.55rem;
+  border-radius: 6px;
+}
+
+.sc-throttle-slider {
+  accent-color: var(--n-accent-cyan);
+  height: 6px;
+}
+
+.sc-snap-group {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.35rem;
+  margin-top: 0.2rem;
+}
+
+.sc-snap-btn {
+  background-color: var(--n-bg);
+  border: 1px solid var(--n-border);
+  border-radius: 6px;
+  padding: 0.3rem 0.2rem;
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: var(--n-text-muted);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: center;
+}
+
+.sc-snap-btn:hover {
+  border-color: var(--n-accent-cyan);
+  color: var(--n-accent-cyan);
+}
+
+.sc-custom-select {
+  position: relative;
+  width: 100%;
+}
+
+.sc-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--n-surface);
+  border: 1px solid var(--n-border);
+  border-radius: 8px;
+  padding: 0.6rem 0.8rem;
+  color: var(--n-text);
+  font-size: 0.95rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.sc-select-trigger svg {
+  transition: transform 0.2s ease;
+  fill: var(--n-text-muted);
+}
+
+.sc-custom-select.open .sc-select-trigger svg {
+  transform: rotate(180deg);
+}
+
+.sc-select-dropdown {
+  display: none;
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background-color: var(--n-surface);
+  border: 1px solid var(--n-border);
+  border-radius: 8px;
+  box-shadow: var(--n-shadow);
+  z-index: 50;
+  overflow: hidden;
+}
+
+.sc-custom-select.open .sc-select-dropdown {
+  display: block;
+}
+
+.sc-select-option {
+  padding: 0.6rem 0.8rem;
+  font-size: 0.9rem;
+  color: var(--n-text);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.sc-select-option:hover,
+.sc-select-option.active {
+  background-color: var(--n-primary);
+  color: #fff;
+}
+
+.sc-cockpit-telemetry {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.sc-telemetry-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.sc-safety-badge {
+  padding: 0.45rem 1.1rem;
+  border-radius: 20px;
+  font-weight: 700;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.status-optimal {
+  background-color: rgba(16, 185, 129, 0.15);
+  color: var(--n-success);
+  border: 1px solid var(--n-success);
+}
+
+.status-info {
+  background-color: rgba(2, 132, 199, 0.15);
+  color: var(--n-info);
+  border: 1px solid var(--n-info);
+}
+
+.status-accent {
+  background-color: rgba(139, 92, 246, 0.15);
+  color: var(--n-accent);
+  border: 1px solid var(--n-accent);
+}
+
+.status-warning {
+  background-color: rgba(245, 158, 11, 0.15);
+  color: var(--n-warning);
+  border: 1px solid var(--n-warning);
+}
+
+.status-danger {
+  background-color: rgba(239, 68, 68, 0.15);
+  color: var(--n-danger);
+  border: 1px solid var(--n-danger);
+}
+
+.sc-hud-wrapper {
+  background-color: var(--n-surface);
+  border: 1px solid var(--n-border);
+  border-radius: 12px;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.sc-hud-metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1rem;
+}
+
+.sc-hud-card {
+  background-color: var(--n-surface);
+  border: 1px solid var(--n-border);
+  border-radius: 12px;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.sc-hud-card.highlight-cyan {
+  border-color: var(--n-accent-cyan);
+}
+
+.sc-hud-card.highlight-purple {
+  border-color: var(--n-accent);
+}
+
+.sc-hud-label {
+  font-size: 0.8rem;
+  color: var(--n-text-muted);
+  font-weight: 600;
+}
+
+.sc-hud-val {
+  font-size: 1.35rem;
+  font-weight: 800;
+  color: var(--n-text);
+}
+
+.sc-tuning-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1rem;
+}
+
+.sc-tuning-card {
+  background-color: var(--n-surface);
+  border: 1px solid var(--n-border);
+  border-radius: 12px;
+  padding: 0.85rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  border-top: 2px solid var(--n-primary);
+}
+
+.sc-tuning-val {
+  font-size: 1.05rem;
+  font-weight: 800;
+  color: var(--n-primary);
+}
+
+.sc-flight-status-card {
+  background-color: var(--n-surface);
+  border: 1px solid var(--n-border);
+  border-radius: 12px;
+  padding: 1.2rem;
+}
+
+.sc-flight-status-card h4 {
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 0.4rem;
+  color: var(--n-text);
+}
+
+.sc-flight-status-card p {
+  font-size: 0.9rem;
+  color: var(--n-text-muted);
+  line-height: 1.5;
+}