:root {
      --brand-900: #1E3A5F;
      --brand-700: #2563EB;
      --brand-500: #3B82F6;
      --brand-400: #60A5FA;
      --brand-100: #DBEAFE;
      --brand-50: #EFF6FF;
      --success: #10B981;
      --warning: #F59E0B;
      --danger: #EF4444;
      --info: #06B6D4;
    }

  /* Fallback: constrain inline SVG icon sizes when Tailwind utilities are unavailable
     (prevents SVGs with only Tailwind classes like `w-7 h-7` from rendering at
     their browser intrinsic size on local file views or when CDN is blocked). */
  svg:not([width]):not([height]) {
    width: 1.25rem;
    height: 1.25rem;
    max-width: none;
    vertical-align: middle;
  }

    *,
    *::before,
    *::after {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background-color: var(--brand-50);
      color: #1F2937;
      min-height: 100vh;
      display: flex;
      flex-direction: column
    }

    ::-webkit-scrollbar {
      width: 6px;
      height: 6px
    }

    ::-webkit-scrollbar-track {
      background: transparent
    }

    ::-webkit-scrollbar-thumb {
      background: var(--brand-400);
      border-radius: 9999px
    }

    :focus-visible {
      outline: 2px solid var(--brand-500);
      outline-offset: 2px;
      border-radius: 6px
    }

    #mobile-menu {
      transform: translateX(100%);
      transition: transform 300ms ease
    }

    #mobile-menu.open {
      transform: translateX(0)
    }

    #upload-zone {
      transition: border-color 200ms ease, background-color 200ms ease
    }

    #upload-zone.drag-over {
      border-color: var(--brand-700);
      background-color: rgba(219, 234, 254, .6)
    }

    #file-input {
      display: none
    }

    @media(prefers-reduced-motion:no-preference) {
      .fade-in-up {
        animation: fadeInUp 300ms ease-out forwards
      }

      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(8px)
        }

        to {
          opacity: 1;
          transform: translateY(0)
        }
      }

      #mobile-menu {
        transition: transform 300ms ease
      }
    }

    @media(prefers-reduced-motion:reduce) {
      #mobile-menu {
        transition: none
      }

      .fade-in-up {
        animation: none;
        opacity: 1
      }
    }

    .toast {
      animation: toastIn 300ms ease-out forwards
    }

    .toast.hide {
      animation: toastOut 300ms ease-in forwards
    }

    @keyframes toastIn {
      from {
        opacity: 0;
        transform: translateY(-12px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes toastOut {
      from {
        opacity: 1;
        transform: translateY(0)
      }

      to {
        opacity: 0;
        transform: translateY(-12px)
      }
    }

    .toast-progress {
      animation: toastProgress 5000ms linear forwards
    }

    @keyframes toastProgress {
      from {
        width: 100%
      }

      to {
        width: 0%
      }
    }

    /* Preview Table */
    .preview-table {
      width: 100%;
      border-collapse: collapse;
      font-size: .75rem
    }

    .preview-table th {
      background: #EFF6FF;
      color: #374151;
      font-weight: 600;
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: .05em;
      padding: 8px 10px;
      border-bottom: 2px solid #DBEAFE;
      position: sticky;
      top: 0;
      z-index: 1;
      white-space: nowrap
    }

    .preview-table td {
      padding: 6px 10px;
      border-bottom: 1px solid #F3F4F6;
      white-space: nowrap;
      color: #1F2937
    }

    .preview-table tr:nth-child(even) td {
      background: #F9FAFB
    }

    .preview-table tr:hover td {
      background: #EFF6FF
    }

    .preview-table td.nan-cell {
      background: #FFFBEB;
      color: #D97706;
      font-style: italic
    }

    .preview-table td.row-num {
      color: #9CA3AF;
      font-size: .65rem;
      text-align: right
    }

    /* Quality rows */
    .quality-row {
      display: grid;
      grid-template-columns: 1fr auto auto auto auto;
      gap: 8px;
      align-items: center;
      padding: 8px 12px;
      border-bottom: 1px solid #F3F4F6;
      font-size: .75rem
    }

    .quality-row:last-child {
      border-bottom: none
    }

    .quality-row:hover {
      background: #F9FAFB
    }

    /* has-tooltip — cursor only; actual tooltip is a global floating div */
    .has-tooltip {
      cursor: help;
    }

    /* Global floating tooltip — lives at body level, never clipped */
    #global-tip {
      position: fixed;
      z-index: 9999;
      pointer-events: none;
      background: rgba(17, 24, 39, .96);
      color: #fff;
      font-size: .72rem;
      border-radius: 9px;
      padding: 8px 12px;
      max-width: 270px;
      min-width: 160px;
      white-space: normal;
      line-height: 1.5;
      box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
      opacity: 0;
      transition: opacity 150ms ease;
      text-align: left;
    }

    #global-tip.visible {
      opacity: 1;
    }

    /* downward arrow (tooltip above) */
    #global-tip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: rgba(17, 24, 39, .96);
    }

    /* upward arrow (tooltip below) */
    #global-tip.flipped::after {
      top: auto;
      bottom: 100%;
      border-top-color: transparent;
      border-bottom-color: rgba(17, 24, 39, .96);
    }

    @media print {
      #app-header,
      footer,
      .pdf-btn {
        display: none
      }

      body {
        padding: 0;
        background: #fff
      }

      .page {
        box-shadow: none;
        border-radius: 0;
        max-width: 100%
      }

      .section {
        break-inside: avoid;
        page-break-inside: avoid
      }

      img {
        max-width: 100%;
        page-break-inside: avoid
      }

      table {
        page-break-inside: avoid
      }
    }

    /* ── Config Panel ─────────────────────────────────────── */
    .config-label {
      display: block;
      font-size: .75rem;
      font-weight: 600;
      color: #374151;
      letter-spacing: .01em;
      margin-bottom: 4px;
    }

    .config-input {
      border: 1px solid #D1D5DB;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: .8rem;
      color: #1F2937;
      background: #fff;
      outline: none;
      transition: border-color 150ms, box-shadow 150ms;
      min-height: 36px;
    }

    .config-input:focus {
      border-color: var(--brand-500);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, .15)
    }

    .config-input:disabled {
      background: #F9FAFB;
      color: #9CA3AF;
      cursor: not-allowed
    }

    /* Filter card */
    .filter-card {
      background: #F9FAFB;
      border: 1px solid #E5E7EB;
      border-radius: 12px;
      padding: 14px;
      transition: border-color 200ms, background 200ms;
    }

    .filter-card.active {
      background: #EFF6FF;
      border-color: #93C5FD;
    }

    /* Toggle switch */
    .toggle-wrap {
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      flex-shrink: 0
    }

    .toggle-track {
      width: 36px;
      height: 20px;
      background: #D1D5DB;
      border-radius: 9999px;
      position: relative;
      transition: background 200ms;
    }

    .toggle-thumb {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 16px;
      height: 16px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
      transition: transform 200ms;
    }

    input[type=checkbox]:checked~.toggle-track {
      background: var(--brand-500);
    }

    input[type=checkbox]:checked~.toggle-track .toggle-thumb {
      transform: translateX(16px);
    }

    /* Focus ring on the hidden checkbox via the track */
    input[type=checkbox]:focus-visible~.toggle-track {
      outline: 2px solid var(--brand-500);
      outline-offset: 2px;
      border-radius: 9999px;
    }

    /* View mode buttons */
    .view-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      border-radius: 8px;
      font-size: .78rem;
      font-weight: 600;
      border: 1.5px solid #D1D5DB;
      color: #6B7280;
      background: #fff;
      cursor: pointer;
      transition: all 150ms;
      white-space: nowrap;
    }

    .view-btn:hover {
      border-color: var(--brand-500);
      color: var(--brand-700)
    }

    .view-btn-active {
      background: var(--brand-700);
      border-color: var(--brand-700);
      color: #fff;
    }

    .view-btn-active:hover {
      background: var(--brand-900);
      border-color: var(--brand-900);
      color: #fff
    }

    /* Channel checkbox pill */
    .ch-pill {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      background: #fff;
      border: 1.5px solid #E5E7EB;
      border-radius: 8px;
      cursor: pointer;
      transition: all 150ms;
      font-size: .75rem;
      color: #374151;
      font-weight: 500;
    }

    .ch-pill:hover {
      border-color: var(--brand-500);
      background: #EFF6FF
    }

    .ch-pill.selected {
      border-color: var(--brand-500);
      background: #EFF6FF;
      color: var(--brand-700)
    }

    .ch-pill input[type=checkbox] {
      width: 14px;
      height: 14px;
      accent-color: var(--brand-700);
      flex-shrink: 0;
      cursor: pointer;
    }

    /* Config summary chips */
    .cfg-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #F3F4F6;
      color: #374151;
      border-radius: 9999px;
      font-size: .68rem;
      font-weight: 500;
      padding: 3px 9px;
      border: 1px solid #E5E7EB;
    }

    .cfg-chip.active {
      background: #DBEAFE;
      color: #1D4ED8;
      border-color: #93C5FD
    }

    /* Preset flash animation on filter cards */
    @keyframes presetFlash {

      0%,
      100% {
        background: #F9FAFB
      }

      40% {
        background: #DBEAFE
      }
    }

    .filter-card.preset-flash {
      animation: presetFlash 400ms ease
    }

    /* ── Chart panel ──────────────────────────────────────── */
    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    .chart-spinner {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 3px solid #DBEAFE;
      border-top-color: #2563EB;
      animation: spin 0.8s linear infinite;
      display: inline-block;
      flex-shrink: 0;
    }

    .chart-card {
      background: #fff;
      border: 1px solid #E5E7EB;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 12px;
    }

    .chart-card:last-child {
      margin-bottom: 0
    }

    .chart-card-header {
      padding: 8px 14px;
      background: #F9FAFB;
      border-bottom: 1px solid #E5E7EB;
      font-size: .78rem;
      font-weight: 600;
      color: #374151;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .chart-channel-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* ── Tool buttons (Peaks / ROI / Measure) ─────────────── */
    .tool-btn.tool-active {
      background: #1D4ED8;
      border-color: #1D4ED8;
      color: #fff;
    }

    .tool-btn.tool-active:hover {
      background: #1E40AF;
    }

    /* Peak marker dot on canvas — drawn via Chart.js scatter dataset */
    /* ROI drag overlay */
    #roi-drag-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 5;
    }

    .roi-rect {
      position: absolute;
      background: rgba(16, 185, 129, .12);
      border: 2px solid #10B981;
      border-radius: 3px;
      pointer-events: none;
    }

    /* Measure crosshair lines — injected as absolutely-positioned divs */
    .meas-marker {
      position: absolute;
      width: 2px;
      top: 0;
      bottom: 0;
      transform: translateX(-50%);
      background: rgba(239, 68, 68, .7);
      pointer-events: none;
      z-index: 6;
    }

    .meas-marker::after {
      content: attr(data-label);
      position: absolute;
      top: 4px;
      left: 4px;
      font-size: 9px;
      font-weight: 700;
      color: #EF4444;
      white-space: nowrap;
      background: rgba(255, 255, 255, .85);
      padding: 1px 4px;
      border-radius: 3px;
    }

    #stats-table td {
      padding: 7px 12px;
      border-bottom: 1px solid #F3F4F6;
      color: #374151;
    }

    #stats-table tr:last-child td {
      border-bottom: none
    }

    #stats-table tr:hover td {
      background: #F9FAFB
    }

    #stats-table td:first-child {
      font-weight: 600;
      color: #1F2937;
      position: sticky;
      left: 0;
      background: #fff;
      z-index: 1;
    }

    #stats-table tr:hover td:first-child {
      background: #F9FAFB
    }

    .stat-val {
      font-variant-numeric: tabular-nums;
      font-family: ui-monospace, monospace;
      font-size: .72rem;
      text-align: right;
      white-space: nowrap;
    }

    /* ── PSD panel ────────────────────────────────────────── */
    .psd-scale-btn {
      padding: 5px 12px;
      font-size: .72rem;
      font-weight: 600;
      background: #fff;
      color: #6B7280;
      cursor: pointer;
      transition: background 150ms, color 150ms;
    }

    .psd-scale-btn:hover {
      background: #F3F4F6
    }

    .psd-scale-active {
      background: var(--brand-700);
      color: #fff;
    }

    .psd-scale-active:hover {
      background: var(--brand-900);
      color: #fff;
    }

    /* ── Export buttons ───────────────────────────────────── */
    .export-btn {
      cursor: pointer;
      transition: all 150ms;
    }

    .export-btn:active {
      transform: scale(0.96);
    }

    .export-btn:disabled {
      pointer-events: none;
    }

    /* ── Band legend pill ─────────────────────────────────── */
    .band-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 9999px;
      font-size: .68rem;
      font-weight: 600;
      border: 1px solid transparent;
    }

    /* Band power bar */
    .band-bar-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .72rem
    }

    .band-bar-track {
      flex: 1;
      height: 10px;
      background: #F3F4F6;
      border-radius: 9999px;
      overflow: hidden;
    }

    .band-bar-fill {
      height: 100%;
      border-radius: 9999px;
      transition: width 600ms cubic-bezier(.4, 0, .2, 1);
    }

    /* Sheet tabs */
    .sheet-tab {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: .75rem;
      font-weight: 500;
      border: 1.5px solid #E5E7EB;
      background: #F9FAFB;
      color: #374151;
      cursor: pointer;
      white-space: nowrap;
      transition: all 150ms ease;
      min-height: 36px;
      flex-shrink: 0;
    }

    .sheet-tab:hover {
      border-color: #93C5FD;
      background: #EFF6FF;
      color: #2563EB;
    }

    .sheet-tab.active {
      border-color: #2563EB;
      background: #2563EB;
      color: #fff;
      box-shadow: 0 2px 8px rgba(37, 99, 235, .25);
    }

    .sheet-tab .sheet-rows {
      font-size: .65rem;
      opacity: .75;
      font-weight: 400;
    }

    .sheet-tab.active .sheet-rows {
      opacity: .85;
    }

    /* Sheet card in overview grid */
    .sheet-card {
      border: 1px solid #E5E7EB;
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
      transition: box-shadow 200ms ease;
    }

    .sheet-card:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
    }

    .sheet-card-header {
      background: #EFF6FF;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .sheet-card-body {
      padding: 12px 14px;
    }

    /* Fix spectrogram dropdown options visibility on light-themed OS dropdowns */
    #spectrogram-section select option {
      background: #fff;
      color: #1F2937;
    }
  

    .fchip {
      display: inline-flex;
      align-items: center;
      background: rgba(255, 255, 255, .15);
      color: #fff;
      border-radius: 9999px;
      font-size: .7rem;
      font-weight: 500;
      padding: 2px 10px;
      white-space: nowrap
    }

    .app-kbd {
      background: #F3F4F6;
      border: 1px solid #D1D5DB;
      border-bottom-width: 2px;
      border-radius: 5px;
      padding: 2px 7px;
      font-family: monospace;
      font-size: .72rem;
      color: #374151;
      min-width: 64px;
      display: inline-block;
      text-align: center;
      flex-shrink: 0
    }

    .shortcut-row {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #374151;
      margin-bottom: 6px
    }

    /* ── Site Footer ────────────────────────────────────────── */
    .site-footer {
      background: #fff;
      border-top: 1px solid #E5E7EB;
      padding: 48px 0;
      position: relative;
      z-index: 10;
    }

    .footer-inner {
      max-width: 1536px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .footer-section {
      display: flex;
      flex-direction: column;
    }

    @media (min-width: 768px) {
      .footer-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
      }
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .footer-info {
      font-size: .875rem;
      color: #6B7280;
      line-height: 1.6;
    }

    .footer-link {
      font-size: .875rem;
      font-weight: 500;
      color: #4F46E5;
      text-decoration: none;
      transition: all 150ms;
    }

    .footer-link:hover {
      color: #4338CA;
      text-decoration: underline;
    }

    /* ── Cookie Banner ─────────────────────────────────────── */
    .cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-top: 1px solid #E5E7EB;
      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
      padding: 16px 0;
    }

    .cookie-inner {
      max-width: 1536px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    @media (min-width: 640px) {
      .cookie-inner {
        flex-direction: row;
      }
    }

    .cookie-text {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: .8rem;
      color: #4B5563;
    }

    .cookie-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .cookie-btn {
      padding: 8px 16px;
      border-radius: 8px;
      font-size: .8rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 150ms;
    }

    .cookie-btn-primary {
      background: #2563EB;
      color: #fff;
      border: 1px solid #2563EB;
    }

    .cookie-btn-primary:hover {
      background: #1D4ED8;
    }

    .cookie-btn-secondary {
      background: #fff;
      color: #4B5563;
      border: 1px solid #D1D5DB;
    }

    .cookie-btn-secondary:hover {
      background: #F9FAFB;
    }

    .cookie-banner.hidden {
      display: none;
    }

    .footer-disclaimer {
      font-size: 10px;
      color: #9CA3AF;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .footer-copy {
      font-size: 11px;
      color: #9CA3AF;
    }

    /* ── Feedback Widget ──────────────────────────────────── */
    .feedback-modal {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(17, 24, 39, 0.6);
      backdrop-filter: blur(4px);
      padding: 20px;
    }

    .feedback-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      width: 100%;
      max-width: 320px;
      padding: 24px;
      position: relative;
    }

    .feedback-modal.hidden {
      display: none;
    }

    .star-btn {
      font-size: 24px;
      background: none;
      border: none;
      color: #D1D5DB;
      cursor: pointer;
      padding: 0;
      transition: color 150ms;
    }

    .star-btn:hover {
      color: #9CA3AF;
    }

    .star-active {
      color: #FBBF24 !important;
    }

    .feedback-textarea {
      width: 100%;
      border: 1px solid #E5E7EB;
      border-radius: 8px;
      padding: 10px;
      font-size: .8rem;
      color: #374151;
      resize: none;
      outline: none;
      transition: border-color 150ms;
      margin-bottom: 12px;
    }

    .feedback-textarea:focus {
      border-color: #2563EB;
    }

    .feedback-submit-btn {
      width: 100%;
      background: #2563EB;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 10px;
      font-weight: 600;
      font-size: .85rem;
      cursor: pointer;
      transition: background 150ms;
    }

    .feedback-submit-btn:hover {
      background: #1D4ED8;
    }



    .transition-transform {
      transition: transform 200ms ease;
    }
    .rotate-180 {
      transform: rotate(180deg);
    }