/* Grundlegende Stildefinitionen */
    html, body {
      height: 100%;
      margin: 0;
      overflow: hidden;
      background-color: #f0f9ff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .container {
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      padding: 1rem 0.75rem 2rem;
      box-sizing: border-box;
    }
    .canvas-section {
      position: sticky;
      top: 0;
      z-index: 40;
      background: #f0f9ff;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
    .canvas-container {
      position: relative;
      width: 100%;
      height: var(--canvas-height, clamp(160px, 24vh, 300px));
      overflow: hidden;
      border-radius: 12px;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
    }

    .canvas-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.5rem;
      background: rgba(255,255,255,0.88);
      border-radius: 0.75rem;
      padding: 0.55rem 0.75rem;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .canvas-size-control {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      min-width: min(100%, 360px);
      flex: 1;
    }
    .canvas-size-control input { flex: 1; }
    .canvas-container:fullscreen {
      width: 100vw;
      height: 100vh;
      border-radius: 0;
    }
    .explanations .bg-gray-100 {
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .explanations .font-mono { max-width: 100%; }
    mjx-container[jax="CHTML"][display="true"] {
      overflow-x: auto;
      overflow-y: hidden;
      max-width: 100%;
      padding-bottom: 0.15rem;
    }
    #watermark-canvas {
        position: absolute;
        bottom: 0;
        right: 0;
        pointer-events: none;
        z-index: 100;
    }
    .controls {
      background-color: rgba(255, 255, 255, 0.95);
      border-radius: 8px;
      padding: 1rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1rem;
      align-items: start;
    }
    .controls > .flex.justify-between,
    .controls > #approximation-note {
      grid-column: 1 / -1;
    }
    .controls > .flex.flex-wrap.-mx-2 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1rem;
      grid-column: 1 / -1;
      margin-left: 0;
      margin-right: 0;
    }
    .controls > .flex.flex-wrap.-mx-2 > div { padding-left: 0; padding-right: 0; margin-bottom: 0; }
    .controls .mt-4 { margin-top: 0; }
    .controls .slider-container { margin-bottom: 0.65rem; }
    .controls #subpatch-density-slider { align-self: end; }
    .visual-select-block { grid-column: 1 / -1; }
    .visual-select-control label { color: var(--lt-muted, #6e6e73) !important; line-height: 1.2; }
    .visual-select-control select { min-width: 0; }
    #subpatch-density-slider.is-disabled { opacity: 0.45; }
    #subpatch-density-slider.is-disabled label,
    #subpatch-density-slider.is-disabled .slider-value { color: var(--lt-muted, #6e6e73) !important; }
    #subpatch-density:disabled { cursor: not-allowed; }
    .controls-and-info.controls-panel-grid {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(320px, 1fr);
      gap: 1rem;
      align-items: start;
    }
    .controls-and-info > .mt-4 { margin-top: 0; }
    .slider-container {
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
    }
    .slider-container label {
      width: 140px;
      font-weight: 500;
      white-space: nowrap;
      font-size: 0.875rem;
      margin-right: 0.5rem;
      flex-shrink: 0;
    }
    .slider-container input[type="range"] {
      flex-grow: 1;
    }

    .distance-slider-container {
      display: block;
      margin-top: 0.9rem;
      margin-bottom: 0.85rem;
      width: 100%;
    }
    .distance-slider-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 0.45rem;
      width: 100%;
    }
    .distance-slider-row label {
      grid-column: 1 / -1;
      width: auto;
      margin-right: 0;
      margin-bottom: -0.15rem;
    }
    .distance-slider-row input[type="range"] {
      width: 100%;
      min-width: 0;
    }
    .distance-huygens-note {
      display: block;
      width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .observation-toggle-row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.5rem;
      margin-top: 0.5rem;
      width: 100%;
    }
    .observation-toggle-row .mr-2 {
      margin-right: 0;
    }
    .slider-value {
      width: 45px;
      text-align: right;
      margin-left: 0.5rem;
      font-size: 0.875rem;
    }
    .angle-number-input {
      width: 4.8rem;
      margin-left: 0.55rem;
      padding: 0.25rem 0.45rem;
      border: 1px solid var(--lt-border, rgba(0,0,0,0.12));
      border-radius: 999px;
      background: var(--lt-surface-strong, rgba(255,255,255,0.88));
      color: var(--lt-text, #1d1d1f);
      font-size: 0.82rem;
      font-weight: 650;
      text-align: right;
      font-variant-numeric: tabular-nums;
      outline: none;
    }
    .angle-number-input:focus {
      border-color: var(--lt-blue, #0071e3);
      box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.14);
    }
    .angle-unit {
      margin-left: 0.25rem;
      color: var(--lt-muted, #6e6e73);
      font-size: 0.82rem;
      font-weight: 650;
    }
    .angle-hidden-value {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    /* Custom Slider Styles */
    input[type=range] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        background: transparent;
        cursor: pointer;
    }
    input[type=range]::-webkit-slider-runnable-track {
        height: 4px;
        background: #d1d5db; /* gray-300 */
        border-radius: 4px;
    }
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        margin-top: -6px; /* Center thumb on track */
        background-color: #3b82f6; /* blue-500 */
        height: 16px;
        width: 16px;
        border-radius: 50%;
    }
    input[type=range]::-moz-range-track {
        height: 4px;
        background: #d1d5db;
        border-radius: 4px;
    }
    input[type=range]::-moz-range-thumb {
        background-color: #3b82f6;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        border: none;
    }
    .antenna-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
      gap: 8px;
    }
    .array-config-section {
      grid-column: 1 / -1;
      width: 100%;
      min-width: 0;
    }
    .array-config-controls {
      align-items: end;
    }
    .array-config-section .antenna-grid {
      width: 100%;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      align-items: start;
    }
    .array-config-section .checkbox-wrapper {
      min-width: 0;
      padding: 0.35rem 0.45rem;
      border-radius: 0.375rem;
      background: rgba(248, 250, 252, 0.75);
      border: 1px solid rgba(226, 232, 240, 0.8);
    }
    .array-config-section .checkbox-wrapper label {
      overflow-wrap: anywhere;
      line-height: 1.2;
    }
    @media (min-width: 1280px) {
      .array-config-section .antenna-grid {
        grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
      }
    }
    @media (max-width: 640px) {
      .array-config-section .antenna-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      }
    }
    .checkbox-wrapper {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 3px;
      font-size: 0.875rem;
    }
    .checkbox-wrapper input {
      margin-right: 6px;
    }
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 45px;
      height: 22px;
    }
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: .4s;
      border-radius: 22px;
    }
    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 14px;
      width: 14px;
      left: 3px;
      bottom: 4px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }
    input:checked + .toggle-slider {
      background-color: #3b82f6;
    }
    input:checked + .toggle-slider:before {
      transform: translateX(23px);
    }
    .btn {
      background-color: #3b82f6;
      color: white;
      padding: 6px 12px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      font-weight: 500;
      transition: background-color 0.2s;
      font-size: 0.875rem;
    }
    .btn:hover {
      background-color: #2563eb;
    }
    ul.list-disc li {
        display: list-item;
        font-size: 0.875rem;
    }
    .text-sm {
        font-size: 0.875rem;
    }

    /* Layout: 3D stays visible at top, controls/formulas scroll below */
    .grid-container {
      display: flex !important;
      flex-direction: column;
      gap: 1rem;
    }
    .canvas-section, .controls-and-info, .explanations {
      width: 100%;
      order: initial;
    }
    .controls {
      max-height: none;
      overflow: visible;
    }
    .controls-panel-grid {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(320px, 1fr);
      gap: 1rem;
      align-items: start;
    }
    .physics-note {
      border-left: 4px solid #f59e0b;
      background: #fffbeb;
      padding: 0.75rem;
      border-radius: 0.5rem;
    }
    @media (max-width: 900px) {
      .controls-and-info.controls-panel-grid,
      .controls-panel-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .canvas-container { height: min(var(--canvas-height, 26vh), 60vh); min-height: 180px; }
      .canvas-toolbar { align-items: stretch; }
      .canvas-size-control { min-width: 100%; }
      .slider-container { align-items: flex-start; }
      .slider-container label { width: 110px; }

      .distance-huygens-note {
        white-space: normal;
      }
    }


    /* Apple-inspired phased-array-simulator.com polish */
    :root {
      color-scheme: light dark;
      --lt-bg: #f5f5f7;
      --lt-surface: rgba(255, 255, 255, 0.72);
      --lt-surface-strong: rgba(255, 255, 255, 0.88);
      --lt-text: #1d1d1f;
      --lt-muted: #6e6e73;
      --lt-border: rgba(0, 0, 0, 0.08);
      --lt-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
      --lt-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);
      --lt-blue: #0071e3;
      --lt-blue-hover: #0077ed;
      --lt-radius: 22px;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background:
        radial-gradient(circle at 15% 0%, rgba(0, 113, 227, 0.13), transparent 30%),
        radial-gradient(circle at 85% 10%, rgba(175, 82, 222, 0.12), transparent 28%),
        linear-gradient(180deg, #fbfbfd 0%, var(--lt-bg) 50%, #ffffff 100%) !important;
      color: var(--lt-text);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .container {
      padding-bottom: 4.5rem !important;
    }

    .header-section {
      position: relative;
      padding: 1rem 1.1rem;
      border: 1px solid var(--lt-border);
      border-radius: calc(var(--lt-radius) + 4px);
      background: var(--lt-surface);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      box-shadow: var(--lt-shadow-soft);
    }

    .header-section h1 {
      letter-spacing: -0.035em;
      color: var(--lt-text) !important;
      font-weight: 750 !important;
    }

    .language-selector select,
    select,
    input[type="range"] {
      accent-color: var(--lt-blue);
    }

    select {
      border: 1px solid var(--lt-border) !important;
      border-radius: 999px !important;
      background: var(--lt-surface-strong) !important;
      color: var(--lt-text) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
      outline: none;
    }

    .canvas-section {
      background: transparent !important;
    }

    .canvas-toolbar,
    .controls,
    #observation-info,
    .explanations > div,
    .physics-note,
    .array-config-section .checkbox-wrapper,
    .taper-note,
    #approximation-note {
      border: 1px solid var(--lt-border) !important;
      background: var(--lt-surface) !important;
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      box-shadow: var(--lt-shadow-soft) !important;
    }

    .canvas-toolbar,
    .controls,
    .explanations > div,
    #observation-info {
      border-radius: var(--lt-radius) !important;
    }

    .canvas-container {
      border-radius: calc(var(--lt-radius) + 6px) !important;
      border: 1px solid rgba(255,255,255,0.55);
      box-shadow: var(--lt-shadow) !important;
      background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.45));
    }

    .explanations h2,
    .controls h2,
    .explanations h3,
    .controls h3 {
      color: var(--lt-text) !important;
      letter-spacing: -0.02em;
    }

    .text-sm,
    .explanations p,
    .explanations li,
    .slider-container label,
    .checkbox-wrapper,
    .taper-note,
    #approximation-note {
      color: var(--lt-muted) !important;
    }

    .bg-gray-100,
    .math-box {
      background: rgba(142, 142, 147, 0.10) !important;
      border: 1px solid var(--lt-border);
      border-radius: 16px !important;
    }

    .bg-blue-50,
    .bg-yellow-50,
    .bg-slate-50,
    .bg-white {
      background: var(--lt-surface) !important;
    }

    .btn,
    button.btn {
      border-radius: 999px !important;
      border: 0 !important;
      background: linear-gradient(180deg, var(--lt-blue), #006edb) !important;
      color: white !important;
      box-shadow: 0 10px 22px rgba(0, 113, 227, 0.28), inset 0 1px 0 rgba(255,255,255,0.28) !important;
      transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    .btn:hover,
    button.btn:hover {
      background: linear-gradient(180deg, var(--lt-blue-hover), var(--lt-blue)) !important;
      transform: translateY(-1px);
      box-shadow: 0 14px 28px rgba(0, 113, 227, 0.32), inset 0 1px 0 rgba(255,255,255,0.32) !important;
    }

    input[type=range]::-webkit-slider-runnable-track {
      height: 5px !important;
      background: rgba(120, 120, 128, 0.22) !important;
      border-radius: 999px !important;
    }

    input[type=range]::-webkit-slider-thumb {
      background: #ffffff !important;
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
      height: 18px !important;
      width: 18px !important;
      margin-top: -6.5px !important;
    }

    input[type=range]::-moz-range-track {
      height: 5px !important;
      background: rgba(120, 120, 128, 0.22) !important;
      border-radius: 999px !important;
    }

    input[type=range]::-moz-range-thumb {
      background: #ffffff !important;
      border: 1px solid rgba(0,0,0,0.08) !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
      height: 18px !important;
      width: 18px !important;
    }

    .toggle-slider {
      background: rgba(120, 120, 128, 0.32) !important;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
    }

    input:checked + .toggle-slider {
      background: var(--lt-blue) !important;
    }

    .toggle-slider:before {
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }

    .lumeitech-footer {
      position: fixed;
      left: 50%;
      bottom: 14px;
      transform: translateX(-50%);
      z-index: 2147483000;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.48rem 0.85rem;
      border-radius: 999px;
      border: 1px solid var(--lt-border);
      background: var(--lt-surface-strong);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      box-shadow: var(--lt-shadow-soft);
      color: var(--lt-muted);
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
      user-select: none;
    }

    .lumeitech-footer a {
      color: var(--lt-blue);
      text-decoration: none;
      font-weight: 650;
    }

    .lumeitech-footer a:hover {
      text-decoration: underline;
    }

    .lumeitech-mark {
      width: 18px;
      height: 18px;
      border-radius: 6px;
      display: inline-grid;
      place-items: center;
      background: linear-gradient(135deg, #0071e3, #af52de);
      color: #fff;
      font-weight: 800;
      font-size: 11px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --lt-bg: #0b0b0f;
        --lt-surface: rgba(28, 28, 30, 0.68);
        --lt-surface-strong: rgba(36, 36, 38, 0.86);
        --lt-text: #f5f5f7;
        --lt-muted: #a1a1a6;
        --lt-border: rgba(255, 255, 255, 0.12);
        --lt-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
        --lt-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.32);
        --lt-blue: #0a84ff;
        --lt-blue-hover: #2997ff;
      }

      body {
        background:
          radial-gradient(circle at 15% 0%, rgba(10, 132, 255, 0.20), transparent 32%),
          radial-gradient(circle at 85% 8%, rgba(191, 90, 242, 0.18), transparent 30%),
          linear-gradient(180deg, #050507 0%, var(--lt-bg) 58%, #111114 100%) !important;
      }

      .canvas-container {
        border-color: rgba(255,255,255,0.10);
        background: linear-gradient(180deg, rgba(44,44,46,0.7), rgba(28,28,30,0.45));
      }

      input[type=range]::-webkit-slider-thumb,
      input[type=range]::-moz-range-thumb {
        background: #f5f5f7 !important;
      }
    }

    @media (max-width: 640px) {
      .lumeitech-footer {
        bottom: 10px;
        max-width: calc(100vw - 24px);
        font-size: 11px;
        padding: 0.44rem 0.65rem;
      }
    }

    .seo-hero {
      margin: 1rem 0 1.25rem;
      padding: clamp(1.3rem, 3vw, 2.4rem);
      border: 1px solid var(--lt-border);
      border-radius: calc(var(--lt-radius) + 8px);
      background: var(--lt-surface);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      box-shadow: var(--lt-shadow-soft);
    }
    .seo-hero h2 {
      max-width: 980px;
      margin: 0;
      color: var(--lt-text);
      font-size: clamp(2rem, 5vw, 4.4rem);
      line-height: 0.98;
      letter-spacing: -0.06em;
      font-weight: 820;
    }
    .seo-hero p {
      max-width: 880px;
      margin: 1rem 0 0;
      color: var(--lt-muted);
      font-size: clamp(1rem, 1.6vw, 1.2rem);
      line-height: 1.65;
    }
    .seo-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 1.25rem;
      align-items: center;
    }
    .seo-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 2.55rem;
      padding: 0.55rem 1rem;
      border-radius: 999px;
      border: 1px solid var(--lt-border);
      background: var(--lt-surface-strong);
      color: var(--lt-text);
      text-decoration: none;
      font-weight: 700;
      box-shadow: var(--lt-shadow-soft);
    }
    .seo-pill.primary {
      background: linear-gradient(180deg, var(--lt-blue), #006edb);
      color: #fff;
      border-color: transparent;
    }
    .seo-pill:hover { transform: translateY(-1px); }
    .seo-keywords {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 1rem;
    }
    .seo-keywords span {
      padding: 0.35rem 0.7rem;
      border-radius: 999px;
      background: rgba(120, 120, 128, 0.14);
      color: var(--lt-muted);
      font-size: 0.82rem;
      font-weight: 650;
    }

    .seo-update {
      display: inline-block;
      margin-top: 0.85rem !important;
      padding: 0.45rem 0.75rem;
      border-radius: 999px;
      background: rgba(0, 113, 227, 0.10);
      color: var(--lt-text) !important;
      font-size: 0.88rem !important;
      font-weight: 700;
    }

    .source-card {
      margin-top: 1rem;
      padding: 1rem;
      border: 1px solid var(--lt-border);
      border-radius: var(--lt-radius);
      background: var(--lt-surface);
      color: var(--lt-muted);
      box-shadow: var(--lt-shadow-soft);
    }
    .source-card a { color: var(--lt-blue); font-weight: 750; text-decoration: none; }
    .source-card a:hover { text-decoration: underline; }

    .mouse-help {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      align-items: center;
      justify-content: center;
      margin: 0.75rem 0 0.65rem;
      padding: 0.72rem 0.9rem;
      border: 1px solid var(--lt-border);
      border-radius: var(--lt-radius);
      background: var(--lt-surface-strong);
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      box-shadow: var(--lt-shadow-soft);
      color: var(--lt-muted);
      font-size: 0.9rem;
      line-height: 1.35;
    }
    .mouse-help strong { color: var(--lt-text); }
    .mouse-help .mouse-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.32rem 0.62rem;
      border-radius: 999px;
      background: rgba(120, 120, 128, 0.14);
      color: var(--lt-text);
      font-weight: 650;
      white-space: nowrap;
    }

    .canvas-controls-details {
      margin-bottom: 0.65rem;
      border: 1px solid var(--lt-border);
      border-radius: var(--lt-radius);
      background: var(--lt-surface);
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      box-shadow: var(--lt-shadow-soft);
      overflow: hidden;
    }
    .canvas-controls-details > summary {
      cursor: pointer;
      list-style: none;
      padding: 0.7rem 0.9rem;
      color: var(--lt-text);
      font-weight: 750;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      user-select: none;
    }
    .canvas-controls-details > summary::-webkit-details-marker { display: none; }
    .canvas-controls-details > summary::after {
      content: "▾";
      font-size: 0.9rem;
      color: var(--lt-muted);
      transition: transform 0.18s ease;
    }
    .canvas-controls-details:not([open]) > summary::after { transform: rotate(-90deg); }
    .canvas-controls-inner {
      padding: 0 0.7rem 0.7rem;
    }
    .canvas-controls-details .canvas-toolbar {
      margin-bottom: 0.55rem;
    }
    .canvas-controls-details .mouse-help {
      margin: 0;
    }


    /* Manual appearance switch: light / dark / system */
    html[data-theme="light"] {
      color-scheme: light;
      --lt-bg: #f5f5f7;
      --lt-surface: rgba(255, 255, 255, 0.72);
      --lt-surface-strong: rgba(255, 255, 255, 0.88);
      --lt-text: #1d1d1f;
      --lt-muted: #6e6e73;
      --lt-border: rgba(0, 0, 0, 0.08);
      --lt-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
      --lt-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);
      --lt-blue: #0071e3;
      --lt-blue-hover: #0077ed;
    }

    html[data-theme="dark"] {
      color-scheme: dark;
      --lt-bg: #0b0b0f;
      --lt-surface: rgba(28, 28, 30, 0.68);
      --lt-surface-strong: rgba(36, 36, 38, 0.86);
      --lt-text: #f5f5f7;
      --lt-muted: #a1a1a6;
      --lt-border: rgba(255, 255, 255, 0.12);
      --lt-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
      --lt-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.32);
      --lt-blue: #0a84ff;
      --lt-blue-hover: #2997ff;
    }

    html[data-theme="light"] body {
      background:
        radial-gradient(circle at 15% 0%, rgba(0, 113, 227, 0.13), transparent 30%),
        radial-gradient(circle at 85% 10%, rgba(175, 82, 222, 0.12), transparent 28%),
        linear-gradient(180deg, #fbfbfd 0%, var(--lt-bg) 50%, #ffffff 100%) !important;
      color: var(--lt-text) !important;
    }

    html[data-theme="dark"] body {
      background:
        radial-gradient(circle at 15% 0%, rgba(10, 132, 255, 0.20), transparent 32%),
        radial-gradient(circle at 85% 8%, rgba(191, 90, 242, 0.18), transparent 30%),
        linear-gradient(180deg, #050507 0%, var(--lt-bg) 58%, #111114 100%) !important;
      color: var(--lt-text) !important;
    }

    html[data-theme="dark"] .canvas-container {
      border-color: rgba(255,255,255,0.10) !important;
      background: linear-gradient(180deg, rgba(44,44,46,0.7), rgba(28,28,30,0.45)) !important;
    }

    html[data-theme="dark"] input[type=range]::-webkit-slider-thumb,
    html[data-theme="dark"] input[type=range]::-moz-range-thumb {
      background: #f5f5f7 !important;
    }

    .header-tools {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
    }

    .theme-selector {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      color: var(--lt-muted);
      font-size: 0.875rem;
      font-weight: 650;
    }

    .canvas-bg-toolbar {
      flex: 0 0 auto;
      min-height: 2.25rem;
      padding: 0.2rem 0.35rem;
      border-radius: 999px;
      background: rgba(120, 120, 128, 0.10);
    }

    @media (max-width: 640px) {
      .canvas-bg-toolbar {
        width: 100%;
        justify-content: space-between;
      }
      .canvas-bg-toolbar select {
        flex: 1;
        max-width: 220px;
      }
    }

    .seo-content {
      margin: 1rem 0 1.5rem;
      padding: clamp(1.1rem, 2.5vw, 1.8rem);
      border: 1px solid var(--lt-border);
      border-radius: var(--lt-radius);
      background: var(--lt-surface);
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      box-shadow: var(--lt-shadow-soft);
    }
    .seo-content h2 {
      color: var(--lt-text);
      font-size: clamp(1.35rem, 2.2vw, 2rem);
      letter-spacing: -0.035em;
      font-weight: 800;
      margin: 0 0 0.65rem;
    }
    .seo-content h3 {
      color: var(--lt-text);
      font-size: 1.05rem;
      font-weight: 760;
      margin: 1.1rem 0 0.45rem;
    }
    .seo-content p,
    .seo-content li {
      color: var(--lt-muted);
      line-height: 1.72;
      font-size: 0.98rem;
    }
    .seo-content ul {
      padding-left: 1.25rem;
      margin: 0.4rem 0 0;
    }
    .seo-content-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1rem;
      margin-top: 0.8rem;
    }
    .seo-content-card {
      padding: 0.95rem;
      border-radius: 18px;
      border: 1px solid var(--lt-border);
      background: rgba(120, 120, 128, 0.08);
    }



    /* Stable 2D + 3D workspace. Flex is used instead of mixed grid/resize states
       so the panels do not jump below each other after fullscreen or mode changes. */
    .visual-workspace {
      --workspace-height: clamp(420px, 58vh, 720px);
      --left-panel-width: 50%;
      display: flex;
      flex-direction: row;
      gap: 0;
      align-items: stretch;
      justify-content: stretch;
      width: 100%;
      height: var(--workspace-height);
      min-height: 320px;
      max-height: 82vh;
      overflow: hidden;
      border-radius: calc(var(--lt-radius, 22px) + 4px);
    }
    .visual-workspace .canvas-container {
      flex: 1 1 auto;
      width: auto;
      max-width: none;
      height: 100% !important;
      min-width: 180px;
      min-height: 0;
      resize: none !important;
      overflow: hidden;
      border-radius: calc(var(--lt-radius, 22px) + 4px) !important;
    }
    .canvas-size-control { display: none !important; }
    .canvas-toolbar::before {
      content: "2D/3D workspace: drag divider for width; drag bottom edge to resize both panels together";
      color: var(--lt-muted, #6e6e73);
      font-size: 0.82rem;
      font-weight: 650;
    }
    .workspace-resizer {
      flex: 0 0 10px;
      cursor: col-resize;
      position: relative;
      background: transparent;
      touch-action: none;
    }
    .workspace-resizer::before {
      content: "";
      position: absolute;
      top: 14px; bottom: 14px; left: 4px;
      width: 2px;
      border-radius: 999px;
      background: rgba(120,120,128,0.35);
    }
    .workspace-height-resizer {
      height: 12px;
      cursor: row-resize;
      touch-action: none;
      position: relative;
      margin: 0.2rem auto 0.65rem;
      width: min(360px, 65%);
    }
    .workspace-height-resizer::before {
      content: "";
      position: absolute;
      left: 0; right: 0; top: 5px;
      height: 2px;
      border-radius: 999px;
      background: rgba(120,120,128,0.35);
    }
    .visual-workspace.two-d-compact { --left-panel-width: 220px; }
    .visual-workspace.two-d-collapsed { --left-panel-width: 72px; }
    .visual-workspace.two-d-collapsed .slice-dashboard {
      min-width: 72px;
      padding: 0.45rem 0.35rem;
      overflow: auto;
    }
    .visual-workspace.two-d-collapsed .slice-dashboard-head > div:first-child,
    .visual-workspace.two-d-collapsed .slice-cut-control,
    .visual-workspace.two-d-collapsed .slice-mini-toggle,
    .visual-workspace.two-d-collapsed #print-report,
    .visual-workspace.two-d-collapsed #slice-dashboard-fullscreen,
    .visual-workspace.two-d-collapsed #workspace-fullscreen,
    .visual-workspace.two-d-collapsed #equal-panels,
    .visual-workspace.two-d-collapsed #toggle-3d-panel,
    .visual-workspace.two-d-collapsed .slice-dashboard-grid,
    .visual-workspace.two-d-collapsed .slice-note { display: none !important; }
    .visual-workspace.two-d-collapsed .slice-dashboard-head {
      justify-content: center;
      align-items: center;
      height: 100%;
      margin: 0;
    }
    .visual-workspace.two-d-collapsed .slice-dashboard-toolbar {
      justify-content: center;
      align-items: center;
      writing-mode: vertical-rl;
    }
    .visual-workspace.three-d-compact .canvas-container {
      flex: 0 0 240px;
      min-width: 180px;
    }
    .visual-workspace.three-d-collapsed .canvas-container {
      flex: 0 0 72px;
      min-width: 72px;
      opacity: 0.72;
    }
    .visual-workspace.three-d-collapsed .canvas-container::after {
      content: "3D";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: var(--lt-muted, #6e6e73);
      font-weight: 850;
      letter-spacing: 0.08em;
      background: rgba(120,120,128,0.08);
      pointer-events: none;
    }
    .visual-workspace.slice-panel-hidden .slice-dashboard,
    .visual-workspace.slice-panel-hidden .workspace-resizer { display: none !important; }
    .visual-workspace.slice-panel-hidden .canvas-container { min-width: 100%; }
    .visual-workspace:fullscreen {
      padding: 0.75rem;
      background: var(--lt-bg, #f5f5f7);
      height: 100vh;
      max-height: none;
      border-radius: 0;
    }
    .visual-workspace:fullscreen .canvas-container,
    .visual-workspace:fullscreen .slice-dashboard { height: calc(100vh - 1.5rem) !important; max-height: calc(100vh - 1.5rem); }
    .slice-dashboard {
      flex: 0 0 var(--left-panel-width);
      width: var(--left-panel-width);
      max-width: none;
      min-width: 190px;
      border: 1px solid var(--lt-border, rgba(0,0,0,0.08));
      border-radius: calc(var(--lt-radius, 22px) + 2px);
      background: var(--lt-surface, rgba(255,255,255,0.78));
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      box-shadow: var(--lt-shadow-soft, 0 8px 24px rgba(0,0,0,0.08));
      padding: 0.65rem;
      height: 100%;
      min-height: 0;
      overflow: auto;
    }

    .workspace-details {
      border: 1px solid var(--lt-border, rgba(0,0,0,0.08));
      border-radius: calc(var(--lt-radius, 22px) + 6px);
      background: var(--lt-surface, rgba(255,255,255,0.72));
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      box-shadow: var(--lt-shadow-soft, 0 8px 24px rgba(0,0,0,0.08));
      overflow: hidden;
    }
    .workspace-details > summary {
      cursor: pointer;
      list-style: none;
      padding: 0.7rem 0.9rem;
      color: var(--lt-text, #1d1d1f);
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      user-select: none;
    }
    .workspace-details > summary::-webkit-details-marker { display: none; }
    .workspace-details > summary::after {
      content: "▾";
      font-size: 0.9rem;
      color: var(--lt-muted, #6e6e73);
      transition: transform 0.18s ease;
    }
    .workspace-details:not([open]) > summary::after { transform: rotate(-90deg); }
    .workspace-details-inner { padding: 0 0.55rem 0.55rem; }
    .workspace-toolbar-inline {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 0.45rem;
    }
    .visual-workspace.workspace-compact-height {
      --workspace-height: 180px;
      min-height: 140px;
      max-height: 220px;
    }

    /* Tablet fix: keep the result visible while changing sliders, but avoid the
       old stacked 420px + sticky layout that could trap touch scrolling. */
    @media (min-width: 641px) and (max-width: 1024px) {
      .canvas-section {
        position: sticky;
        top: 0;
        z-index: 50;
        padding-top: 0.35rem;
        padding-bottom: 0.45rem;
        background: var(--lt-bg, #f5f5f7) !important;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }
      .canvas-controls-details { display: none; }
      .workspace-details > summary { padding: 0.48rem 0.75rem; font-size: 0.9rem; }
      .workspace-details-inner { padding: 0 0.45rem 0.45rem; }
      .workspace-toolbar-inline { margin-bottom: 0.3rem; }
      .visual-workspace {
        --workspace-height: min(38vh, 320px);
        --left-panel-width: 48%;
        flex-direction: row;
        height: var(--workspace-height) !important;
        min-height: 230px;
        max-height: 320px;
        overflow: hidden;
      }
      .slice-dashboard {
        flex: 0 0 var(--left-panel-width);
        width: var(--left-panel-width);
        min-width: 190px;
        height: 100% !important;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
      .visual-workspace .canvas-container {
        flex: 1 1 auto;
        width: auto;
        height: 100% !important;
        min-width: 180px;
        touch-action: none;
      }
      .slice-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.42rem; }
      .slice-card { padding: 0.33rem; border-radius: 13px; }
      .slice-card svg { margin: 0.22rem 0 0.16rem; }
      .slice-note { display: none; }
      .workspace-resizer { display: block; flex-basis: 8px; }
      .workspace-height-resizer { display: none; }
      .controls { max-height: none; overflow: visible; }
    }

    /* Phones: sticky preview, not a huge sticky workspace. The summary can collapse
       it to a thin bar; the 3D+2D button opens a larger non-sticky view. */
    @media (max-width: 640px) {
      .canvas-section {
        position: sticky;
        top: 0;
        z-index: 90;
        padding: 0.22rem 0 0.38rem;
        margin-inline: -0.15rem;
        background: linear-gradient(180deg, var(--lt-bg, #f5f5f7) 88%, rgba(245,245,247,0));
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        contain: layout paint;
      }
      .canvas-controls-details { display: none; }
      .workspace-details { border-radius: 18px !important; overflow: hidden; }
      .workspace-details > summary { padding: 0.46rem 0.68rem; font-size: 0.86rem; min-height: 2.15rem; }
      .workspace-details:not([open]) { box-shadow: var(--lt-shadow-soft); }
      .workspace-details-inner { padding: 0 0.32rem 0.34rem; }
      .workspace-toolbar-inline { display: none; }
      .visual-workspace { flex-direction: row; height: clamp(150px, 31vh, 215px) !important; min-height: 150px; max-height: 215px; overflow: hidden; gap: 0.28rem; border-radius: 16px; }
      .visual-workspace .canvas-container { order: 1; flex: 1 1 62%; width: auto; height: 100% !important; min-width: 0; touch-action: none; border-radius: 14px !important; }
      .slice-dashboard { order: 2; flex: 0 0 38%; width: 38%; height: 100% !important; min-width: 0; max-height: none; overflow: hidden; padding: 0.34rem; border-radius: 14px; }
      .workspace-resizer, .workspace-height-resizer { display: none; }
      .slice-dashboard-head { align-items: flex-start; margin-bottom: 0.25rem; }
      .slice-dashboard-head strong { font-size: 0.7rem; line-height: 1; }
      .slice-dashboard-head > div:first-child span { display: none; }
  

    /* v3: portrait phones/tablets show 3D above 2D. Side-by-side is only used in landscape/wide screens. */
    @media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
      .visual-workspace {
        flex-direction: column !important;
        --workspace-height: min(58vh, 620px);
        height: var(--workspace-height) !important;
        min-height: 500px;
        max-height: 620px;
        overflow: hidden;
        gap: 0.45rem;
      }
      .visual-workspace .canvas-container {
        order: 1;
        width: 100% !important;
        flex: 0 0 54% !important;
        height: 54% !important;
        min-height: 250px;
        touch-action: none;
      }
      .slice-dashboard {
        order: 2;
        width: 100% !important;
        flex: 1 1 46% !important;
        height: 46% !important;
        min-width: 0;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
      .slice-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
      }
      .workspace-resizer { display: none !important; }
      .workspace-height-resizer { display: none !important; }
    }

    @media (max-width: 640px) and (orientation: portrait) {
      .visual-workspace {
        flex-direction: column !important;
        height: clamp(285px, 48vh, 405px) !important;
        min-height: 285px;
        max-height: 405px;
        overflow: hidden;
        gap: 0.34rem;
      }
      .visual-workspace .canvas-container {
        order: 1;
        width: 100% !important;
        flex: 0 0 54% !important;
        height: 54% !important;
        min-height: 150px;
      }
      .slice-dashboard {
        order: 2;
        width: 100% !important;
        flex: 1 1 46% !important;
        height: 46% !important;
        min-width: 0;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
      .slice-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.28rem !important;
      }
      .slice-card:nth-child(n+3) { display: block !important; }
      .slice-card svg { aspect-ratio: 1 / 0.52 !important; min-height: 52px; }
      .slice-dashboard-head { position: sticky; top: 0; z-index: 3; background: var(--lt-surface, rgba(255,255,255,0.78)); padding-bottom: 0.2rem; }
      .visual-workspace.mobile-expanded { height: auto !important; max-height: none; overflow: visible; }
      .visual-workspace.mobile-expanded .canvas-container { height: clamp(240px, 48vh, 380px) !important; flex-basis: auto !important; }
      .visual-workspace.mobile-expanded .slice-dashboard { height: auto !important; max-height: none; overflow: visible !important; }
    }

    @media (max-width: 1024px) and (orientation: landscape) {
      .visual-workspace { flex-direction: row !important; }
    }

    .slice-dashboard-toolbar { justify-content: flex-start; gap: 0.22rem; }
      .slice-cut-control, .slice-mini-toggle, .slice-mini-btn { font-size: 0.62rem; padding: 0.18rem 0.32rem; }
      #print-report, #slice-dashboard-fullscreen { display: none !important; }
      .slice-dashboard-grid { grid-template-columns: 1fr; gap: 0.24rem; }
      .slice-card { padding: 0.22rem; border-radius: 10px; }
      .slice-card:nth-child(n+3) { display: none; }
      .slice-card-head { min-height: auto; }
      .slice-card-head strong { font-size: 0.6rem; }
      .slice-card-head span { display: none; }
      .slice-marker-choice, .slice-card-foot, .slice-note { display: none !important; }
      .slice-card svg { aspect-ratio: 1 / 0.62; margin: 0.12rem 0 0; border-radius: 8px; }
      .visual-workspace.mobile-expanded { flex-direction: column; height: auto !important; min-height: 0; max-height: none; overflow: visible; }
      .visual-workspace.mobile-expanded .canvas-container { flex-basis: auto; width: 100%; height: clamp(230px, 48vh, 360px) !important; }
      .visual-workspace.mobile-expanded .slice-dashboard { flex-basis: auto; width: 100%; height: auto !important; overflow: visible; }
      .visual-workspace.mobile-expanded .slice-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.34rem; }
      .visual-workspace.mobile-expanded .slice-card:nth-child(n+3) { display: block; }
      .visual-workspace.mobile-expanded .slice-card svg { aspect-ratio: 1 / 0.82; }
      body.mobile-big-preview .canvas-section { position: relative; top: auto; z-index: auto; background: transparent; }
      .controls { grid-template-columns: 1fr; padding: 0.72rem; gap: 0.72rem; }
      .slider-container { gap: 0.35rem; margin-bottom: 0.55rem; }
      .slider-container label { width: 96px; font-size: 0.78rem; }
      .slider-value { width: 42px; font-size: 0.76rem; }
      .angle-number-input { width: 4.1rem; font-size: 0.76rem; }
      .seo-hero h2 { font-size: clamp(1.65rem, 9vw, 2.4rem); }
      .seo-hero, .seo-content { padding: 1rem; }
    }

    .slice-dashboard-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      align-items: center;
      justify-content: flex-end;
    }
    .slice-cut-control {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      border: 1px solid var(--lt-border, rgba(0,0,0,0.10));
      border-radius: 999px;
      padding: 0.18rem 0.45rem;
      background: var(--lt-surface-strong, rgba(255,255,255,0.88));
      color: var(--lt-muted, #6e6e73);
      font-size: 0.72rem;
      font-weight: 650;
      white-space: nowrap;
    }
    .slice-cut-control select { font-size: 0.72rem !important; padding: 0.05rem 0.35rem !important; }
    .slice-mini-btn {
      border: 1px solid var(--lt-border, rgba(0,0,0,0.10));
      border-radius: 999px;
      background: var(--lt-surface-strong, rgba(255,255,255,0.88));
      color: var(--lt-text, #1d1d1f);
      font-size: 0.72rem;
      font-weight: 750;
      padding: 0.28rem 0.52rem;
      cursor: pointer;
    }
    .slice-mini-btn:hover { transform: translateY(-1px); }
    .slice-dashboard-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      margin-bottom: 0.55rem;
      color: var(--lt-text, #1d1d1f);
      font-size: 0.86rem;
    }
    .slice-dashboard-head strong { display: block; letter-spacing: -0.02em; }
    .slice-dashboard-head span { display: block; color: var(--lt-muted, #6e6e73); font-size: 0.73rem; margin-top: 0.05rem; }
    .slice-mini-toggle { color: var(--lt-muted, #6e6e73); font-size: 0.75rem; white-space: nowrap; }
    .slice-dashboard-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(150px, 1fr));
      gap: 0.55rem;
    }
    .slice-card {
      border: 1px solid var(--lt-border, rgba(0,0,0,0.08));
      border-radius: 16px;
      background: rgba(120, 120, 128, 0.08);
      padding: 0.45rem;
      min-width: 0;
    }
    .slice-card-head, .slice-card-foot {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 0.28rem;
      color: var(--lt-muted, #6e6e73);
      font-size: 0.62rem;
      line-height: 1.12;
      min-height: 1.25rem;
    }
    .slice-card-foot span { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
    .slice-card-foot span:nth-child(2) { text-align: center; }
    .slice-card-foot span:last-child { text-align: right; }
    .slice-card-head label, .slice-card-head strong { color: var(--lt-text, #1d1d1f); font-weight: 800; font-size: 0.74rem; line-height: 1.12; }
    .slice-marker-choice { display:flex; align-items:center; gap:0.28rem; margin-top:0.28rem; color:var(--lt-muted,#6e6e73); font-size:0.68rem; line-height:1.1; }
    .slice-card.slice-card-hover { outline: 2px solid var(--lt-blue, #0071e3); outline-offset: 2px; }
    .slice-card-head { flex-wrap: wrap; }
    .slice-card-head span { text-align: right; font-variant-numeric: tabular-nums; max-width: 100%; flex: 1 1 100%; overflow-wrap: anywhere; margin-top: 0.15rem; }
    .slice-card svg {
      width: 100%;
      aspect-ratio: 1 / 1;
      display: block;
      margin: 0.35rem 0 0.25rem;
      border-radius: 12px;
      background: #ffffff;
      overflow: hidden;
    }
    .slice-dashboard[data-plot-theme="dark"] .slice-card svg { background: #050816; }
    .slice-dashboard[data-plot-theme="light"] .slice-card svg { background: #ffffff; }
    .slice-vector-label { font: 4.0px system-ui, -apple-system, Segoe UI, sans-serif; pointer-events: none; }
    .slice-axis-label { font: 3.25px system-ui, -apple-system, Segoe UI, sans-serif; pointer-events: none; opacity: 0.82; }
    .slice-ring-label { font: 3.05px system-ui, -apple-system, Segoe UI, sans-serif; pointer-events: none; opacity: 0.78; }
    .custom-array-panel textarea { width: 100%; min-height: 8rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; line-height: 1.35; }
    .custom-array-panel code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
    .slice-wave-circle { fill: none; stroke-width: 0.55; opacity: 0.42; }
    .slice-contour-main { fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .slice-axis-line { stroke-width: 0.45; vector-effect: non-scaling-stroke; }
    .slice-note {
      margin-top: 0.5rem;
      color: var(--lt-muted, #6e6e73);
      font-size: 0.7rem;
      line-height: 1.35;
    }
    .slice-tooltip {
      position: absolute;
      z-index: 2147482500;
      pointer-events: none;
      padding: 0.35rem 0.55rem;
      border-radius: 999px;
      background: rgba(0,0,0,0.72);
      color: white;
      font-size: 12px;
      line-height: 1;
      transform: translate(-50%, -120%);
      opacity: 0;
      transition: opacity 0.12s ease;
      white-space: nowrap;
    }
    .slice-tooltip.visible { opacity: 1; }
    @media (max-width: 980px) {
      .visual-workspace { grid-template-columns: 1fr; }
      .slice-dashboard-grid { grid-template-columns: repeat(4, minmax(130px, 1fr)); overflow-x: auto; padding-bottom: 0.2rem; }
      .slice-dashboard { overflow: visible; }
    }
    @media (max-width: 640px) {
      .slice-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    .print-report-btn {
      font-weight: 750;
      background: linear-gradient(180deg, #111827, #374151) !important;
      color: white !important;
    }
    @media (prefers-color-scheme: dark) {
      .print-report-btn { background: linear-gradient(180deg, #f5f5f7, #d1d5db) !important; color: #111827 !important; }
    }



    /* v4 responsive + progressive rendering polish: portrait touch devices stack 3D over 2D,
       keep the 2D dashboard independently scrollable, and allow the 2D section to collapse. */
    .visual-workspace.slice-2d-collapsed .slice-dashboard,
    .visual-workspace.slice-2d-collapsed .workspace-resizer { display: none !important; }
    .visual-workspace.slice-2d-collapsed .canvas-container { flex: 1 1 100% !important; width: 100% !important; height: 100% !important; }
    .slice-dashboard { touch-action: pan-y; }

    @media (max-width: 1024px) and (orientation: portrait) {
      .visual-workspace {
        flex-direction: column !important;
        height: clamp(430px, 66vh, 680px) !important;
        min-height: 430px !important;
        max-height: 680px !important;
        overflow: hidden !important;
        gap: 0.45rem !important;
      }
      .visual-workspace .canvas-container {
        order: 1 !important;
        width: 100% !important;
        flex: 0 0 52% !important;
        height: 52% !important;
        min-height: 210px !important;
        touch-action: none !important;
      }
      .slice-dashboard {
        order: 2 !important;
        width: 100% !important;
        flex: 1 1 48% !important;
        height: 48% !important;
        min-width: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
      }
      .slice-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.44rem !important;
        overflow: visible !important;
        padding-bottom: 0.5rem !important;
      }
      .workspace-resizer, .workspace-height-resizer { display: none !important; }
      .slice-dashboard-head {
        position: sticky !important;
        top: 0 !important;
        z-index: 4 !important;
        background: var(--lt-surface-strong, rgba(255,255,255,0.88)) !important;
        border-radius: 14px !important;
        padding: 0.35rem !important;
        margin: -0.12rem -0.12rem 0.35rem !important;
      }
      .visual-workspace.slice-2d-collapsed { height: clamp(230px, 40vh, 360px) !important; min-height: 230px !important; }
    }

    @media (max-width: 640px) and (orientation: portrait) {
      .visual-workspace {
        height: clamp(360px, 58vh, 520px) !important;
        min-height: 360px !important;
        max-height: 520px !important;
      }
      .visual-workspace .canvas-container { flex-basis: 50% !important; height: 50% !important; min-height: 170px !important; }
      .slice-dashboard { flex-basis: 50% !important; height: 50% !important; padding: 0.42rem !important; }
      .slice-card:nth-child(n+3) { display: block !important; }
      .slice-card svg { aspect-ratio: 1 / 0.68 !important; min-height: 64px !important; }
      .slice-dashboard-toolbar { gap: 0.25rem !important; }
      #toggle-2d-panel { display: inline-flex !important; }
    }

    @media (max-width: 1024px) and (orientation: landscape) {
      .visual-workspace { flex-direction: row !important; }
      .slice-dashboard { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
    }

    .visual-workspace.progressive-low .canvas-container,
    .visual-workspace.progressive-low .slice-dashboard {
      filter: saturate(0.92);
    }


/* Desktop workspace upgrade: make the 2D + 3D plots use the available screen width,
   show pop-out actions clearly, and prevent the element-spacing slider from being squeezed. */
@media (min-width: 1100px) {
  .container.mx-auto,
  .container.max-w-7xl {
    max-width: min(1920px, calc(100vw - 32px)) !important;
  }
  .canvas-section {
    width: 100%;
  }
  .workspace-details-inner {
    padding-inline: clamp(0.55rem, 1vw, 1rem);
  }
  .visual-workspace {
    --workspace-height: clamp(520px, 68vh, 880px);
    --left-panel-width: 46%;
    width: 100%;
  }
  .slice-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }
  .slice-card svg {
    min-height: 180px;
  }
}

@media (min-width: 1500px) {
  .visual-workspace {
    --workspace-height: clamp(600px, 72vh, 940px);
    --left-panel-width: 44%;
  }
  .slice-card svg {
    min-height: 210px;
  }
}

.plot-popout-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border-color: rgba(37, 99, 235, 0.38) !important;
  background: rgba(37, 99, 235, 0.10) !important;
  color: #1d4ed8 !important;
  font-weight: 800 !important;
}
.plot-popout-btn::before {
  content: "↗";
  font-size: 0.9em;
  line-height: 1;
}
.plot-popout-btn:hover {
  background: rgba(37, 99, 235, 0.16) !important;
}

/* Let spacing use its own row on dense control grids. */
.array-config-controls .spacing-slider,
#element-spacing.slider-wide-row {
  min-width: 0;
}
.array-config-controls .spacing-slider {
  grid-column: span 2;
}
.array-config-controls .spacing-slider .slider-container,
.spacing-slider.slider-container {
  display: grid;
  grid-template-columns: minmax(110px, max-content) minmax(220px, 1fr) minmax(56px, max-content);
  gap: 0.55rem;
  align-items: center;
  width: 100%;
}
.array-config-controls .spacing-slider label,
.spacing-slider.slider-container label {
  width: auto;
  margin-right: 0;
}
.array-config-controls .spacing-slider .slider-value,
.spacing-slider.slider-container .slider-value {
  width: auto;
  min-width: 56px;
  margin-left: 0;
}

@media (max-width: 900px) {
  .array-config-controls .spacing-slider {
    grid-column: 1 / -1;
  }
  .array-config-controls .spacing-slider .slider-container,
  .spacing-slider.slider-container {
    grid-template-columns: 1fr auto;
    row-gap: 0.35rem;
  }
  .array-config-controls .spacing-slider input[type="range"],
  .spacing-slider.slider-container input[type="range"] {
    grid-column: 1 / -1;
    order: 3;
  }
}


/* Desktop split layout: visual workspace on the left, all controls/info on the right. */
@media (min-width: 1100px) {
  .grid-container {
    display: grid !important;
    grid-template-columns: minmax(720px, 1.65fr) minmax(380px, 0.95fr);
    gap: clamp(1rem, 1.4vw, 1.6rem);
    align-items: start;
  }
  .canvas-section {
    position: sticky;
    top: 0.75rem;
    z-index: 25;
    width: 100%;
    min-width: 0;
  }
  .controls-and-info {
    width: 100%;
    min-width: 0;
  }
  .controls-and-info.controls-panel-grid,
  .controls-panel-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .canvas-controls-details {
    margin-bottom: 0.75rem;
  }
  .workspace-details > summary {
    font-size: 1rem;
  }
  .visual-workspace {
    --workspace-height: clamp(560px, 74vh, 900px) !important;
    --left-panel-width: 45%;
  }
  .workspace-toolbar-inline {
    justify-content: space-between;
  }
  .workspace-toolbar-inline::after {
    content: "Use ↗ buttons to open 2D/3D on a second monitor";
    color: var(--lt-muted);
    font-size: 0.82rem;
    font-weight: 650;
  }
  .slice-dashboard-toolbar {
    gap: 0.42rem;
  }
  .plot-popout-btn {
    box-shadow: 0 0 0 2px rgba(37,99,235,0.12) inset;
  }
}

@media (min-width: 1500px) {
  .grid-container {
    grid-template-columns: minmax(900px, 1.8fr) minmax(430px, 0.9fr);
  }
  .visual-workspace {
    --workspace-height: clamp(640px, 78vh, 980px) !important;
  }
}

@media (min-width: 1100px) and (max-width: 1280px) {
  .grid-container {
    grid-template-columns: minmax(620px, 1.5fr) minmax(360px, 0.9fr);
  }
  .visual-workspace {
    --left-panel-width: 42%;
  }
  .slice-dashboard-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Give the element spacing slider its own full-width row in the right control column. */
@media (min-width: 900px) {
  .spacing-slider.slider-container,
  .array-config-controls .spacing-slider .slider-container {
    grid-template-columns: 1fr !important;
  }
  .spacing-slider.slider-container input[type="range"],
  .array-config-controls .spacing-slider input[type="range"] {
    width: 100%;
  }
  .spacing-slider.slider-container label,
  .array-config-controls .spacing-slider label {
    width: auto !important;
  }
}


/* Final desktop split: left half is ONLY the 2D/3D visualization, right half is everything else. */
@media (min-width: 1100px) {
  .container.mx-auto,
  .container.max-w-7xl {
    max-width: none !important;
    width: 100% !important;
    padding-left: clamp(12px, 1vw, 20px) !important;
    padding-right: clamp(12px, 1vw, 20px) !important;
  }
  .grid-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(1rem, 1.4vw, 1.7rem) !important;
    align-items: start !important;
    width: 100% !important;
  }
  .canvas-section {
    grid-column: 1 !important;
    position: sticky !important;
    top: 0.75rem !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .controls-and-info {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .controls-and-info.controls-panel-grid,
  .controls-panel-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .workspace-details > summary {
    display: none !important;
  }
  .workspace-details {
    display: block !important;
    border-radius: 24px !important;
  }
  .workspace-details-inner {
    padding: clamp(0.7rem, 1vw, 1rem) !important;
  }
  .workspace-toolbar-inline {
    justify-content: stretch !important;
    margin-bottom: 0.8rem !important;
  }
  .workspace-toolbar-inline::after {
    content: none !important;
  }
  .workspace-popout-main {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.9rem 1.1rem !important;
    border-radius: 18px !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em;
    background: #2563eb !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28) !important;
  }
  .workspace-popout-main::before {
    content: "↗";
    margin-right: 0.5rem;
    font-size: 1.1em;
  }
  .visual-workspace {
    --workspace-height: calc(100vh - 9.5rem) !important;
    --left-panel-width: 50% !important;
    height: var(--workspace-height) !important;
    min-height: 620px !important;
    max-height: none !important;
  }
  .visual-workspace .canvas-container,
  .slice-dashboard {
    height: 100% !important;
  }
  .slice-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
  }
  .slice-card svg {
    min-height: clamp(135px, 16vh, 220px) !important;
  }
  .canvas-toolbar,
  .mouse-help,
  .canvas-controls-details {
    display: none !important;
  }
  .array-config-controls {
    grid-template-columns: 1fr !important;
  }
  .array-config-controls .spacing-slider {
    grid-column: 1 / -1 !important;
  }
  .array-config-controls .spacing-slider,
  .spacing-slider.slider-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.4rem !important;
  }
  .array-config-controls .spacing-slider input[type="range"],
  .spacing-slider.slider-container input[type="range"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (min-width: 1100px) and (max-width: 1350px) {
  .slice-dashboard-grid { grid-template-columns: 1fr !important; }
  .visual-workspace { --left-panel-width: 46% !important; }
}

/* User requested desktop layout: complete left half = live 2D/3D, complete right half = controls + math/explanations. */
@media (min-width: 1100px) {
  body:not(.plot-popout-mode) .grid-container {
    display: grid !important;
    grid-template-columns: minmax(0, 50vw) minmax(0, 1fr) !important;
  }
  body:not(.plot-popout-mode) .canvas-section {
    grid-column: 1 !important;
  }
  body:not(.plot-popout-mode) .controls-and-info,
  body:not(.plot-popout-mode) .explanations {
    grid-column: 2 !important;
  }
  body:not(.plot-popout-mode) .explanations {
    margin-top: 0 !important;
  }
  body:not(.plot-popout-mode) .workspace-popout-main,
  body:not(.plot-popout-mode) #workspace-popout {
    display: inline-flex !important;
    width: 100% !important;
    min-height: 58px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: .55rem !important;
    border-radius: 18px !important;
    font-size: 1.08rem !important;
    font-weight: 900 !important;
    background: #2563eb !important;
    color: #fff !important;
    box-shadow: 0 16px 34px rgba(37,99,235,.30) !important;
  }
  body:not(.plot-popout-mode) #workspace-popout::before {
    content: "↗";
    margin-right: .55rem;
    font-size: 1.2em;
  }
  body:not(.plot-popout-mode) .array-config-controls .slider-container:has(#element-spacing),
  body:not(.plot-popout-mode) .slider-container:has(#element-spacing) {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .38rem !important;
  }
}

/* Real live second-monitor popout: hide every page section except the live 2D/3D workspace. */
html.plot-popout-mode,
body.plot-popout-mode {
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #0b1020 !important;
}
body.plot-popout-mode .header-section,
body.plot-popout-mode .seo-hero,
body.plot-popout-mode .seo-content,
body.plot-popout-mode .canvas-controls-details,
body.plot-popout-mode .controls-and-info,
body.plot-popout-mode footer,
body.plot-popout-mode .workspace-height-resizer,
body.plot-popout-mode .workspace-toolbar-inline #toggle-workspace-compact {
  display: none !important;
}
body.plot-popout-mode .container,
body.plot-popout-mode .container.mx-auto,
body.plot-popout-mode .container.max-w-7xl {
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.plot-popout-mode .grid-container,
body.plot-popout-mode .canvas-section,
body.plot-popout-mode .workspace-details,
body.plot-popout-mode .workspace-details-inner {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.plot-popout-mode .workspace-details > summary {
  display: none !important;
}
body.plot-popout-mode .live-popout-header {
  position: fixed;
  z-index: 50;
  left: 14px;
  top: 12px;
  right: 14px;
  display: flex;
  gap: .65rem;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .95rem;
  border-radius: 16px;
  color: #e5eefb;
  background: rgba(15,23,42,.82);
  border: 1px solid rgba(148,163,184,.22);
  backdrop-filter: blur(10px);
  font: 14px system-ui, -apple-system, Segoe UI, sans-serif;
}
body.plot-popout-mode .live-popout-header span {
  color: #bfd1ee;
  font-size: 12px;
}
body.plot-popout-mode .visual-workspace {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  width: 100vw !important;
  padding: 72px 12px 12px !important;
  border-radius: 0 !important;
  gap: 12px !important;
  --left-panel-width: 50% !important;
  background: #0b1020 !important;
}
body.plot-popout-mode .slice-dashboard,
body.plot-popout-mode .visual-workspace .canvas-container {
  height: calc(100vh - 84px) !important;
  max-height: none !important;
}
body.plot-popout-mode .slice-dashboard {
  overflow: auto !important;
}
body.plot-popout-mode #workspace-popout,
body.plot-popout-mode #workspace-fullscreen,
body.plot-popout-mode #print-report {
  display: none !important;
}

/* Layout cleanup: display/model options before array configuration; compact array controls. */
.controls > .mt-4.flex.flex-wrap.justify-between.items-center {
  grid-column: 1 / -1;
  margin-top: 0.25rem !important;
  margin-bottom: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  gap: 0.75rem 1rem;
}

.array-config-controls {
  display: flex !important;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch !important;
}

.array-size-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: center;
}

.array-spacing-taper-row {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(170px, 0.72fr) minmax(230px, 1fr);
  gap: 0.85rem;
  align-items: center;
}

.array-size-row .slider-container,
.array-spacing-taper-row .slider-container,
.array-spacing-taper-row .taper-select-control {
  margin-bottom: 0 !important;
  min-width: 0;
}

.array-spacing-taper-row .spacing-slider.slider-container,
.array-spacing-taper-row #chebyshev-sidelobe-slider {
  display: grid !important;
  grid-template-columns: max-content minmax(70px, 1fr) max-content !important;
  gap: 0.5rem !important;
  align-items: center !important;
  width: 100%;
}

.array-spacing-taper-row .spacing-slider label,
.array-spacing-taper-row #chebyshev-sidelobe-slider label {
  width: auto !important;
  margin-right: 0 !important;
}

.array-spacing-taper-row .spacing-slider input[type="range"],
.array-spacing-taper-row #chebyshev-sidelobe-slider input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
}

.array-spacing-taper-row .taper-select-control {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
}

.array-spacing-taper-row .taper-select-control select {
  width: 100%;
  min-width: 0;
}

.array-spacing-taper-row .slider-value {
  width: auto;
  min-width: 44px;
}

@media (max-width: 900px) {
  .array-size-row,
  .array-spacing-taper-row {
    grid-template-columns: 1fr;
  }
}

/* Custom coordinate based array editor */
.custom-array-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.array-source-compact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  min-width: 190px;
}
.array-source-compact select {
  min-width: 190px;
  background: #ffffff;
}
.geometry-editor-head {
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}
.custom-array-panel {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.72));
}
.coordinate-editor {
  width: 100%;
  min-height: 118px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.86rem;
  line-height: 1.55;
  white-space: pre;
  overflow: auto;
  background: #ffffff;
}
.array-mode-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.22rem 0.58rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: #075985;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  white-space: nowrap;
}
.coordinate-chip-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-height: 132px;
  overflow: auto;
  padding: 0.45rem;
  border-radius: 0.5rem;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(226, 232, 240, 0.9);
}
.coordinate-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.22rem 0.5rem;
  border-radius: 0.45rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.76rem;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.coordinate-chip-more {
  color: #0369a1;
  background: #e0f2fe;
  border-color: #bae6fd;
}
.secondary-btn {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
.custom-array-summary {
  grid-column: 1 / -1;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.84rem;
}
.antenna-grid.custom-coordinate-active {
  grid-template-columns: 1fr;
}
@media (max-width: 640px) {
  .coordinate-editor { min-height: 150px; font-size: 0.78rem; }
  .custom-array-head { flex-direction: column; align-items: stretch; }
  .array-source-compact { align-items: stretch; min-width: 0; }
  .array-source-compact select { width: 100%; min-width: 0; }
  .array-mode-pill { align-self: flex-start; }
}

.receive-doa-panel {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.receive-doa-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.doa-controls-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.doa-option-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.doa-freeze-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.doa-seed-input {
  width: 6rem;
}
.doa-results-grid {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(130px, 0.8fr) minmax(260px, 2fr);
  gap: 0.75rem;
  align-items: stretch;
}
.doa-result-card,
.doa-map-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #c7d2fe;
  border-radius: 0.65rem;
  padding: 0.65rem;
}
.doa-big-value {
  font-weight: 700;
  font-size: 1rem;
  color: #1e1b4b;
  margin: 0.15rem 0;
}
#doa-correlation-map {
  display: block;
  width: 100%;
  height: 120px;
  border-radius: 0.45rem;
  background: #0f172a;
}
@media (max-width: 900px) {
  .doa-controls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doa-results-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .receive-doa-head { flex-direction: column; }
  .doa-controls-grid { grid-template-columns: 1fr; }
}

/* Radar / Receive DOA refinement: max two sliders next to each other, value inputs beside sliders */
.receive-doa-panel {
  background: linear-gradient(180deg, rgba(238, 242, 255, 0.98), rgba(245, 247, 255, 0.98));
}
.doa-math-note {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #c7d2fe;
  border-radius: 0.75rem;
  padding: 0.75rem;
}
.doa-math-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #312e81;
  margin-bottom: 0.45rem;
}
.doa-formula-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.doa-formula-grid > div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.55rem;
  padding: 0.5rem;
}
.doa-formula-grid code {
  display: block;
  white-space: normal;
  word-break: break-word;
  font-size: 0.78rem;
  color: #0f172a;
}
.math-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.15rem;
}
.doa-controls-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.75rem;
}
.doa-control-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.doa-slider-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #c7d2fe;
  border-radius: 0.65rem;
  padding: 0.65rem;
  margin-bottom: 0 !important;
}
.doa-slider-card label {
  width: auto !important;
  min-width: 0 !important;
  margin-bottom: 0.35rem;
  font-weight: 600;
  color: #1e1b4b;
}
.doa-slider-line {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 4.7rem auto;
  gap: 0.45rem;
  align-items: center;
}
.doa-slider-line input[type="range"] {
  min-width: 0;
}
.doa-value-input {
  width: 4.7rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.45rem;
  padding: 0.25rem 0.35rem;
  font-size: 0.82rem;
  background: white;
}
.doa-unit {
  font-size: 0.78rem;
  color: #475569;
  min-width: 1.4rem;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.doa-results-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.doa-wide-card {
  grid-column: 1 / -1;
}
#doa-correlation-map,
#doa-sample-map,
#doa-az-cut {
  display: block;
  width: 100%;
  border-radius: 0.45rem;
  background: #0f172a;
}
#doa-correlation-map { height: 170px; }
#doa-sample-map,
#doa-az-cut { height: 150px; }
@media (max-width: 900px) {
  .doa-control-pair,
  .doa-formula-grid,
  .doa-results-grid { grid-template-columns: 1fr !important; }
  .doa-slider-line { grid-template-columns: minmax(120px, 1fr) 4.7rem auto; }
}


/* Mutual coupling card: checkbox enables a disabled-by-default slider */
.coupling-card {
  border: 1px solid #cbd5e1;
  border-radius: 0.85rem;
  padding: 0.75rem;
  background: #f8fafc;
}
.coupling-enable-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  font-weight: 700;
  color: #0f172a;
}
.coupling-enable-row input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #4f46e5;
}
.coupling-enable-text::after {
  content: ":";
}
.coupling-state-pill {
  font-size: 0.68rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  padding: 0.28rem 0.45rem;
  background: #e2e8f0;
  color: #475569;
}
.coupling-card.coupling-enabled {
  border-color: #a5b4fc;
  background: #eef2ff;
}
.coupling-card.coupling-enabled .coupling-state-pill {
  background: #4f46e5;
  color: white;
}
.coupling-slider-container {
  width: 100%;
  margin-top: 0.65rem !important;
  margin-bottom: 0 !important;
}
.coupling-slider-container label {
  width: auto !important;
  min-width: 0 !important;
  margin-bottom: 0.3rem;
  color: #334155;
}
.coupling-slider-line {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
}
#coupling-strength:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.coupling-help {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #64748b;
}

/* Expanded SEO cards and detailed radar math foundation */
.seo-card-grid-expanded {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.seo-content-card h3 {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.radar-math-foundation-card {
  border: 1px solid #c7d2fe;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.radar-step-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
.radar-step-card {
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.9);
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(260px, 1.4fr) minmax(280px, 1fr);
  align-items: center;
  gap: 0.8rem;
}
.radar-step-card h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 760;
  color: #1e1b4b;
}
.radar-step-card p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #475569;
}
.mini-math {
  margin: 0 !important;
  overflow-x: auto;
}
.mini-math .MathJax,
.mini-math mjx-container {
  font-size: 92% !important;
}
@media (max-width: 900px) {
  .radar-step-card {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0.45rem;
  }
}
@media (max-width: 640px) {
  .coupling-slider-line { grid-template-columns: 1fr; gap: 0.35rem; }
  .radar-step-grid { grid-template-columns: 1fr; }
}

/* v2026-05-23 dark-mode completion for newly added radar/coupling/SEO cards */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .seo-content,
html[data-theme="dark"] .seo-content-card,
html[data-theme="dark"] .radar-math-foundation-card,
html[data-theme="dark"] .receive-doa-panel,
html[data-theme="dark"] .coupling-card,
html[data-theme="dark"] .doa-result-card,
html[data-theme="dark"] .doa-map-card,
html[data-theme="dark"] .doa-math-note,
html[data-theme="dark"] .radar-step-card {
  background: linear-gradient(180deg, rgba(36,36,38,0.92), rgba(28,28,30,0.86)) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: var(--lt-text) !important;
  box-shadow: var(--lt-shadow-soft) !important;
}

html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .math-box,
html[data-theme="dark"] .mini-math,
html[data-theme="dark"] .doa-formula-grid > div {
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--lt-text) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] label,
html[data-theme="dark"] .font-semibold,
html[data-theme="dark"] .font-medium,
html[data-theme="dark"] .radar-step-card h3,
html[data-theme="dark"] .doa-math-title,
html[data-theme="dark"] .doa-big-value,
html[data-theme="dark"] .coupling-enable-row,
html[data-theme="dark"] .seo-content h2,
html[data-theme="dark"] .seo-content h3 {
  color: var(--lt-text) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] .text-sm,
html[data-theme="dark"] .radar-step-card p,
html[data-theme="dark"] .math-label,
html[data-theme="dark"] .coupling-help,
html[data-theme="dark"] .doa-unit,
html[data-theme="dark"] .seo-content p,
html[data-theme="dark"] .seo-content li {
  color: var(--lt-muted) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .doa-value-input {
  background-color: rgba(15, 23, 42, 0.86) !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: var(--lt-text) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: rgba(245,245,247,0.52) !important;
}

html[data-theme="dark"] .coupling-state-pill {
  background: rgba(148, 163, 184, 0.22) !important;
  color: var(--lt-muted) !important;
}

html[data-theme="dark"] .coupling-card.coupling-enabled {
  background: linear-gradient(180deg, rgba(49,46,129,0.62), rgba(30,27,75,0.62)) !important;
  border-color: rgba(129,140,248,0.58) !important;
}

html[data-theme="dark"] .coupling-card.coupling-enabled .coupling-state-pill {
  background: #818cf8 !important;
  color: #050507 !important;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .bg-white,
  html:not([data-theme="light"]) .seo-content,
  html:not([data-theme="light"]) .seo-content-card,
  html:not([data-theme="light"]) .radar-math-foundation-card,
  html:not([data-theme="light"]) .receive-doa-panel,
  html:not([data-theme="light"]) .coupling-card,
  html:not([data-theme="light"]) .doa-result-card,
  html:not([data-theme="light"]) .doa-map-card,
  html:not([data-theme="light"]) .doa-math-note,
  html:not([data-theme="light"]) .radar-step-card {
    background: linear-gradient(180deg, rgba(36,36,38,0.92), rgba(28,28,30,0.86)) !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: var(--lt-text) !important;
    box-shadow: var(--lt-shadow-soft) !important;
  }
  html:not([data-theme="light"]) .bg-gray-100,
  html:not([data-theme="light"]) .math-box,
  html:not([data-theme="light"]) .mini-math,
  html:not([data-theme="light"]) .doa-formula-grid > div {
    background: rgba(15, 23, 42, 0.72) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: var(--lt-text) !important;
  }
  html:not([data-theme="light"]) h1,
  html:not([data-theme="light"]) h2,
  html:not([data-theme="light"]) h3,
  html:not([data-theme="light"]) label,
  html:not([data-theme="light"]) .font-semibold,
  html:not([data-theme="light"]) .font-medium,
  html:not([data-theme="light"]) .radar-step-card h3,
  html:not([data-theme="light"]) .doa-math-title,
  html:not([data-theme="light"]) .doa-big-value,
  html:not([data-theme="light"]) .coupling-enable-row,
  html:not([data-theme="light"]) .seo-content h2,
  html:not([data-theme="light"]) .seo-content h3 {
    color: var(--lt-text) !important;
  }
  html:not([data-theme="light"]) p,
  html:not([data-theme="light"]) li,
  html:not([data-theme="light"]) .text-sm,
  html:not([data-theme="light"]) .radar-step-card p,
  html:not([data-theme="light"]) .math-label,
  html:not([data-theme="light"]) .coupling-help,
  html:not([data-theme="light"]) .doa-unit,
  html:not([data-theme="light"]) .seo-content p,
  html:not([data-theme="light"]) .seo-content li {
    color: var(--lt-muted) !important;
  }
  html:not([data-theme="light"]) input,
  html:not([data-theme="light"]) select,
  html:not([data-theme="light"]) textarea,
  html:not([data-theme="light"]) .doa-value-input {
    background-color: rgba(15, 23, 42, 0.86) !important;
    border-color: rgba(255,255,255,0.16) !important;
    color: var(--lt-text) !important;
  }
  html:not([data-theme="light"]) .coupling-state-pill {
    background: rgba(148, 163, 184, 0.22) !important;
    color: var(--lt-muted) !important;
  }
  html:not([data-theme="light"]) .coupling-card.coupling-enabled .coupling-state-pill {
    background: #818cf8 !important;
    color: #050507 !important;
  }
}


/* v2026-05-23 compact-title + dark-mode completion for vector coordinate and radar controls */
h1[data-lang="title"] {
  max-width: 100%;
  letter-spacing: -0.015em;
}
#seo-title { line-height: 1.2; }

html[data-theme="dark"] .custom-array-panel,
html[data-theme="dark"] #custom-coordinate-panel,
html[data-theme="dark"] .coordinate-chip-preview,
html[data-theme="dark"] .doa-slider-card,
html[data-theme="dark"] .custom-array-summary,
html[data-theme="dark"] .taper-note {
  background: linear-gradient(180deg, rgba(36,36,38,0.92), rgba(28,28,30,0.86)) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: var(--lt-text) !important;
  box-shadow: var(--lt-shadow-soft) !important;
}
html[data-theme="dark"] .geometry-editor-head {
  border-bottom-color: rgba(255,255,255,0.14) !important;
}
html[data-theme="dark"] .coordinate-chip {
  background: rgba(15,23,42,0.78) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: #e5e7eb !important;
}
html[data-theme="dark"] .coordinate-chip-more,
html[data-theme="dark"] .array-mode-pill {
  background: rgba(56,189,248,0.18) !important;
  border-color: rgba(125,211,252,0.32) !important;
  color: #bae6fd !important;
}
html[data-theme="dark"] .text-xs,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] #custom-array-status,
html[data-theme="dark"] .slider-value {
  color: var(--lt-muted) !important;
}
html[data-theme="dark"] .secondary-btn {
  background: rgba(51,65,85,0.95) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: var(--lt-text) !important;
}
html[data-theme="dark"] .secondary-btn:hover {
  background: rgba(71,85,105,0.98) !important;
}
html[data-theme="dark"] .btn:not(.secondary-btn) {
  border: 1px solid rgba(147,197,253,0.36) !important;
}
html[data-theme="dark"] code,
html[data-theme="dark"] .doa-formula-grid code,
html[data-theme="dark"] .coordinate-editor {
  color: #e5e7eb !important;
}
html[data-theme="dark"] input[type=range]::-webkit-slider-runnable-track {
  background: rgba(148,163,184,0.38) !important;
}
html[data-theme="dark"] input[type=range]::-moz-range-track {
  background: rgba(148,163,184,0.38) !important;
}
html[data-theme="dark"] #doa-correlation-map,
html[data-theme="dark"] #doa-sample-map,
html[data-theme="dark"] #doa-az-cut {
  border: 1px solid rgba(255,255,255,0.12) !important;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .custom-array-panel,
  html:not([data-theme="light"]) #custom-coordinate-panel,
  html:not([data-theme="light"]) .coordinate-chip-preview,
  html:not([data-theme="light"]) .doa-slider-card,
  html:not([data-theme="light"]) .custom-array-summary,
  html:not([data-theme="light"]) .taper-note {
    background: linear-gradient(180deg, rgba(36,36,38,0.92), rgba(28,28,30,0.86)) !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: var(--lt-text) !important;
    box-shadow: var(--lt-shadow-soft) !important;
  }
  html:not([data-theme="light"]) .geometry-editor-head { border-bottom-color: rgba(255,255,255,0.14) !important; }
  html:not([data-theme="light"]) .coordinate-chip {
    background: rgba(15,23,42,0.78) !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: #e5e7eb !important;
  }
  html:not([data-theme="light"]) .coordinate-chip-more,
  html:not([data-theme="light"]) .array-mode-pill {
    background: rgba(56,189,248,0.18) !important;
    border-color: rgba(125,211,252,0.32) !important;
    color: #bae6fd !important;
  }
  html:not([data-theme="light"]) .text-xs,
  html:not([data-theme="light"]) .text-gray-600,
  html:not([data-theme="light"]) .text-gray-700,
  html:not([data-theme="light"]) #custom-array-status,
  html:not([data-theme="light"]) .slider-value { color: var(--lt-muted) !important; }
  html:not([data-theme="light"]) .secondary-btn {
    background: rgba(51,65,85,0.95) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: var(--lt-text) !important;
  }
  html:not([data-theme="light"]) code,
  html:not([data-theme="light"]) .doa-formula-grid code,
  html:not([data-theme="light"]) .coordinate-editor { color: #e5e7eb !important; }
}

/* FMCW radar target scene controls */
.radar-scene-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #c7d2fe;
  border-radius: 0.85rem;
  padding: 0.85rem;
}
.radar-scene-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}
.radar-scene-head h4 {
  margin: 0;
  color: #1e1b4b;
  font-size: 0.95rem;
  font-weight: 760;
}
.radar-scene-head p {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.45;
}
.radar-scene-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
}
.radar-field {
  display: grid;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
}
.radar-field input,
.radar-field select {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.45rem;
  background: #fff;
  color: #0f172a;
  padding: 0.35rem 0.45rem;
  font-size: 0.82rem;
  font-weight: 500;
}
.radar-results-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 0.75fr)) minmax(260px, 1.8fr);
  gap: 0.75rem;
  align-items: stretch;
}
.radar-fft-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.radar-checkbox-field {
  align-content: end;
}
.radar-checkbox-field input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: #4f46e5;
}
.radar-hint {
  margin-top: 0.65rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.55rem;
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.28);
  color: #92400e;
  font-size: 0.74rem;
  line-height: 1.35;
}
.radar-rd-card canvas,
#radar-rd-map,
#radar-range-fft,
#radar-doppler-fft {
  display: block;
  width: 100%;
  height: 160px;
  border-radius: 0.45rem;
  background: #0f172a;
}
@media (max-width: 980px) {
  .radar-scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radar-results-grid { grid-template-columns: 1fr; }
  .radar-fft-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .radar-scene-head { flex-direction: column; }
  .radar-scene-grid { grid-template-columns: 1fr; }
}
html[data-theme="dark"] .radar-scene-card,
html:not([data-theme="light"]) .radar-scene-card {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(129, 140, 248, 0.45);
}
html[data-theme="dark"] .radar-scene-head h4,
html:not([data-theme="light"]) .radar-scene-head h4 { color: #e0e7ff; }
html[data-theme="dark"] .radar-scene-head p,
html:not([data-theme="light"]) .radar-scene-head p,
html[data-theme="dark"] .radar-field,
html:not([data-theme="light"]) .radar-field { color: #cbd5e1; }
html[data-theme="dark"] .radar-hint,
html:not([data-theme="light"]) .radar-hint {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.24);
  color: #fde68a;
}
html[data-theme="dark"] .radar-field input,
html[data-theme="dark"] .radar-field select,
html:not([data-theme="light"]) .radar-field input,
html:not([data-theme="light"]) .radar-field select {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}


/* v9 stable: keep v3 layout, only small usability fixes */
.antenna-type-in-array { min-width: 160px; }
#observation-info > .w-full { padding-left: 0; padding-right: 0; margin-bottom: 1rem; }
#observation-info h3[data-lang="observation-point"] { margin-top: 0; }
#receive-doa-panel .radar-scene-card { clear: both; }
#receive-doa-panel .doa-controls-grid { margin-bottom: .75rem; }
#radar-scene-card .radar-field select, #radar-scene-card .radar-field input { max-width: 100%; }

/* v10 clean control layout: keep the v3 look but make controls readable */
.compact-number-input {
  width: 4.7rem !important;
  min-width: 4.7rem;
  text-align: right;
}
.angle-hidden-value { display: none !important; }

/* Antenna editor header: text first, controls in a clean two-column grid */
.geometry-editor-head {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.25fr) minmax(190px, 0.75fr) minmax(220px, 0.9fr);
  gap: 0.85rem !important;
  align-items: end !important;
}
.geometry-editor-head > div:first-child {
  min-width: 0;
}
.array-source-compact {
  align-items: stretch !important;
  min-width: 0 !important;
  gap: 0.28rem !important;
}
.array-source-compact label {
  line-height: 1.15;
}
.array-source-compact select {
  width: 100% !important;
  min-width: 0 !important;
}
.array-mode-pill {
  width: max-content;
  max-width: 100%;
  white-space: normal;
  line-height: 1.15;
}

