:root {
      --bg-dark: #081118;
      --card-bg: #111c26;
      --surface-2: #14232d;
      --card-border: #25323d;
      --accent-green: #27f294;
      --accent-blue: #00d4ff;
      --accent-purple: #ab47bc;
      --accent-gold: #f59e0b;
      --accent-red: #ef4444;
      --accent-warning: var(--accent-gold);
      --text-main: #f5f9fb;
      --text-sub: #9eafb8;
      --text-muted: #748596;
      --touch-min: 44px;

      /* Type scale (rem so nested elements never compound) */
      --fs-xs: 0.75rem;
      --fs-sm: 0.875rem;
      --fs-md: 1rem;
      --fs-lg: 1.25rem;
      --fs-xl: 1.75rem;

      /* 8 px spacing system */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 16px;
      --space-4: 24px;

      --border-subtle: 1px solid rgba(123, 149, 163, 0.16);
    }

    html { min-height: 100%; background: var(--bg-dark); }

    body {
      font-family: Inter, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background:
        radial-gradient(ellipse at 50% -10%, rgba(39, 242, 148, 0.08), transparent 46%),
        linear-gradient(180deg, #0b161f 0%, var(--bg-dark) 420px);
      color: var(--text-main);
      font-variant-numeric: tabular-nums;
      margin: 0;
      padding: calc(16px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) calc(92px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px));
      box-sizing: border-box;
      max-width: 1360px;
      min-height: 100vh;
      margin-inline: auto;
    }

    h2 { color: var(--text-main); margin: 0; font-size: clamp(1.15em, 2vw, 1.4em); line-height: 1.2; letter-spacing: -0.035em; }
    .brand-kicker { color: var(--accent-green); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
    .sub { color: var(--text-sub); font-size: var(--fs-sm); margin-bottom: var(--space-2); line-height: 1.45; }

    /* UNIFIED COMPACT HEADER */
    .header-card {
      position: relative;
      background: linear-gradient(135deg, var(--surface-2), var(--card-bg));
      border: var(--border-subtle);
      border-radius: 16px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
      padding: 12px 16px;
      margin-bottom: var(--space-3);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .header-top-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }
    .header-brand { position: relative; min-width: 0; padding-left: 0; transition: padding-left 150ms ease; }
    .header-brand.has-team-logo { padding-left: 68px; }
    .header-team-logo { position: absolute; top: 50%; left: 0; width: 54px; height: 54px; object-fit: contain; transform: translateY(-50%); filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
    .header-team-logo[hidden] { display: none; }

    /* TOP DESKTOP NAV TAB STRIP */
    .desktop-nav-tabs {
      display: none;
      gap: 8px;
      margin-top: 4px;
    }
    .desktop-tab-btn {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--card-border);
      color: var(--text-sub);
      padding: 8px 16px;
      border-radius: 8px;
      font-size: var(--fs-sm);
      font-weight: 700;
      cursor: pointer;
      transition: all 150ms ease;
    }
    .desktop-tab-btn.active {
      background: rgba(49, 232, 144, 0.12);
      color: var(--accent-green);
      border-color: var(--accent-green);
    }

    .btn {
      min-height: var(--touch-min);
      background: var(--accent-green);
      color: #062014;
      border: none;
      padding: 0 16px;
      font-weight: 700;
      border-radius: 10px;
      cursor: pointer;
      font-size: 0.85em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
    }

    .btn-secondary { background: #1c2530; color: #fff; border: 1px solid var(--card-border); }
    /* Green = primary action, blue = data/info, amber = caution, red = destructive. Flat fills keep contrast high. */
    .btn-blue { background: var(--accent-blue); color: #04202e; }
    .btn-primary { background: var(--accent-green); color: #062014; }
    .btn-gold { background: var(--accent-warning); color: #1a1100; }
    .btn-danger { background: var(--accent-red); color: #fff; }

    .btn:hover, .pitch-orientation button:hover, .nav-item:hover { filter: brightness(1.08); }
    button:focus-visible, input:focus-visible, select:focus-visible {
      outline: 2px solid var(--accent-green);
      outline-offset: 3px;
    }

    /* Line icons: masked SVGs that inherit the text colour */
    .ico { display: inline-block; width: 1.15em; height: 1.15em; margin-right: 6px; vertical-align: -0.2em; background: currentColor; flex: none;
      -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
    .nav-icon .ico, .heatmap-settings-button .ico, .edit-icon-btn .ico, .team-settings-icon .ico { margin-right: 0; }
    .ico-import { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }
    .ico-coach { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E"); }
    .ico-trim { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12'/%3E%3C/svg%3E"); }
    .ico-player { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M5 21v-2a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v2'/%3E%3C/svg%3E"); }
    .ico-trend { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 7l-8.5 8.5-5-5L2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E"); }
    .ico-save { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E"); }
    .ico-file { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E"); }
    .ico-target { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
    .ico-zap { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E"); }
    .ico-camera { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); }
    .ico-bluetooth { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11L12 23V1l5.5 5.5-11 11'/%3E%3C/svg%3E"); }
    .ico-usb { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5M9 8V2M15 8V2M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8z'/%3E%3C/svg%3E"); }
    .ico-settings { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E"); }
    .ico-ball { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7l4 3-1.5 5h-5L8 10z'/%3E%3C/svg%3E"); }
    .ico-edit { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
    .ico-upload { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 16.2A4.5 4.5 0 0 0 17.5 8h-1.8A7 7 0 1 0 4 14.9'/%3E%3Cpath d='M12 12v9M8 16l4-4 4 4'/%3E%3C/svg%3E"); }
    .ico-check-circle { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E"); }
    .ico-alert { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
    .ico-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); }
    .ico-x-circle { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E"); }
    .ico-arrow-right { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E"); }
    .ico-arrow-left { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E"); }
    .ico-info { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
    .ico-chevron { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
    .wizard-body .btn .ico, .wizard-footer .btn .ico { margin-right: 0; }
    body.no-data #coachView,
    body.no-data #cropView,
    body.no-data #playerView { display: none !important; }

    /* SESSION MENU */
    .session-menu { position: relative; }
    .session-menu > summary { list-style: none; min-height: var(--touch-min); padding: 0 12px; font-size: var(--fs-xs); }
    .session-menu > summary::-webkit-details-marker { display: none; }
    .session-menu-list {
      position: absolute;
      right: 0;
      top: calc(100% + 4px);
      z-index: 50;
      min-width: 190px;
      max-width: calc(100vw - 24px);
      display: flex;
      flex-direction: column;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    }
    .session-menu-list button {
      background: none;
      border: none;
      color: var(--text-main);
      text-align: left;
      padding: 12px 14px;
      min-height: var(--touch-min);
      font-size: 0.85em;
      cursor: pointer;
    }
    .session-menu-list button:hover { background: rgba(255, 255, 255, 0.06); }

    /* CARD HEADING ACTIONS */
    .card-heading-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
    .card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .btn-compact { min-height: 28px; padding: 0 8px; font-size: var(--fs-xs); }

    /* GUIDED IMPORT */
    .wizard-overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: flex;
      align-items: stretch;
      justify-content: center;
      background: rgba(0, 0, 0, 0.78);
    }
    .wizard-overlay[hidden] { display: none; }
    body.wizard-open { overflow: hidden; }
    .wizard {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 640px;
      height: 100%;
      max-height: 100dvh;
      background: var(--bg-dark);
      outline: none;
    }
    .wizard-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2); }
    .wizard-head h3 { flex: 1; margin: 0; font-size: var(--fs-lg); }
    .wizard-step-label { color: var(--text-sub); font-size: var(--fs-sm); }
    .wizard-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: none; border-radius: 8px; color: var(--text-sub); cursor: pointer; }
    .wizard-close:hover { background: #1c2530; color: #fff; }
    .wizard-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: 0; padding: 0 var(--space-3) var(--space-2); list-style: none; }
    .wizard-steps li { display: flex; flex-direction: column; gap: 6px; color: var(--text-sub); font-size: var(--fs-xs); text-align: center; }
    .wizard-steps li[aria-current="step"] { color: var(--text-main); font-weight: 700; }
    .wizard-bar { display: block; height: 4px; border-radius: 4px; background: #232f3a; }
    .wizard-steps li.is-filled .wizard-bar { background: var(--accent-green); }
    .wizard-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
    .wizard-footer { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); border-top: var(--border-subtle); background: var(--bg-dark); }
    .wizard-footer .btn { min-width: 112px; }
    .wizard-footer #wizardNext { margin-left: auto; }
    .wizard-footer [hidden] { display: none; }
    .wizard .btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

    .wizard-drop { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); text-align: center; border: 1px dashed rgba(49, 232, 144, 0.4); border-radius: 14px; background: rgba(49, 232, 144, 0.04); }
    .wizard-drop.is-dragging { background: rgba(49, 232, 144, 0.12); border-style: solid; }
    .wizard-drop > .ico { width: 36px; height: 36px; margin: 0; color: var(--accent-green); }
    .wizard-drop h4, .wizard-section-head h4, .wizard-ready-head h4 { margin: 0; font-size: var(--fs-md); }
    .wizard-drop .sub { max-width: 400px; margin: 0 0 var(--space-1); }
    .wizard-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--text-sub); font-size: var(--fs-sm); line-height: 1.45; }
    .wizard-note .ico { margin: 2px 0 0; flex: none; }
    .wizard-alt { display: flex; flex-direction: column; gap: var(--space-2); }
    .wizard-alt-label { color: var(--text-sub); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
    .wizard-alt-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .wizard-alt-actions .btn { flex: 1 1 110px; text-decoration: none; }
    .wizard-ble { display: flex; flex-direction: column; gap: var(--space-2); padding: 14px; background: var(--card-bg); border: var(--border-subtle); border-radius: 12px; }
    .wizard-ble > .wizard-section-head { flex-wrap: wrap; }
    .wizard-ble > .wizard-section-head .sub { margin: 0; }
    .wizard-transfer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: 12px; border: 1px solid rgba(39, 242, 148, 0.25); border-radius: 10px; background: rgba(39, 242, 148, 0.05); }
    .wizard-transfer p { margin: 0; line-height: 1.45; }
    .wizard-transfer[hidden] { display: none; }

    .wizard-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
    .wizard-section-head .sub { margin: 0; }
    .wizard-list, .wizard-checks { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
    .wizard-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--card-bg); border: var(--border-subtle); border-radius: 12px; }
    .wizard-status { display: inline-flex; flex: none; margin-top: 8px; }
    .wizard-status .ico, .wizard-ready-head > .ico { margin: 0; width: 22px; height: 22px; }
    .wizard-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .wizard-row-title { font-weight: 700; word-break: break-word; }
    .wizard-row-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); margin-bottom: 4px; }
    .wizard-row-fields .meta-input, .wizard-row-fields .segment-select { min-height: 40px; font-size: var(--fs-sm); }
    .wizard-row-fields .segment-select { width: 100%; padding: 0 24px 0 8px; }
    .wizard-meta { color: var(--text-sub); font-size: var(--fs-sm); }
    .wizard-issue { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-sm); line-height: 1.4; }
    .wizard-issue .ico { margin: 2px 0 0; width: 1em; height: 1em; flex: none; }
    .wizard-remove { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: none; border-radius: 8px; color: var(--text-sub); cursor: pointer; }
    .wizard-remove:hover { background: #1c2530; color: #fff; }
    .wizard-remove .ico { margin: 0; }
    .wizard-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    /* Green = good, amber = needs a look, red = unusable. Icons and text carry the meaning as well. */
    .status-ok { color: var(--accent-green); }
    .status-warn { color: var(--accent-warning); }
    .status-error { color: #ff6b6b; }
    .wizard-issue.status-warn span, .wizard-issue.status-error span, .wizard-issue.status-error { color: var(--text-main); }
    .wizard-issue.status-warn .ico { color: var(--accent-warning); }

    .wizard-ready-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-2) 0; text-align: center; }
    .wizard-ready-head > .ico { width: 40px; height: 40px; }
    .wizard-ready-head h4 { color: var(--text-main); font-size: var(--fs-lg); }
    .wizard-ready-head .sub { margin: 0; }
    .wizard-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .wizard-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px; background: var(--card-bg); border: var(--border-subtle); border-radius: 12px; }
    .wizard-stat-value { font-size: var(--fs-lg); font-weight: 800; }
    .wizard-stat-label { color: var(--text-sub); font-size: var(--fs-xs); }
    .wizard-check { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--card-bg); border: var(--border-subtle); border-radius: 12px; }
    .wizard-check > .ico { margin: 2px 0 0; width: 20px; height: 20px; }
    .wizard-check div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .wizard-check strong { color: var(--text-main); font-size: var(--fs-sm); }
    .wizard-check span { color: var(--text-sub); font-size: var(--fs-sm); line-height: 1.4; }
    .wizard-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .wizard-choice { display: flex; flex-direction: column; gap: 4px; padding: 12px; text-align: left; background: var(--card-bg); color: var(--text-main); border: 1px solid var(--card-border); border-radius: 12px; cursor: pointer; font: inherit; }
    .wizard-choice span { color: var(--text-sub); font-size: var(--fs-xs); line-height: 1.4; }
    .wizard-choice[aria-pressed="true"] { border-color: var(--accent-green); background: rgba(49, 232, 144, 0.08); }

    @media (min-width: 700px) {
      .wizard-overlay { align-items: center; }
      .wizard { height: auto; max-height: 90dvh; border: var(--border-subtle); border-radius: 16px; }
      .wizard-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (max-width: 420px) {
      .wizard-row-fields { grid-template-columns: minmax(0, 1fr);         .wizard-ble { padding: 10px; }
        .wizard-ble .wizard-alt-actions .btn { flex-basis: 100%; }
        .wizard-ble .wizard-row { flex-wrap: wrap; }
        .wizard-ble .wizard-row .btn { width: 100%; }
      }
      .wizard-choices { grid-template-columns: minmax(0, 1fr); }
    }

    /* MATCH METADATA COMPACT BAR */
    .meta-row {
      display: grid;
      grid-template-columns: minmax(150px, 2fr) minmax(115px, 1fr) minmax(110px, 0.8fr) minmax(130px, 1fr);
      gap: 8px;
    }

    .meta-input {
      background: rgba(7, 13, 18, 0.76);
      color: var(--text-main);
      border: 1px solid var(--card-border);
      border-radius: 9px;
      padding: 10px 12px;
      font-size: 0.8em;
      width: 100%;
      box-sizing: border-box;
      transition: border-color 160ms ease, box-shadow 160ms ease;
    }
    .meta-input:focus { border-color: rgba(49, 232, 144, 0.75); box-shadow: 0 0 0 3px rgba(49, 232, 144, 0.1); outline: none; }
    .meta-input::placeholder { color: #738392; }
    .meta-row select.meta-input { color: var(--text-main); }
    .team-name-field { display: grid; flex: 1 1 190px; min-width: 0; gap: 5px; color: var(--text-sub); font-size: .75em; font-weight: 700; }
    .team-name-field .meta-input { font-size: 1em; }

    .file-status { display: inline-flex; align-items: center; gap: 8px; color: var(--text-sub); font-size: 0.75em; }
    .file-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #72808c; box-shadow: 0 0 0 3px rgba(114, 128, 140, 0.12); }
    .file-status[data-loaded="true"]::before { background: var(--accent-green); box-shadow: 0 0 0 3px rgba(49, 232, 144, 0.14), 0 0 12px rgba(49, 232, 144, 0.55); }
    .match-context-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--card-border); border-radius: 9px; background: rgba(7, 13, 18, 0.45); font-size: .75em; }
    .match-context-bar[hidden] { display: none; }
    .match-context-bar strong { color: #eef5f8; font-size: 1.05em; }
    .match-context-bar > span:not(.match-context-badge) { color: var(--text-sub); }
    .match-context-badge { padding: 3px 8px; border: 1px solid rgba(49,232,144,.24); border-radius: 12px; background: rgba(49,232,144,.07); color: #9ce9bd; font-weight: 750; }

    /* PLAYER BADGES */
    .player-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
    .p-badge {
      min-height: 32px;
      background: #18222d;
      color: var(--text-sub);
      border: 1px solid var(--card-border);
      padding: 2px 12px;
      border-radius: 16px;
      font-size: var(--fs-sm);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .p-badge.active { color: #fff; border-color: var(--accent-green); background: #1f3025; }
    .p-color { width: 8px; height: 8px; border-radius: 50%; }

    /* RESPONSIVE CARDS & TABLES */
    .card {
      background: var(--card-bg);
      border-radius: 16px;
      padding: 16px;
      margin-bottom: var(--space-3);
      border: var(--border-subtle);
    }
    .card > span:first-child { display: inline-block; color: #eef5f8; letter-spacing: -0.015em; }
    .season-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
    .season-heading-row h2, .season-heading-row h3 { margin: 0; color: #eef5f8; }
    .season-heading-row h2 { font-size: 1.15em; }
    .season-heading-row h3 { font-size: 0.98em; }
    .season-heading-row .sub { margin: 5px 0 0; }
    .season-actions, .season-filters { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
    .season-filters label { display: grid; gap: 5px; color: var(--text-sub); font-size: 0.75em; font-weight: 700; }
    .season-filters select { min-width: 140px; min-height: 38px; }
    .season-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
    .season-summary-item { flex: 1 1 135px; padding: 12px 14px; background: rgba(255,255,255,0.035); border: 1px solid var(--card-border); border-radius: 10px; }
    .season-summary-value { color: var(--accent-green); font-size: 1.1em; font-weight: 800; }
    .season-summary-label { margin-top: 3px; color: var(--text-sub); font-size: var(--fs-xs); }
    .season-chart-container { position: relative; height: 280px; margin-top: 12px; }
    .season-chart-container canvas { display: block; width: 100%; height: 100%; }
    .season-trend-note { margin: 10px 0 0; }
    .replay-controls { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
    .replay-controls label, .threshold-settings label { display: grid; gap: 5px; color: var(--text-sub); font-size: 0.75em; font-weight: 700; }
    .replay-controls select { min-height: 38px; min-width: 82px; }
    .replay-time { margin: 0 0 10px; font-variant-numeric: tabular-nums; }
    .replay-pitch { margin-top: 9px; }
    .replay-hint { margin: 7px 0 0; }
    .speed-chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .threshold-settings { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--card-border); border-radius: 10px; }
    .threshold-settings strong { font-size: 0.82em; }
    .threshold-settings input { width: 100%; box-sizing: border-box; min-height: 40px; }
    .threshold-settings output { color: var(--accent-green); font-variant-numeric: tabular-nums; }
    .season-empty-hint { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; margin: 0; text-align: center; pointer-events: none; }
    .season-empty-hint[hidden] { display: none; }
    .season-history-scroll { margin-top: 12px; }
    .season-history-table td:last-child { white-space: nowrap; }
    .season-history-table .season-delete-btn { min-height: 32px; padding: 0 10px; font-size: 0.75em; }
    
    .table-scroll-container {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-top: 8px;
      border-radius: 8px;
      border: 1px solid var(--card-border);
      scrollbar-color: #405261 #111a22;
      scrollbar-width: thin;
    }
    .table-scroll-container::-webkit-scrollbar { height: 9px; }
    .table-scroll-container::-webkit-scrollbar-track { background: #111a22; }
    .table-scroll-container::-webkit-scrollbar-thumb { background: #405261; border: 2px solid #111a22; border-radius: 8px; }
    .empty-state { display: flex; min-height: 132px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; text-align: center; white-space: normal; }
    .empty-state-icon { font-size: 1.5em; color: var(--accent-green); }
    .empty-state-icon .ico { margin-right: 0; }
    .empty-state-title { color: #e7eef2; font-size: 0.92em; font-weight: 750; }
    .empty-state-copy { max-width: 340px; color: var(--text-sub); font-size: 0.78em; line-height: 1.5; }
    .empty-state .btn { min-height: 36px; margin-top: 5px; }

    .squad-table { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: collapse; font-size: 0.8em; white-space: nowrap; }
    .squad-table th, .squad-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid #1a232e; }
    .squad-table th:nth-child(1), .squad-table td:nth-child(1) { width: 112px; }
    .squad-table th:nth-child(2), .squad-table td:nth-child(2) { width: 54px; }
    .squad-table th:nth-child(3), .squad-table td:nth-child(3) { width: 48px; }
    .squad-table th:nth-child(4), .squad-table td:nth-child(4) { width: 92px; }
    .squad-table th:nth-child(5), .squad-table td:nth-child(5) { width: 78px; }
    .squad-table th:nth-child(6), .squad-table td:nth-child(6) { width: 112px; }
    .squad-table th:nth-child(7), .squad-table td:nth-child(7) { width: 64px; }
    .squad-table th:nth-child(8), .squad-table td:nth-child(8) { width: 82px; }
    .squad-table th:nth-child(9), .squad-table td:nth-child(9) { width: 88px; }
    .squad-table th, .squad-table td { overflow: hidden; text-overflow: ellipsis; }
    .squad-table th { background: #0d1218; color: var(--text-sub); font-size: 0.85em; }
    .squad-table tbody tr { transition: background-color 140ms ease; }
    .squad-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
    .squad-table td { color: #dbe4ea; }

    /* Sticky Player Column for Mobile */
    .squad-table th:first-child, .squad-table td:first-child {
      position: sticky;
      left: 0;
      background: var(--card-bg);
      z-index: 2;
      border-right: 2px solid var(--card-border);
    }
    .squad-table th:first-child { background: #0d1218; }

    /* Metric Progress Bar Cell Backgrounds */
    .metric-cell-wrap { position: relative; display: flex; align-items: center; justify-content: space-between; min-width: 0; }
    .metric-bar-bg { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(0,230,118,0.12); border-radius: 4px; pointer-events: none; }

    /* PITCH CANVAS */
    .pitch-canvas { background: #0d1711; border: 1px solid #1e3023; border-radius: 8px; width: 100%; height: auto; display: block; }
    .pitch-orientation { display: flex; gap: 6px; margin-top: 8px; }
    .pitch-orientation button { min-height: 32px; padding: 0 10px; background: #18222d; color: var(--text-sub); border: 1px solid var(--card-border); border-radius: 6px; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
    .pitch-orientation button.active { color: var(--accent-green); border-color: var(--accent-green); background: rgba(0, 230, 118, 0.1); }
    .heatmap-mode-toggle { display: flex; gap: 6px; margin-top: 10px; }
    .heatmap-mode-toggle button { min-height: 32px; padding: 0 10px; background: #18222d; color: var(--text-sub); border: 1px solid var(--card-border); border-radius: 6px; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
    .heatmap-mode-toggle button.active { color: var(--accent-green); border-color: var(--accent-green); background: rgba(0, 230, 118, 0.1); }
    .comparison-pitch-controls, .pitch-zone-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
    .comparison-pitch-controls > label, .pitch-zone-controls > label { display: flex; align-items: center; gap: 6px; color: var(--text-sub); font-size: 0.75em; font-weight: 700; }
    .comparison-pitch-controls .segment-select { width: auto; min-width: 110px; max-width: 150px; padding: 6px 24px 6px 8px; font-size: var(--fs-xs); }
    .comparison-color-key { display: inline-flex; width: 19px; height: 19px; align-items: center; justify-content: center; border-radius: 50%; font-size: var(--fs-xs); font-weight: 800; }
    .comparison-color-a { color: #06131d; background: #68c7ff; }
    .comparison-color-b { color: #062015; background: #31e890; }
    .pitch-zone-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin-top: 8px; }
    .pitch-zone-grid[hidden] { display: none; }
    .pitch-zone-grid button { min-height: 39px; padding: 4px 2px; color: #d5e2dc; background: rgba(16, 43, 29, 0.84); border: 1px solid rgba(134, 189, 156, 0.42); border-radius: 4px; font-size: var(--fs-xs); line-height: 1.25; cursor: pointer; }
    .pitch-zone-grid button.active { color: #082417; background: var(--accent-green); border-color: var(--accent-green); font-weight: 800; }
    .pitch-zone-grid button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
    .pitch-zone-results { margin-top: 12px; }
    .pitch-zone-results[hidden] { display: none; }
    .pitch-zone-results > strong { display: block; margin-bottom: 7px; color: #fff; font-size: 0.84em; }
    .pitch-zone-results .sub { margin: 8px 0 0; line-height: 1.45; }
    .pitch-zone-table th, .pitch-zone-table td { padding: 6px 5px; font-size: 0.75em; }
    .comparison-card { margin-top: 16px; }
    .left-col .comparison-card { margin-top: 0; }
    .left-col .comparison-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .left-col .comparison-radar-container svg { max-width: 460px; margin: 0 auto; }
    .comparison-radar-container svg:empty { display: none; }
    .comparison-radar-container #comparisonEmptyState { margin: 12px 0; }
    .comparison-heading h3 { margin: 0; }
    .comparison-heading .sub { margin: 5px 0 0; }
    .comparison-selectors { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 4px; }
    .comparison-selectors label { display: grid; gap: 5px; min-width: 150px; color: var(--text-sub); font-size: 0.75em; font-weight: 700; }
    .comparison-selectors .segment-select { min-width: 170px; }
    .comparison-layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(300px, 1.3fr); align-items: center; gap: 18px; }
    .comparison-radar-container { position: relative; min-width: 0; }
    .comparison-radar-container svg { display: block; width: 100%; height: auto; overflow: visible; }
    .comparison-radar-grid { fill: none; stroke: rgba(186, 203, 214, 0.2); stroke-width: 1.25; }
    .comparison-radar-axis { stroke: rgba(186, 203, 214, 0.3); stroke-width: 1.25; }
    .comparison-radar-label { fill: #c3d0d9; font: 600 14px system-ui, sans-serif; }
    .comparison-radar-label-missing { fill: #9aaab6; }
    .comparison-radar-value-a { fill: rgba(104, 199, 255, 0.23); stroke: #68c7ff; }
    .comparison-radar-value-b { fill: rgba(49, 232, 144, 0.2); stroke: #31e890; }
    .comparison-radar-value-a, .comparison-radar-value-b { stroke-width: 3; stroke-linejoin: round; }
    .comparison-radar-point-a { fill: #68c7ff; stroke: #10202b; stroke-width: 2; }
    .comparison-radar-point-b { fill: #31e890; stroke: #10251b; stroke-width: 2; }
    .comparison-radar-legend { font: 700 13px system-ui, sans-serif; }
    .comparison-radar-note { fill: #9aaab6; font: 11px system-ui, sans-serif; }
    .comparison-radar-container .sub { text-align: center; }
    .comparison-table { min-width: 0; table-layout: auto; white-space: normal; }
    .comparison-table th, .comparison-table td { width: auto !important; }
    .comparison-table th:not(:first-child), .comparison-table td:not(:first-child) { width: 28% !important; text-align: right; }
    .comparison-table th, .comparison-table td { padding: 7px 6px; }
    .comparison-table tbody td:first-child { font-weight: 700; }
    .comparison-layout > .table-scroll-container > .sub { line-height: 1.45; }
    .modal-card.report-options-card { width: min(92vw, 520px); max-width: 520px; }
    .report-options-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
    .report-options-heading h2 { margin: 0; }
    .report-options-heading .sub { margin: 5px 0 0; line-height: 1.45; }
    .report-option { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid var(--card-border); color: var(--text-main); font-size: 0.88em; cursor: pointer; }
    .report-option input, .comparison-pitch-controls input, .pitch-zone-controls input { accent-color: var(--accent-green); }
    .report-options-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
    .modal-overlay[hidden] { display: none; }
    button[hidden] { display: none !important; }
    .pitch-legend { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; color: var(--text-sub); font-size: var(--fs-xs); }
    .pitch-legend-gradient { width: 92px; height: 7px; border-radius: 5px; background: linear-gradient(90deg, #164dff, #00c978, #ffe600, #ff3030); }
    .pitch-legend-note { margin-top: 4px; text-align: right; color: var(--text-sub); font-size: var(--fs-xs); line-height: 1.4; }
    .heatmap-setting-check { display: flex; align-items: center; gap: 8px; font-size: 0.8em; color: var(--text-sub); }
    .gps-boundary-summary, .heatmap-interval { margin-top: 6px; color: var(--text-sub); font-size: var(--fs-xs); line-height: 1.45; }
    .heatmap-interval { color: var(--accent-green); font-weight: 700; }
    .heatmap-window-select, .timeline-playback-speed { display: flex; align-items: center; gap: 8px; color: var(--text-sub); font-size: var(--fs-xs); font-weight: 700; }
    .timeline-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 8px; }
    .timeline-controls > label { display: grid; gap: 4px; min-width: 90px; color: var(--text-sub); font-size: var(--fs-xs); font-weight: 700; }
    .timeline-controls .btn { min-height: 40px; }
    .timeline-time-input { width: 92px; min-height: 40px; box-sizing: border-box; }
    .timeline-keyboard-hint { margin-top: 5px; }
    .timeline-playback-speed { margin-top: 8px; }
    .session-type-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; font-size: 0.8em; color: var(--text-sub); }
    .session-type-row label:not(.heatmap-setting-check) { display: flex; align-items: center; gap: 8px; }
    .heatmap-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
    .team-logo-tools { color: var(--text-sub); font-size: .78em; }
    .team-logo-tools > summary { display: flex; width: fit-content; align-items: center; gap: 6px; margin-top: 8px; cursor: pointer; font-weight: 750; }
    .team-settings-icon { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border: 1px solid var(--card-border); border-radius: 5px; color: var(--text-sub); font-size: .78em; }
    .team-logo-tools[open] > summary .team-settings-icon { color: var(--accent-green); border-color: var(--accent-green); }
    .team-logo-tools-content { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border: 1px solid var(--card-border); border-radius: 10px; background: rgba(255,255,255,.025); }
    .team-unit-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-sub); font-size: .78em; font-weight: 700; }
    .team-logo-actions, .team-logo-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .team-logo-actions .btn, .team-logo-search .btn { min-height: 36px; font-size: .8em; }
    .team-logo-search .meta-input { flex: 1 1 190px; min-width: 0; }
    .team-logo-guidance { margin: 0; line-height: 1.45; }
    .team-logo-preview-wrap { display: flex; align-items: center; gap: 10px; min-height: 44px; }
    .team-logo-preview { width: 76px; height: 52px; padding: 3px; border: 1px solid var(--card-border); border-radius: 6px; object-fit: contain; background-color: #18222d; background-image: linear-gradient(45deg, #293641 25%, transparent 25%), linear-gradient(-45deg, #293641 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #293641 75%), linear-gradient(-45deg, transparent 75%, #293641 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0; }
    .team-logo-preview[hidden] { display: none; }
    .heatmap-settings-anchor { position: relative; }
    .heatmap-settings-button { min-width: 36px; min-height: 32px; padding: 0 8px; background: #18222d; color: var(--text-sub); border: 1px solid var(--card-border); border-radius: 7px; font-size: 1em; cursor: pointer; }
    .heatmap-settings-button[aria-expanded="true"] { color: var(--accent-green); border-color: var(--accent-green); }
    .heatmap-settings { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: min(360px, calc(100vw - 64px)); padding: 16px; border: 1px solid #344554; border-radius: 12px; background: #111a22; box-shadow: 0 16px 40px rgba(0,0,0,.48); }
    .heatmap-settings[hidden] { display: none; }
    .heatmap-setting { display: block; margin-bottom: 13px; color: var(--text-sub); font-size: .78em; }
    .heatmap-setting-heading { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
    .heatmap-setting-value, .heatmap-touch-count { color: var(--accent-green); font-variant-numeric: tabular-nums; }
    .heatmap-setting input[type="range"] { width: 100%; accent-color: #10b98a; }
    .heatmap-setting select { width: 100%; min-height: 38px; padding: 0 9px; background: #1c2937; color: var(--text-main); border: 1px solid #344554; border-radius: 7px; }
    .heatmap-touch-count { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--card-border); font-size: .78em; font-weight: 700; }
    .heatmap-settings-title { margin-bottom: 12px; color: var(--text-main); font-size: .9em; font-weight: 800; }
    .highlight-disclosure { overflow: hidden; }
    .highlight-disclosure summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
    .highlight-disclosure summary::-webkit-details-marker { display: none; }
    .highlight-disclosure summary::after { content: ""; width: 7px; height: 7px; margin-right: 3px; border-right: 2px solid var(--text-sub); border-bottom: 2px solid var(--text-sub); transform: rotate(45deg) translateY(-2px); transition: transform 150ms ease; }
    .highlight-disclosure[open] summary::after { transform: rotate(225deg) translateY(-2px); }
    .highlight-disclosure .highlight-disclosure-title { color: #eef5f8; font-size: .9em; font-weight: 800; }
    .highlight-disclosure .highlight-disclosure-content { padding-top: 10px; }
    .advanced-metrics-disclosure, .device-schema-disclosure { margin-top: 10px; color: var(--text-sub); font-size: .78em; }
    .advanced-metrics-disclosure > summary, .device-schema-disclosure > summary { cursor: pointer; font-weight: 750; }
    .advanced-metrics-content { padding-top: 8px; }
    .advanced-metrics-table { min-width: 560px; }
    .advanced-metrics-table th:first-child, .advanced-metrics-table td:first-child { width: 130px; }
    .advanced-metrics-table th:not(:first-child), .advanced-metrics-table td:not(:first-child) { width: 110px; }
    .device-schema-disclosure { padding: 9px 10px; border: 1px solid var(--card-border); border-radius: 8px; background: rgba(255,255,255,.02); }
    .device-schema-disclosure .sub { margin: 8px 0 0; line-height: 1.55; }
    .device-schema-disclosure code, .chart-data-hint code { color: #9ae9d1; font-size: .95em; }
    .tactical-overlay-controls { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--card-border); }
    .tactical-overlay-controls .heatmap-settings-title { margin: 0; }
    .tactical-overlay-controls label { display: flex; align-items: center; gap: 8px; color: var(--text-sub); font-size: .78em; cursor: pointer; }
    .tactical-overlay-controls input { accent-color: var(--accent-green); }
    .chart-data-hint { margin: 7px 0 0; font-size: .72em; }
    .highlight-count { flex: 0 0 auto; padding: 6px 9px; border: 1px solid rgba(49,232,144,0.28); border-radius: 20px; background: rgba(49,232,144,0.08); color: #85ecb3; font-size: var(--fs-xs); font-weight: 850; letter-spacing: 0.06em; }
    .highlight-disclaimer { margin: 10px 0 12px; padding: 9px 11px; border-left: 2px solid #d9aa55; border-radius: 0 7px 7px 0; background: rgba(217,170,85,0.07); color: #c6b48e; font-size: var(--fs-xs); line-height: 1.45; }
    .highlight-list { display: grid; gap: 8px; }
    .highlight-empty { padding: 16px 12px; border: 1px dashed rgba(153,176,187,0.2); border-radius: 10px; color: var(--text-sub); font-size: 0.78em; line-height: 1.5; text-align: center; }
    .highlight-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; width: 100%; padding: 12px; border: 1px solid rgba(153,176,187,0.16); border-radius: 11px; background: rgba(255,255,255,0.025); color: var(--text-main); text-align: left; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, transform 150ms ease; }
    .highlight-item:hover { border-color: rgba(49,232,144,0.45); background: rgba(49,232,144,0.055); transform: translateY(-1px); }
    .highlight-item-title { font-size: 0.83em; font-weight: 800; }
    .highlight-item-meta { grid-column: 1; color: var(--text-sub); font-size: var(--fs-xs); }
    .highlight-item-time { grid-column: 2; grid-row: 1 / span 2; color: var(--accent-green); font-size: 0.82em; font-weight: 850; font-variant-numeric: tabular-nums; }
    .highlight-item:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; }

    /* DESKTOP KPI SUMMARY STAT CARDS */
    .desktop-kpi-bar { display: none; }
    .kpi-card {
      background: linear-gradient(135deg, #0d161d 0%, #121e28 100%);
      border: 1px solid var(--card-border);
      border-radius: 999px;
      padding: 8px 18px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0;
    }
    .kpi-title { font-size: var(--fs-xs); font-weight: 800; color: var(--accent-blue); letter-spacing: 0.08em; text-transform: uppercase; }
    .kpi-value { font-size: var(--fs-lg); font-weight: 800; color: #ffffff; margin-top: 1px; font-variant-numeric: tabular-nums; }

    /* PLAYER MATCHDAY CARD */
    .card-wrapper { display: flex; justify-content: center; padding: 4px 0; }
    
    @keyframes cyber-shift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .card-shield-frame {
      width: min(100%, 560px);
      min-height: 210px;
      position: relative;
      border: 1px solid rgba(0, 242, 254, 0.45);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 0 35px rgba(0, 242, 254, 0.14);
    }

    .smooth-fc-shield {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      border-radius: inherit;
    }

    .pro-card-body {
      width: 100%;
      height: 100%;
      min-height: 210px;
      background: linear-gradient(135deg, #111b2c 0%, #101729 48%, #190f2b 100%);
      padding: 22px;
      box-sizing: border-box;
      color: #fff;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 24px;
    }

    .cyber-foil-layer {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(0, 242, 254, 0.35) 0%, rgba(147, 51, 234, 0.4) 40%, rgba(236, 72, 153, 0.35) 70%, rgba(0, 242, 254, 0.35) 100%);
      background-size: 300% 300%;
      animation: cyber-shift 5s ease infinite;
      pointer-events: none;
      mix-blend-mode: color-dodge;
      opacity: 0.8;
    }

    .cyber-grid-overlay {
      position: absolute;
      inset: 0;
      opacity: 0.2;
      background-image: radial-gradient(#00f2fe 1px, transparent 1px);
      background-size: 10px 10px;
      pointer-events: none;
    }

    .shield-border-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 20;
      filter: drop-shadow(0 0 8px rgba(0,242,254,0.6));
    }

    .card-player-identity { position: relative; z-index: 10; text-align: center; }
    .player-card-team-logo { position: absolute; z-index: 10; top: 12px; left: 14px; width: auto; height: auto; max-width: 90px; max-height: 74px; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0,0,0,.55)); }
    .player-card-team-logo[hidden] { display: none; }
    .card-player-name { color: #fff; font-size: clamp(1.15em, 4vw, 1.6em); font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; overflow-wrap: anywhere; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
    .card-player-position { display: inline-block; margin-top: 7px; padding: 4px 12px; border: 1px solid rgba(0,242,254,0.45); border-radius: 20px; color: #8beaf0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; }
    .card-bottom-section { position: relative; z-index: 10; }
    .card-metrics-bar {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      text-align: center;
      background: rgba(0, 0, 0, 0.65);
      border: 1px solid rgba(0, 242, 254, 0.4);
      border-radius: 8px;
      padding: 12px 8px;
      backdrop-filter: blur(8px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    }

    .card-stat-col { display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .card-stat-label { font-size: var(--fs-xs); font-weight: 800; color: #a9b8c7; letter-spacing: 0.04em; }
    .card-stat-value { font-size: clamp(0.85rem, 3.2vw, 1.25rem); font-weight: 900; margin-top: 4px; white-space: nowrap; }

    @media (max-width: 420px) {
      .pro-card-body { padding: 18px 12px; gap: 18px; }
      .card-metrics-bar { gap: 4px; padding: 10px 4px; }
      .card-stat-label { font-size: 0.7rem; letter-spacing: 0; }
    }

    /* Hidden Embed Canvas for Image Generation compatibility */
    .card-heatmap-canvas { display: none; }

    .chart-container { position: relative; height: 160px; width: 100%; margin-top: 8px; }
    .chart-container canvas { display: block; width: 100%; height: 100%; }

    /* SEGMENT TIMELINE BAR */
    .segment-bar-container { position: relative; height: 36px; width: 100%; border-radius: 6px; overflow: hidden; margin: 10px 0 0; background: #0c0f12; border: 1px solid var(--card-border); cursor: crosshair; touch-action: pan-y; }
    .segment-bar-container:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; }
    .segment-block { display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: bold; color: #fff; text-shadow: 0 1px 2px #000; position: relative; border-right: 1px solid rgba(255,255,255,0.2); cursor: pointer; }
    .segment-block.is-selected { z-index: 1; filter: brightness(1.2); outline: 2px solid #fff; outline-offset: -2px; box-shadow: inset 0 0 12px rgba(255,255,255,0.35), 0 0 8px rgba(0,230,118,0.65); }
    .segment-block:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
    .seg-match { background: rgba(0, 230, 118, 0.4); border-bottom: 3px solid var(--accent-green); }
    /* Excluded time uses a diagonal hatch as well as red, so meaning does not rely on colour alone. */
    .seg-excluded { background: repeating-linear-gradient(135deg, rgba(239,68,68,0.34) 0 6px, rgba(239,68,68,0.12) 6px 12px); border-bottom: 3px solid var(--accent-red); opacity: 0.8; }
    .segment-gap { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, #272d35, #272d35 5px, #171c22 5px, #171c22 10px); color: #cbd5e1; font-size: var(--fs-xs); font-weight: bold; overflow: hidden; white-space: nowrap; }
    .timeline-playhead { position: absolute; z-index: 4; top: 0; bottom: 0; left: 0; width: 2px; background: #fff; box-shadow: 0 0 5px #000; pointer-events: none; }
    .timeline-playhead::before { content: ""; position: absolute; top: 0; left: 50%; width: 10px; height: 10px; transform: translateX(-50%); border-radius: 50%; background: #fff; }
    .segment-trim-handle { position: absolute; z-index: 5; top: 0; bottom: 0; width: 16px; padding: 0; border: 0; transform: translateX(-50%); background: transparent; cursor: col-resize; touch-action: none; }
    .segment-trim-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: rgba(255,214,0,0.72); box-shadow: 0 0 4px rgba(0,0,0,0.8); }
    .segment-trim-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 8px; transform: translate(-50%,-50%); border-radius: 2px; background: repeating-linear-gradient(to bottom, #fff 0 1px, transparent 1px 3px); filter: drop-shadow(0 1px 1px #000); }
    .segment-trim-handle:hover::before, .segment-trim-handle:focus-visible::before { width: 4px; background: #ffe55c; }
    .segment-trim-handle:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
    .timeline-trim-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 5px; color: var(--text-sub); font-size: var(--fs-xs); }
    .timeline-trim-legend strong { color: var(--accent-gold); }
    .timeline-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
    .timeline-snap-button { min-height: 30px; padding: 0 9px; font-size: var(--fs-xs); white-space: nowrap; }
    .timeline-readout, .timeline-time-scale { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-sub); font-size: var(--fs-xs); }
    .timeline-readout { margin-top: 10px; }
    .timeline-readout strong { color: var(--accent-green); font-variant-numeric: tabular-nums; }
    .timeline-time-scale { padding: 0 2px; font-variant-numeric: tabular-nums; }
    .timeline-time-scale span:nth-child(2) { text-align: center; }
    .timeline-time-scale span:last-child { text-align: right; }

    .segment-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
    .segment-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #18222d; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--card-border); font-size: 0.8em; }
    .segment-item.is-selected { border-color: var(--accent-green); box-shadow: 0 0 0 1px rgba(0,230,118,0.2); }
    .segment-item-controls { display: flex; gap: 6px; align-items: center; }
    .segment-toggle-btn { min-height: 32px; padding: 0 8px; font-size: 0.75em; white-space: nowrap; }
    .segment-select { background: #0c0f12; color: var(--accent-green); border: 1px solid var(--card-border); border-radius: 4px; padding: 4px; font-size: 0.85em; }

    .slider-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
    input[type=range] { flex-grow: 1; accent-color: var(--accent-green); height: 8px; }

    .step-btn {
      min-width: 44px;
      min-height: 44px;
      background: #1e2a38;
      color: var(--accent-green);
      border: 1px solid var(--card-border);
      border-radius: 8px;
      font-weight: bold;
      font-size: 1em;
      cursor: pointer;
    }

    /* ERGONOMIC BOTTOM NAVIGATION BAR */
    .bottom-nav {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      height: calc(64px + env(safe-area-inset-bottom, 0px));
      background: rgba(8, 17, 24, 0.94);
      border-top: 1px solid rgba(123, 149, 163, 0.2);
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 1000;
      padding: env(safe-area-inset-bottom, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
      box-sizing: border-box;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--text-sub);
      font-size: var(--fs-xs);
      font-weight: 700;
      background: transparent;
      border: none;
      height: 100%;
      min-height: var(--touch-min);
      cursor: pointer;
      gap: 3px;
    }

    .nav-item.active { color: var(--accent-green); box-shadow: inset 0 2px 0 var(--accent-green); background: linear-gradient(180deg, rgba(39, 242, 148, 0.10), transparent); }
    .nav-item { transition: color 150ms ease, transform 150ms ease; }
        .nav-icon { font-size: 1.2em; }

    /* TOAST NOTIFICATION SYSTEM */
    .toast-container {
      position: fixed;
      bottom: calc(76px + env(safe-area-inset-bottom, 0px));
      max-width: calc(100vw - 24px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 3000;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
    }

    .toast {
      background: #182533;
      color: #fff;
      border: 1px solid var(--accent-green);
      padding: 10px 16px;
      border-radius: 20px;
      font-size: 0.8em;
      font-weight: bold;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
      animation: fadeInOut 3s forwards;
    }

    .wizard-spinner {
      display: inline-block;
      width: 1em;
      height: 1em;
      margin-right: var(--space-1);
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      vertical-align: -0.15em;
      animation: wizard-spin 0.8s linear infinite;
    }
    @keyframes wizard-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .wizard-spinner { animation-duration: 2.4s; } }
    @keyframes fadeInOut {
      0% { opacity: 0; transform: translateY(10px); }
      15% { opacity: 1; transform: translateY(0); }
      85% { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(-10px); }
    }

    .info-btn { background: rgba(0, 230, 118, 0.15); border: 1px solid var(--accent-green); color: var(--accent-green); border-radius: 50%; width: 18px; height: 18px; font-size: var(--fs-xs); font-weight: bold; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; margin-left: 3px; }
    .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 2500; justify-content: center; align-items: center; }
    .modal-card { background: var(--card-bg); border: 1px solid var(--accent-green); border-radius: 12px; width: 85%; max-width: 320px; padding: 16px; }
    .edit-icon-btn { background: transparent; border: none; color: var(--text-sub); cursor: pointer; font-size: 0.9em; }

    @media (max-width: 640px) {
      /* Collapsible cards: the first child is the tap-to-toggle header */
      .card-collapse-head { position: relative; padding-right: 28px; cursor: pointer; min-height: 28px; }
      .card-collapse-head::after {
        content: ''; position: absolute; right: 0; top: 50%; width: 18px; height: 18px; background: var(--text-sub);
        transform: translateY(-50%) rotate(180deg); transition: transform 160ms ease;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
      }
      .card.is-collapsed > .card-collapse-head::after { transform: translateY(-50%); }
      .card.is-collapsed > :not(.card-collapse-head) { display: none !important; }
      .card-collapse-head:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 4px; border-radius: 6px; }
    }

    @media (max-width: 640px) {
      body { padding: calc(12px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) calc(88px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px)); }
      .header-card { padding: 10px 12px; border-radius: 14px; margin-bottom: 14px; gap: 8px; }
      .header-top-row { align-items: center; }
      .header-top-row > div { min-width: 0; }
      .header-top-row .btn { white-space: nowrap; }
      .meta-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
      .meta-row .meta-input:first-child { grid-column: 1 / -1; }
      .meta-row .meta-input, .meta-row .btn { min-height: 40px; }
      .card { padding: 16px 14px; border-radius: 14px; }
      .season-chart-container { height: 240px; }
      .season-actions { width: 100%; }
      .season-actions .btn { flex: 1; }
      .season-filters { width: 100%; }
      .season-filters label { flex: 1; min-width: 0; }
      .season-filters select { width: 100%; min-width: 0; }
      .replay-controls { align-items: stretch; }
      .replay-controls label { flex: 1; min-width: 110px; }
      .timeline-readout { align-items: flex-start; flex-direction: column; gap: 2px; }
      .timeline-heading { align-items: flex-start; flex-direction: column; }
      .segment-item { align-items: flex-start; flex-direction: column; }
      .segment-item-controls { width: 100%; }
      .segment-item-controls .segment-select { flex: 1; min-width: 0; }
      .comparison-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; }
      .comparison-selectors { gap: 8px; }
      .comparison-selectors label { flex: 1; min-width: 0; }
      .comparison-selectors .segment-select { width: 100%; min-width: 0; }
      .comparison-pitch-controls .segment-select { flex: 1; min-width: 0; max-width: none; }
      .pitch-zone-grid button { min-height: 43px; font-size: 0.7rem; }
      .timeline-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .timeline-controls > * { min-width: 0; }
      .timeline-controls .btn { padding-inline: 8px; }
      .timeline-controls select, .timeline-controls input { width: 100%; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    }

    /* ======================================================== */
    /*  DESKTOP GRID OVERRIDES (Applies on screens >= 1024px)   */
    /* ======================================================== */
    @media (min-width: 1024px) {
      .bottom-nav { display: none !important; }
      .desktop-nav-tabs { display: flex !important; }

      .desktop-kpi-bar {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 16px;
      }

      .desktop-grid-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); /* Left matrix vs Right analytics */
        gap: 20px;
        align-items: start;
      }

      .desktop-view-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 20px;
        align-items: start;
      }

      .desktop-view-layout > .card,
      .desktop-view-side-column {
        min-width: 0;
      }

      .desktop-view-layout > .card,
      .desktop-view-side-column > .card {
        margin-bottom: 0;
      }

      .desktop-view-side-column {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .desktop-bottom-analytics {
        display: grid !important;
        grid-template-columns: 290px 1fr;
        gap: 16px;
        align-items: stretch;
      }

      .desktop-bottom-analytics .card {
        margin-bottom: 0;
      }

      body { padding-bottom: 24px; }
      .welcome { padding-top: 24px; }
    }
/* TacticPod IQ logo mark. */
.tacticpod-logo { display: inline-block; width: 1.8em; height: 1.8em; margin-right: .4em; vertical-align: -.5em; flex: none; filter: drop-shadow(0 0 6px rgba(56, 217, 255, .35)); }

/* Subtle logo watermark */
body::after { content: ""; position: fixed; right: -80px; bottom: -80px; width: 420px; height: 420px; background: url("icons/tacticpod-logo.svg") center / contain no-repeat; opacity: .04; pointer-events: none; z-index: 0; }

/* ======================================================== */
/*  PERFORMANCE CENTRE REDESIGN: header, welcome, a11y      */
/* ======================================================== */
.ico-folder { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.ico-chevron-right { transform: rotate(-90deg); margin-right: 0; }
.tacticpod-logo { width: 1.6em; height: 1.6em; filter: none; }
.session-menu-toggle .ico:last-child { margin: 0 0 0 -2px; width: 1em; height: 1em; }
.header-top-row .session-menu-toggle .ico:first-child { margin-right: 0; }
.status-row { display: flex; align-items: center; }
.ble-connection { flex-wrap: wrap; gap: 8px; }
.team-logo-tools:not([open]) { display: none; }
.team-logo-tools > summary { margin-top: 0; min-height: var(--touch-min); align-items: center; }
.desktop-tab-btn { min-height: var(--touch-min); display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; }
.desktop-tab-btn .ico { margin-right: 0; }
.card, .kpi-card { border-radius: 16px; }

/* Welcome / empty state */
.welcome { max-width: 720px; margin: 0 auto; padding: 16px 0 8px; display: flex; flex-direction: column; gap: 20px; }
.welcome[hidden] { display: none; }
.welcome-intro { text-align: center; }
.welcome h1 { margin: 0 0 8px; font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; }
.welcome-intro p { margin: 0 auto; max-width: 460px; color: var(--text-sub); font-size: var(--fs-md); line-height: 1.5; }

.import-panel {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 32px 20px; border-radius: 20px;
  border: 1.5px dashed rgba(39, 242, 148, 0.45);
  background: linear-gradient(180deg, rgba(39, 242, 148, 0.09), rgba(39, 242, 148, 0.03)), var(--card-bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
.import-panel-icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(39, 242, 148, 0.14); color: var(--accent-green); font-size: 1.6rem;
  border: 1px solid rgba(39, 242, 148, 0.3);
}
.import-panel-icon .ico { margin: 0; }
.import-panel h2 { margin: 4px 0 0; font-size: var(--fs-lg); }
.import-panel p { margin: 0; max-width: 420px; color: var(--text-sub); font-size: var(--fs-sm); line-height: 1.5; }
.btn-import { min-height: 52px; min-width: min(260px, 100%); font-size: 1rem; border-radius: 14px; margin-top: 6px; box-shadow: 0 6px 18px rgba(39, 242, 148, 0.22); }
.btn-outline { background: transparent; color: var(--text-main); border: 1px solid rgba(39, 242, 148, 0.45); text-decoration: none; min-width: min(260px, 100%); border-radius: 14px; box-sizing: border-box; }
.btn-outline:hover { background: rgba(39, 242, 148, 0.08); }
.btn-primary:hover { box-shadow: 0 6px 18px rgba(39, 242, 148, 0.2); }

.workflow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; position: relative; }
.workflow-steps li { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; position: relative; }
.workflow-steps li:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: calc(50% + 28px); width: calc(100% - 56px); height: 1px; background: rgba(123, 149, 163, 0.28); }
.step-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); border: 1px solid rgba(39, 242, 148, 0.35); color: var(--accent-green); }
.step-icon .ico { margin: 0; }
.step-label { font-size: var(--fs-xs); font-weight: 700; color: var(--text-main); }

.previous-sessions {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; box-sizing: border-box;
  background: var(--card-bg); border: var(--border-subtle); border-radius: 16px; color: var(--text-main);
  font: inherit; text-align: left; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease;
}
.previous-sessions:hover { border-color: rgba(39, 242, 148, 0.4); background: var(--surface-2); }
.previous-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(39, 242, 148, 0.12); color: var(--accent-green); }
.previous-icon .ico { margin: 0; }
.previous-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.previous-text strong { font-size: var(--fs-sm); }
.previous-text small { color: var(--text-sub); font-size: var(--fs-xs); line-height: 1.4; }
.previous-sessions .ico-chevron-right { color: var(--text-sub); flex: none; }

@media (max-width: 400px) {
  .import-panel { padding: 24px 14px; }
  .workflow-steps li:not(:last-child)::after { display: none; }
  .step-icon { width: 40px; height: 40px; }
  .session-menu-label { display: none; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .welcome { gap: 14px; }
  .import-panel { padding: 18px 16px; }
}

/* Focus visibility on non-form controls */
summary:focus-visible, a:focus-visible, .nav-item:focus-visible, .desktop-tab-btn:focus-visible, .previous-sessions:focus-visible, .session-menu-list button:focus-visible {
  outline: 2px solid var(--accent-green); outline-offset: 2px;
}
.nav-item:focus-visible { outline-offset: -4px; }
html, body { overflow-x: hidden; }

/* ---- TPX3 import: session picker and GPS map / pitch calibration (inside the import wizard) ---- */
.tpx3-session-label { display: flex; flex-direction: column; gap: 4px; margin: var(--space-2) 0; color: var(--text-sub); font-size: var(--fs-xs); }
.tpx3-session { width: 100%; max-width: 100%; }
.pm-host { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.pm-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.pm-tab { flex: 1 1 0; min-width: 96px; min-height: 40px; padding: 8px 10px; border: var(--border-subtle); border-radius: 10px; background: transparent; color: var(--text-sub); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.pm-tab.is-active { color: var(--text-main); border-color: var(--accent-green); font-weight: 700; }
.pm-tab:disabled { opacity: 0.45; cursor: not-allowed; }
.pm-stage { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: #101820; }
.pm-canvas { display: block; width: 100%; touch-action: none; cursor: grab; }
.pm-zoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; }
.pm-zoom button { width: 36px; height: 36px; border: none; border-radius: 8px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 18px; cursor: pointer; }
.pm-attribution { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 10px; line-height: 1.4; }
.pm-panel { display: flex; flex-direction: column; gap: var(--space-2); }
.pm-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; }
.pm-row [aria-pressed="true"] { border-color: var(--accent-green); }
.pm-fields label { display: flex; flex-direction: column; gap: 4px; color: var(--text-sub); font-size: var(--fs-xs); flex: 1 1 110px; }
.pm-fields .meta-input { width: 100%; }
.pm-zoom[hidden], .pm-attribution[hidden] { display: none; }