/* Every array slider has a direct number field. Spacing should be compact; Chebyshev gets more room. */
.array-size-row .slider-container,
.array-spacing-taper-row .slider-container {
  display: grid !important;
  grid-template-columns: max-content minmax(70px, 1fr) auto auto !important;
  gap: 0.45rem !important;
  align-items: center !important;
}
.array-size-row .slider-container label,
.array-spacing-taper-row .slider-container label {
  width: auto !important;
  margin-right: 0 !important;
}
.array-spacing-taper-row {
  grid-template-columns: minmax(170px, 0.72fr) minmax(170px, 0.72fr) minmax(300px, 1.35fr) !important;
}
.array-spacing-taper-row .spacing-slider input[type="range"] {
  max-width: 140px;
}
.array-spacing-taper-row #chebyshev-sidelobe-slider input[type="range"] {
  min-width: 180px;
}
.array-spacing-taper-row .taper-select-control {
  grid-template-columns: max-content minmax(110px, 1fr) !important;
}

/* Noise and LUT belong together; target az/el stays together above them. */
.doa-noise-lut-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.doa-slider-line {
  grid-template-columns: minmax(150px, 1fr) 4.7rem auto !important;
}

/* Coupling card: value next to slider, help text below instead of cramped on the side. */
.coupling-card {
  max-width: 100%;
}
.coupling-slider-line {
  grid-template-columns: minmax(150px, 1fr) 4.7rem auto auto !important;
  gap: 0.45rem !important;
}
.coupling-help {
  display: block;
  max-width: 34rem;
  line-height: 1.35;
}

@media (max-width: 980px) {
  .geometry-editor-head,
  .array-spacing-taper-row,
  .doa-noise-lut-pair {
    grid-template-columns: 1fr !important;
  }
  .array-spacing-taper-row .spacing-slider input[type="range"],
  .array-spacing-taper-row #chebyshev-sidelobe-slider input[type="range"] {
    max-width: none;
    min-width: 0;
  }
}

/* v12: consistent two-column control grids without changing the v3 visual structure */
:root {
  --control-label-min: 8.5rem;
}

/* General: all slider rows use the same proportions: label | slider | number | unit */
.slider-container {
  min-width: 0;
}
.slider-container:not(.distance-slider-container):not(.coupling-slider-container):not(.doa-slider-card) {
  display: grid !important;
  grid-template-columns: minmax(var(--control-label-min), max-content) minmax(130px, 1fr) 4.7rem auto !important;
  gap: 0.5rem !important;
  align-items: center !important;
}
.slider-container:not(.distance-slider-container):not(.coupling-slider-container):not(.doa-slider-card) > label {
  width: auto !important;
  margin: 0 !important;
  white-space: normal;
}
.slider-container:not(.distance-slider-container):not(.coupling-slider-container):not(.doa-slider-card) input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
}

/* Steering block: azimuth and elevation read as one pair. */
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .slider-container:not(.distance-slider-container) {
  max-width: none;
}
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > h3,
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .flex,
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .distance-slider-container {
  grid-column: 1 / -1;
}
.distance-slider-row {
  display: grid !important;
  grid-template-columns: minmax(var(--control-label-min), max-content) minmax(130px, 1fr) 4.7rem auto !important;
  gap: 0.5rem !important;
  align-items: center !important;
}
.distance-slider-row label { width: auto !important; margin: 0 !important; }
.distance-slider-row input[type="range"] { width: 100% !important; min-width: 0 !important; }

/* DOA/target controls: always two controls per row on desktop, equal slider sizes. */
.doa-control-pair,
.doa-noise-lut-pair {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
}
.doa-slider-line {
  display: grid !important;
  grid-template-columns: minmax(130px, 1fr) 4.7rem auto !important;
  gap: 0.5rem !important;
  align-items: center !important;
}
.doa-slider-line input[type="range"] { width: 100% !important; min-width: 0 !important; }

/* Radar scene grid: stable 2-column form, not 5 tiny columns. */
.radar-scene-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
}
.radar-field {
  min-width: 0;
}
.radar-field input,
.radar-field select {
  min-height: 2.25rem;
}
.radar-checkbox-field {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.25rem;
}
.radar-checkbox-field input[type="checkbox"] {
  justify-self: end;
}

/* Motion settings: visible but inactive until a motion mode is chosen. */
.radar-motion-field {
  opacity: 0.45;
  filter: grayscale(0.25);
  position: relative;
}
.radar-motion-field input:disabled {
  cursor: not-allowed;
}
#radar-scene-card.motion-disabled .radar-motion-field:first-of-type::after {
  content: "Choose a motion mode to enable these fields.";
  display: block;
  font-size: 0.7rem;
  color: #64748b;
  margin-top: 0.25rem;
  font-weight: 500;
}
#radar-scene-card.motion-enabled .radar-motion-field {
  opacity: 1;
  filter: none;
}
html[data-theme="dark"] #radar-scene-card.motion-disabled .radar-motion-field:first-of-type::after,
html:not([data-theme="light"]) #radar-scene-card.motion-disabled .radar-motion-field:first-of-type::after {
  color: var(--lt-muted) !important;
}

/* Antenna header: title full width, then dropdowns in a clean two-column grid. */
.geometry-editor-head {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: end !important;
}
.geometry-editor-head > div:first-child {
  grid-column: 1 / -1;
}
.array-source-compact {
  align-items: stretch !important;
}
.array-source-compact label {
  min-height: 1rem;
}
.array-source-compact select {
  min-height: 2.25rem;
}
.array-mode-pill {
  margin-top: 0.25rem;
}

/* Antenna array controls: two columns, consistent slider widths. */
.array-size-row,
.array-spacing-taper-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: center !important;
}
.array-spacing-taper-row #chebyshev-sidelobe-slider {
  grid-column: 1 / -1;
}
.array-size-row .slider-container,
.array-spacing-taper-row .slider-container {
  grid-template-columns: minmax(var(--control-label-min), max-content) minmax(130px, 1fr) 4.7rem auto !important;
}
.array-spacing-taper-row .spacing-slider input[type="range"],
.array-spacing-taper-row #chebyshev-sidelobe-slider input[type="range"] {
  max-width: none !important;
  min-width: 0 !important;
}
.array-spacing-taper-row .taper-select-control {
  display: grid !important;
  grid-template-columns: minmax(var(--control-label-min), max-content) minmax(0, 1fr) !important;
  gap: 0.5rem !important;
  align-items: center !important;
}
.array-spacing-taper-row .taper-select-control select {
  min-height: 2.25rem;
}

/* Observation point: azimuth/elevation side-by-side with matching control geometry. */
.observation-slider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.observation-slider-grid .slider-container {
  grid-template-columns: minmax(var(--control-label-min), max-content) minmax(120px, 1fr) 4.7rem auto !important;
}

/* Keep mathematical foundation equations readable; d_cand is a candidate direction. */
.mini-math mjx-container {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

@media (max-width: 980px) {
  .controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4,
  .doa-control-pair,
  .doa-noise-lut-pair,
  .radar-scene-grid,
  .geometry-editor-head,
  .array-size-row,
  .array-spacing-taper-row,
  .observation-slider-grid {
    grid-template-columns: 1fr !important;
  }
  .array-spacing-taper-row #chebyshev-sidelobe-slider {
    grid-column: auto;
  }
}
@media (max-width: 640px) {
  .slider-container:not(.distance-slider-container):not(.coupling-slider-container):not(.doa-slider-card),
  .distance-slider-row,
  .array-size-row .slider-container,
  .array-spacing-taper-row .slider-container,
  .observation-slider-grid .slider-container {
    grid-template-columns: 1fr !important;
  }
}

/* v13 / v14: proper equal control grid, no uneven slider widths */
:root { --pas-control-label: 9.25rem; --pas-number-width: 4.8rem; }

/* Antenna vector editor: title/description on top, two clean dropdown cards below */
.geometry-editor-head {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
}
.geometry-editor-head > div:first-child {
  grid-column: 1 / -1 !important;
  max-width: 68rem;
}
.array-field-card {
  display: grid !important;
  grid-template-rows: auto auto;
  gap: 0.35rem !important;
  padding: 0.62rem 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.7rem;
  background: rgba(255,255,255,0.58);
}
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.25rem;
}
.field-label-row label { margin: 0 !important; }
.geometry-editor-head .array-source-compact select {
  min-height: 2.25rem;
  width: 100% !important;
}
.geometry-editor-head .array-mode-pill {
  margin: 0 !important;
  flex: 0 1 auto;
  white-space: nowrap;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Array controls: every item sits in the same two-column grid and every slider has the same length. */
.array-config-controls { gap: 0.75rem !important; }
.array-size-row,
.array-spacing-taper-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
}
.array-size-row .slider-container,
.array-spacing-taper-row .slider-container,
.array-spacing-taper-row .taper-select-control {
  display: grid !important;
  grid-template-columns: minmax(var(--pas-control-label), 0.95fr) minmax(160px, 1.55fr) var(--pas-number-width) auto !important;
  gap: 0.5rem !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0.6rem 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.7rem;
  background: rgba(255,255,255,0.48);
}
.array-size-row .slider-container label,
.array-spacing-taper-row .slider-container label,
.array-spacing-taper-row .taper-select-control > span {
  width: auto !important;
  margin: 0 !important;
  white-space: normal;
  line-height: 1.15;
}
.array-size-row .slider-container input[type="range"],
.array-spacing-taper-row .slider-container input[type="range"],
.array-spacing-taper-row .spacing-slider input[type="range"],
.array-spacing-taper-row #chebyshev-sidelobe-slider input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}
.array-size-row .compact-number-input,
.array-spacing-taper-row .compact-number-input {
  width: var(--pas-number-width) !important;
  min-width: var(--pas-number-width) !important;
}
.array-spacing-taper-row #chebyshev-sidelobe-slider { grid-column: auto !important; }
.array-spacing-taper-row .taper-select-control {
  grid-template-columns: minmax(var(--pas-control-label), 0.95fr) minmax(160px, 1.55fr) var(--pas-number-width) auto !important;
}
.array-spacing-taper-row .taper-select-control select {
  grid-column: 2 / 5;
  width: 100% !important;
  min-height: 2.25rem;
}
.taper-note {
  margin-top: 0 !important;
  line-height: 1.45;
}

/* DOA and observation controls: always neat two-column grid, same slider proportions. */
.doa-control-pair,
.doa-noise-lut-pair,
.observation-slider-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
}
.doa-slider-line,
.observation-slider-grid .slider-container {
  grid-template-columns: minmax(160px, 1fr) var(--pas-number-width) auto !important;
  gap: 0.5rem !important;
}
.doa-slider-line input[type="range"],
.observation-slider-grid .slider-container input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
}

/* FMCW target fields: four equal columns on desktop, two on medium, one on mobile. */
.radar-scene-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
}
.radar-field {
  display: grid !important;
  grid-template-rows: auto auto;
  gap: 0.32rem !important;
  min-width: 0 !important;
  padding: 0.6rem 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.7rem;
  background: rgba(255,255,255,0.46);
}
.radar-field > span:first-child {
  min-height: 2.05em;
  line-height: 1.15;
  display: flex;
  align-items: flex-end;
}
.radar-field input,
.radar-field select {
  min-height: 2.25rem !important;
  width: 100% !important;
}
.radar-checkbox-field {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
}
.radar-checkbox-field > span:first-child { min-height: 0; align-items: center; }
.radar-motion-field { transition: opacity .15s ease, filter .15s ease; }
#radar-scene-card.motion-disabled .radar-motion-field input { pointer-events: none; }

/* Dark theme versions of the new cards */
html[data-theme="dark"] .array-field-card,
html[data-theme="dark"] .array-size-row .slider-container,
html[data-theme="dark"] .array-spacing-taper-row .slider-container,
html[data-theme="dark"] .array-spacing-taper-row .taper-select-control,
html[data-theme="dark"] .radar-field,
html:not([data-theme="light"]) .array-field-card,
html:not([data-theme="light"]) .array-size-row .slider-container,
html:not([data-theme="light"]) .array-spacing-taper-row .slider-container,
html:not([data-theme="light"]) .array-spacing-taper-row .taper-select-control,
html:not([data-theme="light"]) .radar-field {
  background: rgba(15, 23, 42, 0.36) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

@media (max-width: 1180px) {
  .radar-scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 980px) {
  .geometry-editor-head,
  .array-size-row,
  .array-spacing-taper-row,
  .doa-control-pair,
  .doa-noise-lut-pair,
  .observation-slider-grid { grid-template-columns: 1fr !important; }
  .geometry-editor-head > div:first-child { grid-column: auto !important; }
}
@media (max-width: 700px) {
  .radar-scene-grid { grid-template-columns: 1fr !important; }
  .array-size-row .slider-container,
  .array-spacing-taper-row .slider-container,
  .array-spacing-taper-row .taper-select-control {
    grid-template-columns: 1fr !important;
  }
  .array-spacing-taper-row .taper-select-control select { grid-column: auto; }
  .geometry-editor-head .array-mode-pill { max-width: 100%; white-space: normal; }
}

/* v14: real card/grid control layout without changing the v3 page structure */
:root { --control-card-bg: rgba(15, 23, 42, 0.035); --control-card-border: rgba(148, 163, 184, 0.28); }

/* Visualization dropdowns: one clean grid instead of staggered rows. */
.visual-select-block {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
}
.visual-select-row { display: contents !important; }
.visual-select-control,
.array-field-card,
.radar-field,
.doa-slider-card,
.array-config-controls .slider-container,
.array-spacing-taper-row .taper-select-control {
  background: var(--control-card-bg);
  border: 1px solid var(--control-card-border);
  border-radius: 0.75rem;
  padding: 0.65rem 0.75rem;
}
.visual-select-control label,
.array-field-card label,
.radar-field span:first-child,
.doa-slider-card label,
.array-config-controls .slider-container label,
.array-spacing-taper-row .taper-select-control span:first-child {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--lt-muted, #64748b) !important;
  margin-bottom: 0.25rem !important;
}
.visual-select-control select,
.array-field-card select,
.radar-field input,
.radar-field select,
.array-spacing-taper-row .taper-select-control select {
  width: 100% !important;
}

/* Steering card: 2-column grid for az/el, full-width distance and note. */
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  padding: 0 !important;
}
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > h3,
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .flex,
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .distance-slider-container {
  grid-column: 1 / -1 !important;
}
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .slider-container:not(.distance-slider-container),
.distance-slider-container {
  background: var(--control-card-bg);
  border: 1px solid var(--control-card-border);
  border-radius: 0.75rem;
  padding: 0.65rem 0.75rem;
  margin: 0 !important;
}
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .slider-container:not(.distance-slider-container),
.distance-slider-row {
  display: grid !important;
  grid-template-columns: minmax(7rem, max-content) minmax(120px, 1fr) 4.7rem auto !important;
  gap: 0.5rem !important;
  align-items: center !important;
}
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .slider-container:not(.distance-slider-container) label,
.distance-slider-row label {
  width: auto !important;
  margin: 0 !important;
}

/* Visualization toggles, coupling and field model in a proper grid. */
.controls > .mt-4.flex.flex-wrap.justify-between.items-center {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
  margin-top: 0.75rem !important;
}
.controls > .mt-4.flex.flex-wrap.justify-between.items-center > .flex.items-center,
.controls > .mt-4.flex.flex-wrap.justify-between.items-center > .flex.items-center.mb-2 {
  margin: 0 !important;
  background: var(--control-card-bg);
  border: 1px solid var(--control-card-border);
  border-radius: 0.75rem;
  padding: 0.65rem 0.75rem;
  justify-content: space-between !important;
  min-height: 3rem;
}
.controls > .mt-4.flex.flex-wrap.justify-between.items-center > .coupling-card {
  grid-column: span 2 !important;
  margin: 0 !important;
}
.controls > .mt-4.flex.flex-wrap.justify-between.items-center > .flex.items-center.mb-2:last-child,
.controls > .mt-4.flex.flex-wrap.justify-between.items-center > div:has(#calculation-method) {
  grid-column: span 2 !important;
}
.controls > .mt-4.flex.flex-wrap.justify-between.items-center select#calculation-method {
  width: 100% !important;
  min-height: 2.25rem;
}
#subpatch-density-slider {
  background: var(--control-card-bg);
  border: 1px solid var(--control-card-border);
  border-radius: 0.75rem;
  padding: 0.65rem 0.75rem;
  margin-top: 0.75rem !important;
  max-width: none !important;
}
#subpatch-density-slider input[type="range"] { width: 100% !important; }

/* Antenna preset/header: text full width, then equal dropdown cards. */
.geometry-editor-head {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
}
.geometry-editor-head > div:first-child {
  grid-column: 1 / -1 !important;
  margin-bottom: 0 !important;
}
.array-field-card { min-width: 0 !important; }
.array-field-card .field-label-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  margin-bottom: 0.25rem !important;
}
.array-mode-pill { white-space: nowrap; margin: 0 !important; }

/* Antenna controls: equal cards, but spacing range itself intentionally compact. */
.array-config-controls { display: grid !important; gap: 0.75rem !important; }
.array-size-row,
.array-spacing-taper-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
}
.array-config-controls .slider-container,
.array-spacing-taper-row .taper-select-control {
  display: grid !important;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr) 4.7rem auto !important;
  gap: 0.5rem !important;
  align-items: center !important;
  margin: 0 !important;
}
.array-spacing-taper-row .taper-select-control {
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr) !important;
}
.array-config-controls .slider-container input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
}
.array-spacing-taper-row .spacing-slider input[type="range"] {
  width: 8rem !important;
  max-width: 8rem !important;
  justify-self: start !important;
}
.array-spacing-taper-row #chebyshev-sidelobe-slider input[type="range"] {
  width: 100% !important;
  max-width: none !important;
}
.array-spacing-taper-row #chebyshev-sidelobe-slider {
  grid-column: auto !important;
}

/* Radar form: keep the compact 4-column desktop grid requested earlier. */
.radar-scene-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
}
.radar-checkbox-field {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

/* Observation point: az/el as equal grid cards. */
.observation-slider-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
}
.observation-slider-grid .slider-container {
  background: var(--control-card-bg);
  border: 1px solid var(--control-card-border);
  border-radius: 0.75rem;
  padding: 0.65rem 0.75rem;
  margin: 0 !important;
}

html[data-theme="dark"] .visual-select-control,
html[data-theme="dark"] .array-field-card,
html[data-theme="dark"] .radar-field,
html[data-theme="dark"] .doa-slider-card,
html[data-theme="dark"] .array-config-controls .slider-container,
html[data-theme="dark"] .array-spacing-taper-row .taper-select-control,
html[data-theme="dark"] .controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .slider-container:not(.distance-slider-container),
html[data-theme="dark"] .distance-slider-container,
html[data-theme="dark"] .controls > .mt-4.flex.flex-wrap.justify-between.items-center > .flex.items-center,
html[data-theme="dark"] #subpatch-density-slider,
html[data-theme="dark"] .observation-slider-grid .slider-container,
html:not([data-theme="light"]) .visual-select-control,
html:not([data-theme="light"]) .array-field-card,
html:not([data-theme="light"]) .radar-field,
html:not([data-theme="light"]) .doa-slider-card,
html:not([data-theme="light"]) .array-config-controls .slider-container,
html:not([data-theme="light"]) .array-spacing-taper-row .taper-select-control,
html:not([data-theme="light"]) .controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .slider-container:not(.distance-slider-container),
html:not([data-theme="light"]) .distance-slider-container,
html:not([data-theme="light"]) .controls > .mt-4.flex.flex-wrap.justify-between.items-center > .flex.items-center,
html:not([data-theme="light"]) #subpatch-density-slider,
html:not([data-theme="light"]) .observation-slider-grid .slider-container {
  background: rgba(15, 23, 42, 0.35) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

@media (max-width: 1180px) {
  .visual-select-block,
  .controls > .mt-4.flex.flex-wrap.justify-between.items-center,
  .radar-scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  .visual-select-block,
  .controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4,
  .controls > .mt-4.flex.flex-wrap.justify-between.items-center,
  .geometry-editor-head,
  .array-size-row,
  .array-spacing-taper-row,
  .radar-scene-grid,
  .observation-slider-grid { grid-template-columns: 1fr !important; }
  .controls > .mt-4.flex.flex-wrap.justify-between.items-center > .coupling-card,
  .controls > .mt-4.flex.flex-wrap.justify-between.items-center > div:has(#calculation-method) { grid-column: auto !important; }
  .array-spacing-taper-row .spacing-slider input[type="range"] { width: 100% !important; max-width: none !important; }
}


/* v15: final clean grid polish requested by user */
/* Better names for toggles are handled via data-lang. Keep all toggle cards compact and equal. */
.controls > .mt-4.flex.flex-wrap.justify-between.items-center {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.controls > .mt-4.flex.flex-wrap.justify-between.items-center > .coupling-card {
  grid-column: 1 / -1 !important;
}
.coupling-card {
  display: grid !important;
  grid-template-columns: minmax(10rem, 0.35fr) minmax(0, 1fr) !important;
  gap: 0.65rem 0.9rem !important;
  align-items: center !important;
}
.coupling-enable-row {
  margin: 0 !important;
  align-self: start !important;
  padding-top: 0.35rem;
}
.coupling-slider-container {
  display: grid !important;
  grid-template-columns: minmax(8rem, max-content) minmax(10rem, 1fr) 4.7rem auto !important;
  gap: 0.5rem !important;
  align-items: center !important;
  margin: 0 !important;
}
.coupling-slider-container > label {
  margin: 0 !important;
  min-width: 0 !important;
  white-space: normal;
}
.coupling-slider-line {
  display: contents !important;
}
.coupling-help {
  grid-column: 1 / -1 !important;
  margin: 0.1rem 0 0 !important;
  max-width: none !important;
  line-height: 1.35 !important;
}

/* Field model and subpatch should look like normal grid cards, not squeezed beside coupling text. */
.controls > .mt-4.flex.flex-wrap.justify-between.items-center > div:has(#calculation-method) {
  grid-column: span 2 !important;
}
#subpatch-density-slider {
  display: grid !important;
  grid-template-columns: minmax(9rem, max-content) minmax(12rem, 1fr) 4.7rem auto !important;
  gap: 0.5rem !important;
  align-items: center !important;
}
#subpatch-density-slider label { margin: 0 !important; }

/* Antenna vector header: less vertical space, still readable. */
.geometry-editor-head {
  grid-template-columns: minmax(240px, 1.2fr) minmax(170px, 0.7fr) minmax(220px, 0.9fr) !important;
  align-items: stretch !important;
}
.geometry-editor-head > div:first-child {
  grid-column: auto !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.array-field-card { padding: 0.55rem 0.65rem !important; }
.geometry-editor-head .array-mode-pill {
  max-width: 100% !important;
  white-space: nowrap !important;
}

/* Antenna control cards: spacing slider intentionally shorter; other sliders keep the same full card geometry. */
.array-size-row,
.array-spacing-taper-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.array-spacing-taper-row .spacing-slider {
  grid-template-columns: minmax(7rem, max-content) 8rem 4.7rem auto !important;
}
.array-spacing-taper-row .spacing-slider input[type="range"] {
  width: 8rem !important;
  max-width: 8rem !important;
  justify-self: start !important;
}
.array-spacing-taper-row #chebyshev-sidelobe-slider input[type="range"],
.array-size-row .slider-container input[type="range"] {
  width: 100% !important;
  max-width: none !important;
}

/* Compact phase table instead of a long bullet list. */
.phase-shift-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.025);
}
.phase-shift-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.phase-shift-table th,
.phase-shift-table td {
  padding: 0.38rem 0.5rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  text-align: right;
  white-space: nowrap;
}
.phase-shift-table th:first-child,
.phase-shift-table td:first-child { text-align: left; }
.phase-shift-table th {
  font-weight: 700;
  color: var(--lt-muted, #64748b);
  background: rgba(148, 163, 184, 0.10);
}
.phase-shift-table tr:last-child td { border-bottom: none; }
html[data-theme="dark"] .phase-shift-table-wrap,
html:not([data-theme="light"]) .phase-shift-table-wrap {
  background: rgba(15, 23, 42, 0.35) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

@media (max-width: 1180px) {
  .geometry-editor-head { grid-template-columns: 1fr 1fr !important; }
  .geometry-editor-head > div:first-child { grid-column: 1 / -1 !important; }
  .coupling-card { grid-template-columns: 1fr !important; }
  .coupling-slider-container { grid-template-columns: 1fr !important; }
  .coupling-slider-line { display: grid !important; grid-template-columns: minmax(10rem, 1fr) 4.7rem auto !important; }
}
@media (max-width: 760px) {
  .geometry-editor-head,
  .controls > .mt-4.flex.flex-wrap.justify-between.items-center,
  .array-size-row,
  .array-spacing-taper-row { grid-template-columns: 1fr !important; }
  .array-spacing-taper-row .spacing-slider,
  #subpatch-density-slider { grid-template-columns: 1fr !important; }
  .array-spacing-taper-row .spacing-slider input[type="range"] { width: 100% !important; max-width: none !important; }
}


/* v16 polish: keep control cards full-width and stop coupling/help text from being squeezed. */
.controls > .mt-4.flex.flex-wrap.justify-between.items-center {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
.controls > .mt-4.flex.flex-wrap.justify-between.items-center > .flex.items-center:not(.field-model-card) {
  margin: 0 !important;
  width: 100% !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 0.75rem;
  padding: 0.55rem 0.65rem;
  background: rgba(15, 23, 42, 0.03);
}
.coupling-card {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.coupling-slider-line {
  grid-template-columns: minmax(180px, 1fr) 4.7rem auto auto !important;
  align-items: center !important;
}
.coupling-help {
  display: block !important;
  width: 100% !important;
  max-width: 70ch !important;
  margin-top: 0.55rem !important;
  line-height: 1.45 !important;
  white-space: normal !important;
}
.field-model-card {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(var(--control-label-min), max-content) minmax(220px, 1fr) !important;
  gap: 0.55rem !important;
  align-items: center !important;
  margin: 0 !important;
  width: 100% !important;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 0.85rem;
  padding: 0.65rem 0.75rem;
  background: rgba(15, 23, 42, 0.03);
}
.field-model-card select {
  width: 100% !important;
  min-height: 2.25rem;
}
.field-model-note {
  grid-column: 1 / -1 !important;
  margin-top: 0.15rem !important;
  line-height: 1.45 !important;
}

/* Distance slider: same visual width as steering azimuth/elevation controls. */
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .distance-slider-container {
  grid-column: auto !important;
  width: 100% !important;
  margin-top: 0 !important;
}
.distance-slider-container {
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 0.85rem;
  padding: 0.65rem 0.75rem;
  background: rgba(15, 23, 42, 0.03);
}
.distance-slider-row {
  grid-template-columns: minmax(var(--control-label-min), max-content) minmax(130px, 1fr) 4.7rem auto !important;
}
.distance-huygens-note,
.distance-slider-container [data-lang="steering-target-link-note"] {
  grid-column: 1 / -1;
  line-height: 1.45;
}

/* Subpatch density sits as a normal full-width control below the field model block. */
#subpatch-density-slider {
  width: 100% !important;
}

html[data-theme="dark"] .controls > .mt-4.flex.flex-wrap.justify-between.items-center > .flex.items-center:not(.field-model-card),
html[data-theme="dark"] .field-model-card,
html[data-theme="dark"] .distance-slider-container,
html:not([data-theme="light"]) .controls > .mt-4.flex.flex-wrap.justify-between.items-center > .flex.items-center:not(.field-model-card),
html:not([data-theme="light"]) .field-model-card,
html:not([data-theme="light"]) .distance-slider-container {
  background: rgba(255,255,255,0.035) !important;
  border-color: var(--lt-border) !important;
}

@media (max-width: 980px) {
  .controls > .mt-4.flex.flex-wrap.justify-between.items-center,
  .field-model-card {
    grid-template-columns: 1fr !important;
  }
  .coupling-slider-line {
    grid-template-columns: minmax(0, 1fr) 4.7rem auto !important;
  }
}


/* v17: final control polish requested by user
   - Distance slider uses the same internal proportions as azimuth/elevation.
   - Spacing slider is intentionally shorter, with the numeric input directly beside it.
   - Phase table is compact and vertically scrollable like the coordinate editor.
   - Preset regenerate button removed in HTML; these rules keep remaining buttons aligned.
*/
:root {
  --pas-v17-label: 9.25rem;
  --pas-v17-number: 4.8rem;
  --pas-v17-unit: 1.6rem;
}

/* Make the steering block a strict two-column grid: az/el/distance all occupy equal cells. */
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
}
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > h3,
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .flex.items-center {
  grid-column: 1 / -1 !important;
}
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .slider-container:not(.distance-slider-container),
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .distance-slider-container {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(var(--pas-v17-label), 0.9fr) minmax(0, 1.45fr) var(--pas-v17-number) var(--pas-v17-unit) !important;
  gap: 0.5rem !important;
  align-items: center !important;
}
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .slider-container:not(.distance-slider-container) > label,
.distance-slider-row > label {
  width: auto !important;
  margin: 0 !important;
  white-space: normal !important;
  line-height: 1.15 !important;
}
.controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .slider-container:not(.distance-slider-container) input[type="range"],
.distance-slider-row input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}
.distance-slider-container {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.distance-slider-row {
  display: contents !important;
}
.distance-huygens-note,
.distance-slider-container [data-lang="steering-target-link-note"] {
  grid-column: 1 / -1 !important;
  margin: 0.35rem 0 0 !important;
}

/* Array section: regular, readable grid. Surface sliders and Chebyshev are full length;
   spacing is shorter but still has number + unit directly beside the slider. */
.array-size-row,
.array-spacing-taper-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
}
.array-size-row .slider-container,
.array-spacing-taper-row .slider-container,
.array-spacing-taper-row .taper-select-control {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0.6rem 0.65rem !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 0.7rem !important;
  background: rgba(255,255,255,0.48) !important;
}
.array-size-row .slider-container,
.array-spacing-taper-row #chebyshev-sidelobe-slider {
  display: grid !important;
  grid-template-columns: minmax(var(--pas-v17-label), 0.95fr) minmax(0, 1.55fr) var(--pas-v17-number) auto !important;
  gap: 0.5rem !important;
  align-items: center !important;
}
.array-spacing-taper-row .spacing-slider {
  display: grid !important;
  grid-template-columns: minmax(var(--pas-v17-label), 0.95fr) 8.5rem var(--pas-v17-number) auto !important;
  gap: 0.5rem !important;
  align-items: center !important;
}
.array-size-row .slider-container label,
.array-spacing-taper-row .slider-container label,
.array-spacing-taper-row .taper-select-control > span {
  width: auto !important;
  margin: 0 !important;
  white-space: normal !important;
  line-height: 1.15 !important;
}
.array-size-row .slider-container input[type="range"],
.array-spacing-taper-row #chebyshev-sidelobe-slider input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}
.array-spacing-taper-row .spacing-slider input[type="range"] {
  width: 8.5rem !important;
  min-width: 8.5rem !important;
  max-width: 8.5rem !important;
  justify-self: start !important;
}
.array-size-row .compact-number-input,
.array-spacing-taper-row .compact-number-input {
  width: var(--pas-v17-number) !important;
  min-width: var(--pas-v17-number) !important;
  justify-self: stretch !important;
}
.array-spacing-taper-row .taper-select-control {
  display: grid !important;
  grid-template-columns: minmax(var(--pas-v17-label), 0.95fr) minmax(0, 1.55fr) var(--pas-v17-number) auto !important;
  gap: 0.5rem !important;
  align-items: center !important;
}
.array-spacing-taper-row .taper-select-control select {
  grid-column: 2 / 5 !important;
  width: 100% !important;
  min-height: 2.25rem !important;
}

/* Action row after coordinate editor: only the useful apply button remains. */
#custom-coordinate-panel .flex.flex-wrap.gap-2.items-center.mt-3 {
  justify-content: flex-start !important;
}

/* Compact, scrollable phase table. */
.phase-shift-table-wrap {
  max-height: 13.5rem !important;
  overflow: auto !important;
  border-radius: 0.7rem !important;
}
.phase-shift-table {
  font-size: 0.72rem !important;
  min-width: 34rem !important;
}
.phase-shift-table th,
.phase-shift-table td {
  padding: 0.24rem 0.38rem !important;
  line-height: 1.15 !important;
}
.phase-shift-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

html[data-theme="dark"] .array-size-row .slider-container,
html[data-theme="dark"] .array-spacing-taper-row .slider-container,
html[data-theme="dark"] .array-spacing-taper-row .taper-select-control,
html:not([data-theme="light"]) .array-size-row .slider-container,
html:not([data-theme="light"]) .array-spacing-taper-row .slider-container,
html:not([data-theme="light"]) .array-spacing-taper-row .taper-select-control {
  background: rgba(15, 23, 42, 0.36) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

@media (max-width: 980px) {
  .controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4,
  .array-size-row,
  .array-spacing-taper-row {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 700px) {
  .controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .slider-container:not(.distance-slider-container),
  .controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4 > .distance-slider-container,
  .array-size-row .slider-container,
  .array-spacing-taper-row .slider-container,
  .array-spacing-taper-row .spacing-slider,
  .array-spacing-taper-row #chebyshev-sidelobe-slider,
  .array-spacing-taper-row .taper-select-control {
    grid-template-columns: 1fr !important;
  }
  .distance-slider-row { display: grid !important; grid-template-columns: 1fr !important; }
  .array-spacing-taper-row .spacing-slider input[type="range"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .array-spacing-taper-row .taper-select-control select { grid-column: auto !important; }
}

/* v18: second-monitor workflow + radar FFT plots in the live preview */
.slice-radar-panel {
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(148,163,184,.22);
}
.slice-radar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .55rem;
}
.slice-radar-head strong { color: #f8fafc; font-size: .86rem; }
.slice-radar-head span { color: #9ca3af; font-size: .72rem; }
.slice-radar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}
.radar-slice-card canvas {
  display: block;
  width: 100%;
  height: auto;
  min-height: 108px;
  border-radius: 10px;
  background: #0f172a;
}
@media (max-width: 1500px) {
  .slice-radar-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1501px) and (max-width: 1900px) {
  .slice-radar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.restore-main-preview-btn {
  position: fixed;
  z-index: 1000;
  left: 14px;
  bottom: 14px;
  padding: .78rem 1rem;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 999px;
  background: rgba(37,99,235,.96);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 18px 34px rgba(15,23,42,.35);
}
body:not(.plot-popout-mode).main-preview-hidden .canvas-section {
  display: none !important;
}
@media (min-width: 1100px) {
  body:not(.plot-popout-mode).main-preview-hidden .grid-container {
    display: block !important;
  }
  body:not(.plot-popout-mode).main-preview-hidden .controls-and-info,
  body:not(.plot-popout-mode).main-preview-hidden .explanations {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

body.plot-popout-mode .slice-radar-panel {
  display: block !important;
}
body.plot-popout-mode .slice-radar-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.plot-popout-mode .radar-slice-card canvas {
  min-height: 130px;
}
@media (max-width: 1100px) {
  body.plot-popout-mode .slice-radar-grid { grid-template-columns: 1fr; }
}

/* v19: spacing/motion/geometry-size polish */
/* Fix spacing control: one compact row, no unit dropping under the field. */
.array-spacing-taper-row .spacing-slider {
  grid-template-columns: 5.2rem minmax(5.5rem, 8.5rem) 4.4rem 1.2rem !important;
  column-gap: 0.45rem !important;
  align-items: center !important;
}
.array-spacing-taper-row .spacing-slider label {
  white-space: nowrap !important;
  min-width: 0 !important;
}
.array-spacing-taper-row .spacing-slider input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 8.5rem !important;
}
.array-spacing-taper-row .spacing-slider .compact-number-input {
  width: 4.4rem !important;
  min-width: 4.4rem !important;
}
.array-spacing-taper-row .spacing-slider .angle-unit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Make disabled motion fields visibly inactive, but keep the selected-mode fields readable. */
.radar-motion-field.motion-field-disabled {
  opacity: 0.38 !important;
  filter: grayscale(0.35) !important;
}
.radar-motion-field.motion-field-disabled input {
  cursor: not-allowed !important;
}
#radar-scene-card.motion-enabled .radar-motion-field:not(.motion-field-disabled) {
  opacity: 1 !important;
  filter: none !important;
}
#radar-scene-card.motion-enabled .radar-motion-field.motion-field-disabled::after {
  content: "not used in this motion mode";
  display: block;
  font-size: 0.68rem;
  color: #64748b;
  margin-top: 0.2rem;
}
html[data-theme="dark"] #radar-scene-card.motion-enabled .radar-motion-field.motion-field-disabled::after,
html:not([data-theme="light"]) #radar-scene-card.motion-enabled .radar-motion-field.motion-field-disabled::after {
  color: var(--lt-muted) !important;
}

@media (max-width: 700px) {
  .array-spacing-taper-row .spacing-slider {
    grid-template-columns: 1fr !important;
  }
  .array-spacing-taper-row .spacing-slider input[type="range"],
  .array-spacing-taper-row .spacing-slider .compact-number-input {
    width: 100% !important;
    max-width: none !important;
  }
}

/* v20: one global antenna/radar frequency block and tighter spacing control. */
.system-frequency-card {
  grid-column: 1 / -1;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.9rem;
  background: rgba(15, 23, 42, 0.035);
}
.system-frequency-head h3 {
  margin: 0 0 0.2rem;
  font-size: 0.98rem;
  font-weight: 700;
}
.system-frequency-head p {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  color: var(--muted-text, #64748b);
  line-height: 1.35;
}
.system-frequency-grid {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(115px, 0.65fr) minmax(115px, 0.65fr);
  gap: 0.75rem;
  align-items: stretch;
}
.system-frequency-readout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 3.85rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.7rem;
  background: rgba(15, 23, 42, 0.06);
}
.system-frequency-readout span {
  font-size: 0.72rem;
  color: var(--muted-text, #64748b);
}
.system-frequency-readout strong {
  font-size: 0.95rem;
  line-height: 1.15;
}
@media (max-width: 900px) {
  .system-frequency-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .system-frequency-grid { grid-template-columns: 1fr; }
}

/* v20: Spacing uses the same clean label | slider | number | unit layout, but compact. */
.array-spacing-taper-row .spacing-slider.slider-container {
  grid-template-columns: max-content minmax(95px, 130px) 4.1rem auto !important;
}
.array-spacing-taper-row .spacing-slider .angle-unit {
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
  margin-left: 0 !important;
}
.array-spacing-taper-row .spacing-slider input[type="range"] {
  width: 100% !important;
  max-width: 130px !important;
}
.array-spacing-taper-row .spacing-slider .compact-number-input {
  width: 4.1rem !important;
  min-width: 4.1rem !important;
}

/* v21: radar frequency belongs to radar settings; RCS auto estimate card. */
#radar-scene-card .system-frequency-card.radar-frequency-in-scene {
  margin-top: 0.85rem !important;
  margin-bottom: 0.85rem !important;
  width: 100%;
}
#radar-scene-card .system-frequency-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.radar-readout-field {
  justify-content: center;
}
.radar-readout-field strong {
  font-size: 1rem;
  color: var(--text-color, #e5e7eb);
  line-height: 1.2;
}
.radar-readout-field small {
  color: var(--muted-text, #94a3b8);
  line-height: 1.25;
  font-size: 0.72rem;
}
.radar-field input:disabled,
.radar-field select:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}
@media (max-width: 1100px) {
  #radar-scene-card .system-frequency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  #radar-scene-card .system-frequency-grid { grid-template-columns: 1fr; }
}

/* v22: final polish for compact Spacing and Subpatch Density rows.
   Both use one single horizontal row: label | slider | number | unit. */
.array-spacing-taper-row .spacing-slider.slider-container {
  display: grid !important;
  grid-template-columns: minmax(7.2rem, max-content) minmax(88px, 118px) 4.7rem auto !important;
  column-gap: 0.5rem !important;
  row-gap: 0 !important;
  align-items: center !important;
  justify-content: start !important;
  width: 100% !important;
  min-width: 0 !important;
}
.array-spacing-taper-row .spacing-slider.slider-container > label {
  grid-column: 1 !important;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.array-spacing-taper-row .spacing-slider.slider-container > input[type="range"] {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 88px !important;
  max-width: 118px !important;
  margin: 0 !important;
}
.array-spacing-taper-row .spacing-slider.slider-container > .compact-number-input,
.array-spacing-taper-row .spacing-slider.slider-container > #element-spacing-input {
  grid-column: 3 !important;
  width: 4.7rem !important;
  min-width: 4.7rem !important;
  margin: 0 !important;
  justify-self: stretch !important;
}
.array-spacing-taper-row .spacing-slider.slider-container > .angle-unit {
  grid-column: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

#subpatch-density-slider.slider-container {
  display: grid !important;
  grid-template-columns: minmax(9.5rem, max-content) minmax(130px, 1fr) 4.7rem auto !important;
  column-gap: 0.5rem !important;
  row-gap: 0 !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 32rem !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0 !important;
}
#subpatch-density-slider.slider-container > label {
  grid-column: 1 !important;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
#subpatch-density-slider.slider-container > input[type="range"] {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
#subpatch-density-slider.slider-container > #subpatch-density-input {
  grid-column: 3 !important;
  width: 4.7rem !important;
  min-width: 4.7rem !important;
  margin: 0 !important;
  justify-self: stretch !important;
}
#subpatch-density-slider.slider-container > .angle-unit {
  grid-column: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
#subpatch-density-slider .angle-hidden-value,
.array-spacing-taper-row .spacing-slider .angle-hidden-value {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

@media (max-width: 700px) {
  .array-spacing-taper-row .spacing-slider.slider-container,
  #subpatch-density-slider.slider-container {
    grid-template-columns: minmax(7rem, max-content) minmax(80px, 1fr) 4.7rem auto !important;
    max-width: none !important;
  }
}

/* v23: compact radar result cards, two cards per row, plots below */
.radar-results-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
}
.radar-results-wide {
  grid-column: 1 / -1 !important;
}
.radar-combined-card {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.65rem !important;
  align-items: stretch !important;
  min-width: 0 !important;
}
.radar-card-section {
  min-width: 0 !important;
}
.radar-card-divider {
  display: none !important;
}
.radar-combined-card .text-xs {
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .radar-results-grid { grid-template-columns: 1fr !important; }
  .radar-combined-card { grid-template-columns: 1fr !important; }
  .radar-card-divider {
    display: block !important;
    height: 1px;
    background: rgba(148, 163, 184, 0.22);
  }
}

/* v24: metric cards first, plots only below */
.radar-metric-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
}
.radar-metric-card {
  min-width: 0 !important;
  overflow: hidden !important;
}
.radar-metric-card .doa-big-value {
  line-height: 1.08 !important;
}
.radar-metric-card .text-xs {
  overflow-wrap: anywhere !important;
}
.radar-plot-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
}
.radar-plot-stack .radar-fft-grid {
  margin-top: 0 !important;
}
.radar-results-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 760px) {
  .radar-metric-grid { grid-template-columns: 1fr !important; }
}


/* v42: radar/DOA plots are stacked one per line and elevation gets its own cut plot. */
.radar-plot-stack .radar-fft-grid {
  grid-template-columns: 1fr !important;
}
.radar-plot-stack canvas,
#doa-az-cut,
#doa-el-cut {
  display: block;
  width: 100% !important;
}
#doa-el-cut {
  height: 150px;
  border-radius: 0.45rem;
  background: #0f172a;
}


/* v43: compact radar FFT layout + reduced memory pressure */
.slice-radar-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .42rem !important;
}
.slice-radar-panel { margin-top: .55rem !important; padding-top: .55rem !important; }
.radar-slice-card { padding: .42rem !important; }
.radar-slice-card .slice-card-head { gap: .25rem; font-size: .72rem; }
.radar-slice-card canvas { min-height: 86px !important; height: 92px !important; }
.radar-plot-stack { display: grid; gap: .55rem; }
.radar-fft-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .55rem !important;
}
.radar-rd-card canvas,
#radar-rd-map,
#radar-range-fft,
#radar-doppler-fft {
  height: 128px !important;
}
#doa-sample-map,
#doa-az-cut,
#doa-el-cut { height: 125px !important; }
@media (max-width: 760px) {
  .slice-radar-grid { grid-template-columns: 1fr !important; }
  .radar-fft-grid { grid-template-columns: 1fr !important; }
}
body.plot-popout-mode .slice-radar-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* v45: requested radar plot placement.
   - Detail radar/DOA plots in the controls area: always two columns when space allows.
   - Compact Radar FFT views next to the 3D workspace: one plot per row. */
.radar-detail-plot-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .55rem !important;
  align-items: stretch !important;
}
.radar-detail-plot-grid .doa-wide-card,
.radar-detail-plot-grid .radar-results-wide {
  grid-column: auto !important;
}
.radar-detail-plot-grid canvas {
  display: block !important;
  width: 100% !important;
}
.slice-radar-grid,
body.plot-popout-mode .slice-radar-grid {
  grid-template-columns: 1fr !important;
  gap: .42rem !important;
}
.slice-radar-panel .radar-slice-card canvas,
body.plot-popout-mode .radar-slice-card canvas {
  min-height: 86px !important;
  height: 92px !important;
}
@media (max-width: 760px) {
  .radar-detail-plot-grid { grid-template-columns: 1fr !important; }
}


/* v45: put all radar/DOA plots into the left visualization panel only.
   Controls on the right stay controls-only. Canvas backing stores are resized in JS,
   so CSS no longer stretches plot text or curves. */
#visual-workspace { scroll-margin-top: 1rem; }
.slice-radar-panel .slice-radar-grid { display: none !important; }
.slice-radar-panel .radar-plot-stack {
  margin-top: .5rem !important;
  display: block !important;
}
.slice-radar-panel .radar-detail-plot-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: .55rem !important;
}
.slice-radar-panel .doa-map-card,
.slice-radar-panel .radar-rd-card {
  min-width: 0 !important;
  overflow: hidden !important;
  padding: .48rem !important;
}
.slice-radar-panel .doa-map-card canvas,
.slice-radar-panel .radar-rd-card canvas,
.slice-radar-panel #radar-rd-map,
.slice-radar-panel #radar-range-fft,
.slice-radar-panel #radar-doppler-fft,
.slice-radar-panel #doa-correlation-map,
.slice-radar-panel #doa-sample-map,
.slice-radar-panel #doa-az-cut,
.slice-radar-panel #doa-el-cut {
  display: block !important;
  width: 100% !important;
  height: 150px !important;
  max-width: 100% !important;
  border-radius: .45rem;
  background: #0f172a;
  image-rendering: auto;
}
.slice-radar-panel #radar-rd-map,
.slice-radar-panel #doa-correlation-map { height: 175px !important; }
.slice-radar-panel .text-xs { line-height: 1.25 !important; }
@media (min-width: 1120px) {
  .slice-radar-panel .radar-detail-plot-grid.wide-left-plots {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* v49 stable rollback from v45: no JS scroll/theme rewrites. */
#visualization-settings-title { scroll-margin-top: 16px; }
@media (min-width: 760px) {
  .slice-radar-panel .radar-detail-plot-grid,
  .slice-radar-panel .radar-detail-plot-grid.wide-left-plots {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 759px) {
  .slice-radar-panel .radar-detail-plot-grid,
  .slice-radar-panel .radar-detail-plot-grid.wide-left-plots {
    grid-template-columns: 1fr !important;
  }
}


/* v6 mobile edge fixes: prevent horizontal overflow on phones/tablets. */
html, body { max-width: 100%; overflow-x: hidden !important; }
.container.mx-auto, .container.max-w-7xl { width: 100% !important; max-width: 100% !important; padding-left: clamp(10px, 3vw, 20px) !important; padding-right: clamp(10px, 3vw, 20px) !important; overflow-x: clip; }
.grid-container, .canvas-section, .controls-and-info, .controls, .explanations, .seo-hero, .seo-content, .workspace-details, .workspace-details-inner, .canvas-container, .slice-dashboard, .slice-card { min-width: 0 !important; max-width: 100% !important; }
img, svg, canvas, video, iframe, select, input, textarea, button { max-width: 100%; }
#visualization-settings-title { scroll-margin-top: 72px; }
@media (max-width: 900px) {
  .canvas-section { margin-inline: 0 !important; width: 100% !important; }
  .visual-select-row, .visual-select-block, .array-size-row, .array-spacing-taper-row, .doa-controls-grid, .doa-results-grid, .doa-formula-grid { grid-template-columns: 1fr !important; }
  .slider-container, .array-spacing-taper-row .spacing-slider.slider-container, .array-spacing-taper-row #chebyshev-sidelobe-slider, .spacing-slider.slider-container { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: .35rem .5rem !important; width: 100% !important; }
  .slider-container label, .spacing-slider.slider-container label { width: auto !important; min-width: 0 !important; overflow-wrap: anywhere; }
  .slider-container input[type="range"], .spacing-slider.slider-container input[type="range"], .array-spacing-taper-row .spacing-slider input[type="range"], .array-spacing-taper-row #chebyshev-sidelobe-slider input[type="range"] { grid-column: 1 / -1 !important; order: 3 !important; width: 100% !important; min-width: 0 !important; }
  table { display: block; max-width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .MathJax, mjx-container, .mjx-container, pre, code { max-width: 100% !important; overflow-x: auto; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
}
@media (max-width: 640px) {
  .container.mx-auto, .container.max-w-7xl { padding-left: 10px !important; padding-right: 10px !important; }
  .workspace-details-inner { padding-left: .28rem !important; padding-right: .28rem !important; }
  .visual-workspace, .visual-workspace .canvas-container { width: 100% !important; max-width: 100% !important; }
  .slice-dashboard-grid, .slice-radar-grid { grid-template-columns: 1fr !important; width: 100% !important; overflow-x: hidden !important; }
  .slice-card:nth-child(n+3) { display: block !important; }
  .controls { padding-left: .7rem !important; padding-right: .7rem !important; }
}


/* v58: mobile narrow-window edge repair.
   Keeps the sticky preview behavior, but prevents controls/plots from becoming
   wider than a very narrow phone/browser viewport. */
@media (max-width: 900px) {
  *, *::before, *::after { box-sizing: border-box; }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .container,
  .container.mx-auto,
  .container.max-w-7xl {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    padding-left: clamp(8px, 2.4vw, 14px) !important;
    padding-right: clamp(8px, 2.4vw, 14px) !important;
    overflow-x: hidden !important;
  }

  .grid-container,
  .canvas-section,
  .workspace-details,
  .workspace-details-inner,
  .visual-workspace,
  .canvas-container,
  .slice-dashboard,
  .slice-card,
  .controls-and-info,
  .controls,
  .receive-doa-panel,
  .doa-math-note,
  .radar-scene-card,
  .system-frequency-card,
  .explanations {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Keep sticky exactly in the mobile/tablet concept; do not turn it into a normal block. */
  .canvas-section {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  .workspace-details,
  .workspace-details-inner,
  .visual-workspace,
  .slice-dashboard,
  .controls,
  .receive-doa-panel,
  .radar-scene-card,
  .system-frequency-card {
    overflow-x: hidden !important;
  }

  .controls {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.72rem !important;
    padding-left: clamp(0.58rem, 2.5vw, 0.9rem) !important;
    padding-right: clamp(0.58rem, 2.5vw, 0.9rem) !important;
  }

  .controls > .flex.flex-wrap.-mx-2,
  .controls > .flex.flex-wrap.-mx-2 .w-full.px-2.mb-4,
  .visual-select-row,
  .array-size-row,
  .array-spacing-taper-row,
  .doa-controls-grid,
  .doa-control-pair,
  .doa-noise-lut-pair,
  .radar-scene-grid,
  .system-frequency-grid,
  .doa-formula-grid,
  .radar-detail-plot-grid,
  .slice-radar-panel .radar-detail-plot-grid,
  .slice-dashboard-grid,
  .slice-radar-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .slider-container,
  .doa-slider-card,
  .distance-slider-container,
  .radar-field,
  .doa-control-pair,
  .doa-map-card,
  .radar-rd-card,
  .slice-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .slider-container label,
  .doa-slider-card label,
  .radar-field label,
  .system-frequency-card label {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .doa-slider-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.38rem !important;
    overflow: hidden !important;
  }

  .doa-slider-line,
  .distance-slider-row,
  .array-size-row .slider-container,
  .array-spacing-taper-row #chebyshev-sidelobe-slider,
  .array-spacing-taper-row .spacing-slider,
  .array-spacing-taper-row .taper-select-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(3.9rem, 4.7rem) auto !important;
    gap: 0.45rem !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .doa-slider-line input[type="range"],
  .distance-slider-row input[type="range"],
  .array-size-row .slider-container input[type="range"],
  .array-spacing-taper-row input[type="range"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .doa-value-input,
  .angle-number-input,
  .compact-number-input,
  input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 4.8rem !important;
  }

  .doa-unit,
  .slider-unit {
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .doa-option-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.45rem !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .doa-option-row label,
  .doa-option-row select,
  .doa-option-row input,
  .doa-option-row button,
  select,
  input,
  textarea,
  button {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .doa-option-row select,
  .doa-option-row button {
    width: 100% !important;
  }

  .doa-freeze-label {
    display: inline-flex !important;
    width: auto !important;
    justify-self: start !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  .doa-freeze-label input[type="checkbox"] {
    width: auto !important;
    min-width: auto !important;
  }

  .slice-dashboard-head,
  .slice-dashboard-toolbar {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .slice-dashboard-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    overflow-x: hidden !important;
  }

  .slice-cut-control,
  .slice-mini-toggle,
  .slice-mini-btn {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    flex: 0 1 auto !important;
  }

  .slice-card svg,
  .slice-radar-panel canvas,
  canvas,
  svg,
  img,
  video,
  iframe {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  table,
  .phase-shift-table-wrap,
  .MathJax,
  mjx-container,
  pre,
  code {
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}

@media (max-width: 520px) {
  .container,
  .container.mx-auto,
  .container.max-w-7xl {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .workspace-details-inner {
    padding-left: 0.28rem !important;
    padding-right: 0.28rem !important;
  }

  .doa-slider-line,
  .distance-slider-row,
  .array-size-row .slider-container,
  .array-spacing-taper-row #chebyshev-sidelobe-slider,
  .array-spacing-taper-row .spacing-slider,
  .array-spacing-taper-row .taper-select-control {
    grid-template-columns: minmax(0, 1fr) minmax(3.55rem, 4.2rem) auto !important;
    gap: 0.35rem !important;
  }

  .controls {
    padding-left: 0.58rem !important;
    padding-right: 0.58rem !important;
  }
}

/* v60: ultra-narrow controls without hiding content.
   Sticky preview stays unchanged. At phone-width/narrow browser sizes, rows no
   longer try to keep label + slider + input + unit on one line. The important
   change versus v59: do NOT apply broad overflow:hidden/display:grid rules to
   every control container, because that can clip whole sections. */
@media (max-width: 560px) {
  *, *::before, *::after { box-sizing: border-box; }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .container,
  .container.mx-auto,
  .container.max-w-7xl {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .controls,
  .workspace-details-inner,
  .receive-doa-panel,
  .radar-scene-card,
  .system-frequency-card,
  .doa-slider-card,
  .radar-field,
  .slice-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .controls {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .doa-controls-grid,
  .doa-control-pair,
  .doa-noise-lut-pair,
  .radar-scene-grid,
  .system-frequency-grid,
  .array-size-row,
  .array-spacing-taper-row,
  .visual-select-row,
  .visual-select-block,
  .doa-formula-grid,
  .radar-detail-plot-grid,
  .slice-dashboard-grid,
  .slice-radar-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.55rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Only real slider lines get the two-line layout. */
  .doa-slider-card {
    display: block !important;
    padding: 0.55rem !important;
    overflow: visible !important;
  }

  .doa-slider-card > label,
  .slider-container > label,
  .radar-field label,
  .system-frequency-card label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 0.35rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .doa-slider-line,
  .distance-slider-row,
  .coupling-slider-line,
  .array-size-row .slider-container,
  .array-spacing-taper-row .spacing-slider,
  .array-spacing-taper-row #chebyshev-sidelobe-slider {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.35rem 0.45rem !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .doa-slider-line > input[type="range"],
  .distance-slider-row > input[type="range"],
  .coupling-slider-line > input[type="range"],
  .array-size-row .slider-container > input[type="range"],
  .array-spacing-taper-row .spacing-slider > input[type="range"],
  .array-spacing-taper-row #chebyshev-sidelobe-slider > input[type="range"] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .doa-value-input,
  .angle-number-input,
  .compact-number-input,
  .doa-slider-line > input[type="number"],
  .distance-slider-row > input[type="number"],
  .array-size-row .slider-container > input[type="number"],
  .array-spacing-taper-row .spacing-slider > input[type="number"],
  .array-spacing-taper-row #chebyshev-sidelobe-slider > input[type="number"] {
    grid-column: 1 !important;
    justify-self: start !important;
    width: 4.2rem !important;
    max-width: min(4.2rem, 100%) !important;
    min-width: 0 !important;
  }

  .doa-unit,
  .angle-unit,
  .slider-unit {
    grid-column: 2 !important;
    justify-self: start !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  .doa-option-row,
  .taper-select-control,
  .radar-field {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.42rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .doa-option-row select,
  .doa-option-row input:not([type="checkbox"]),
  .doa-option-row button,
  .taper-select-control select,
  .radar-field input,
  .radar-field select,
  .system-frequency-card input,
  .system-frequency-card select,
  select,
  textarea,
  button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .doa-freeze-label {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    justify-self: start !important;
    align-items: center !important;
    gap: 0.35rem !important;
    white-space: normal !important;
  }

  .doa-freeze-label input[type="checkbox"] {
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 380px) {
  .container,
  .container.mx-auto,
  .container.max-w-7xl {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .controls,
  .workspace-details-inner {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
  }

  .doa-slider-card,
  .radar-scene-card,
  .system-frequency-card,
  .slice-card {
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
  }

  .doa-value-input,
  .angle-number-input,
  .compact-number-input {
    width: 3.9rem !important;
    max-width: 3.9rem !important;
  }
}

/* v61: narrow portrait layout.
   Keep sticky preview as before, but make controls use the available horizontal
   space better: label + value stay on one compact top row, slider gets a full
   row below. This avoids the too-wide slider/value/unit line on narrow screens. */
@media (max-width: 560px) {
  .doa-slider-card,
  .distance-slider-container,
  .array-size-row .slider-container,
  .array-spacing-taper-row .spacing-slider,
  .array-spacing-taper-row #chebyshev-sidelobe-slider,
  .coupling-card .coupling-slider-line {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .doa-slider-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(3.35rem, 3.9rem) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 0.38rem !important;
    row-gap: 0.34rem !important;
    align-items: center !important;
    padding: 0.52rem 0.58rem !important;
  }

  .doa-slider-card > label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    align-self: center !important;
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }

  .doa-slider-card > .doa-slider-line {
    display: contents !important;
  }

  .doa-slider-card > .doa-slider-line > input[type="range"] {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .doa-slider-card > .doa-slider-line > input[type="number"],
  .doa-slider-card .doa-value-input {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: 3.65rem !important;
    max-width: 3.65rem !important;
    min-width: 0 !important;
    padding-left: 0.32rem !important;
    padding-right: 0.32rem !important;
    font-size: 0.78rem !important;
  }

  .doa-slider-card > .doa-slider-line > .doa-unit,
  .doa-slider-card .doa-unit {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    min-width: 1.05rem !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }

  /* Generic compact slider rows used elsewhere: full-width slider first, small
     value/unit below, never wider than the card. */
  .distance-slider-row,
  .coupling-slider-line,
  .array-size-row .slider-container,
  .array-spacing-taper-row .spacing-slider,
  .array-spacing-taper-row #chebyshev-sidelobe-slider {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(3.35rem, 3.9rem) auto !important;
    column-gap: 0.38rem !important;
    row-gap: 0.32rem !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .distance-slider-row > label,
  .coupling-slider-line > label,
  .array-size-row .slider-container > label,
  .array-spacing-taper-row .spacing-slider > label,
  .array-spacing-taper-row #chebyshev-sidelobe-slider > label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    font-size: 0.78rem !important;
    overflow-wrap: anywhere !important;
  }

  .distance-slider-row > input[type="range"],
  .coupling-slider-line > input[type="range"],
  .array-size-row .slider-container > input[type="range"],
  .array-spacing-taper-row .spacing-slider > input[type="range"],
  .array-spacing-taper-row #chebyshev-sidelobe-slider > input[type="range"] {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .distance-slider-row > input[type="number"],
  .coupling-slider-line > input[type="number"],
  .array-size-row .slider-container > input[type="number"],
  .array-spacing-taper-row .spacing-slider > input[type="number"],
  .array-spacing-taper-row #chebyshev-sidelobe-slider > input[type="number"],
  .angle-number-input,
  .compact-number-input {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: 3.65rem !important;
    max-width: 3.65rem !important;
    min-width: 0 !important;
    font-size: 0.78rem !important;
  }

  .distance-slider-row .slider-unit,
  .coupling-slider-line .slider-unit,
  .array-size-row .slider-container .slider-unit,
  .array-spacing-taper-row .spacing-slider .slider-unit,
  .array-spacing-taper-row #chebyshev-sidelobe-slider .slider-unit,
  .angle-unit {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    min-width: 1.05rem !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }

  .doa-option-row {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 0.45rem !important;
    row-gap: 0.42rem !important;
  }

  .doa-option-row label[for="doa-propagation-model"],
  .doa-option-row label[for="doa-seed"] {
    grid-column: 1 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  #doa-propagation-model,
  #doa-seed {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .doa-freeze-label,
  #doa-new-noise {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 360px) {
  .doa-slider-card,
  .distance-slider-row,
  .coupling-slider-line,
  .array-size-row .slider-container,
  .array-spacing-taper-row .spacing-slider,
  .array-spacing-taper-row #chebyshev-sidelobe-slider {
    grid-template-columns: minmax(0, 1fr) minmax(3rem, 3.35rem) auto !important;
  }

  .doa-slider-card > .doa-slider-line > input[type="number"],
  .doa-slider-card .doa-value-input,
  .distance-slider-row > input[type="number"],
  .coupling-slider-line > input[type="number"],
  .array-size-row .slider-container > input[type="number"],
  .array-spacing-taper-row .spacing-slider > input[type="number"],
  .array-spacing-taper-row #chebyshev-sidelobe-slider > input[type="number"],
  .angle-number-input,
  .compact-number-input {
    width: 3.25rem !important;
    max-width: 3.25rem !important;
  }

  .doa-option-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .doa-option-row label[for="doa-propagation-model"],
  .doa-option-row label[for="doa-seed"],
  #doa-propagation-model,
  #doa-seed,
  .doa-freeze-label,
  #doa-new-noise {
    grid-column: 1 !important;
  }
}

/* v62: tablet stack + narrow-control containment.
   Tablet: keep the visualization/sticky preview behavior, but do not place the
   radar/receive settings beside the visualization controls. Everything in the
   settings column becomes one vertical flow before the desktop split returns. */
@media (max-width: 1099px) {
  .controls-and-info.controls-panel-grid,
  .controls-panel-grid,
  .controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .controls > * {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .receive-doa-panel,
  .radar-scene-card,
  .system-frequency-card,
  .visual-select-block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Narrow portrait: make every normal slider fit inside the card without
   clipping. The top row uses label + compact value/unit; the range gets its
   own full-width row. */
@media (max-width: 560px) {
  .controls .slider-container:not(.distance-slider-container):not(.spacing-slider):not(#chebyshev-sidelobe-slider),
  .controls .coupling-slider-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(3.25rem, 3.8rem) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 0.38rem !important;
    row-gap: 0.32rem !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .controls .slider-container:not(.distance-slider-container):not(.spacing-slider):not(#chebyshev-sidelobe-slider) > label,
  .controls .coupling-slider-container > label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
  }

  .controls .slider-container:not(.distance-slider-container):not(.spacing-slider):not(#chebyshev-sidelobe-slider) > input[type="range"],
  .controls .coupling-slider-container > input[type="range"] {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .controls .slider-container:not(.distance-slider-container):not(.spacing-slider):not(#chebyshev-sidelobe-slider) > input[type="text"],
  .controls .slider-container:not(.distance-slider-container):not(.spacing-slider):not(#chebyshev-sidelobe-slider) > input[type="number"],
  .controls .coupling-slider-container > input[type="text"],
  .controls .coupling-slider-container > input[type="number"] {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: 3.55rem !important;
    max-width: 3.55rem !important;
    min-width: 0 !important;
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
    font-size: 0.78rem !important;
  }

  .controls .slider-container:not(.distance-slider-container):not(.spacing-slider):not(#chebyshev-sidelobe-slider) > .angle-unit,
  .controls .slider-container:not(.distance-slider-container):not(.spacing-slider):not(#chebyshev-sidelobe-slider) > .slider-unit,
  .controls .coupling-slider-container > .angle-unit,
  .controls .coupling-slider-container > .slider-unit {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: 0.72rem !important;
  }

  .controls .slider-container .slider-value.angle-hidden-value,
  .controls .slider-container .slider-value:not(:empty) {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .visual-select-row,
  .visual-select-block,
  .radar-scene-grid,
  .system-frequency-grid,
  .doa-controls-grid,
  .doa-control-pair,
  .doa-noise-lut-pair {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .radar-field,
  .visual-select-control,
  .doa-option-row,
  .doa-slider-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Extreme narrow browser: still show every control, but stack the value below
   the label instead of letting it push out of the viewport. */
@media (max-width: 340px) {
  .controls .slider-container:not(.distance-slider-container):not(.spacing-slider):not(#chebyshev-sidelobe-slider),
  .doa-slider-card,
  .distance-slider-row,
  .coupling-slider-line,
  .array-size-row .slider-container,
  .array-spacing-taper-row .spacing-slider,
  .array-spacing-taper-row #chebyshev-sidelobe-slider {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .controls .slider-container:not(.distance-slider-container):not(.spacing-slider):not(#chebyshev-sidelobe-slider) > label,
  .doa-slider-card > label,
  .distance-slider-row > label,
  .coupling-slider-line > label,
  .array-size-row .slider-container > label,
  .array-spacing-taper-row .spacing-slider > label,
  .array-spacing-taper-row #chebyshev-sidelobe-slider > label {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .controls .slider-container:not(.distance-slider-container):not(.spacing-slider):not(#chebyshev-sidelobe-slider) > input[type="text"],
  .controls .slider-container:not(.distance-slider-container):not(.spacing-slider):not(#chebyshev-sidelobe-slider) > input[type="number"],
  .doa-slider-card .doa-value-input,
  .angle-number-input,
  .compact-number-input {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
    width: 3.2rem !important;
    max-width: 3.2rem !important;
  }

  .controls .slider-container:not(.distance-slider-container):not(.spacing-slider):not(#chebyshev-sidelobe-slider) > input[type="range"],
  .doa-slider-card input[type="range"],
  .distance-slider-row input[type="range"] {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}