/* Imported from Multisport-breaker/style.css. Dark "lab" theme
       preserved as a designed contrast inside the brand chrome.
       Selectors scoped under .msbreaker-host. */
    .msbreaker-host {
      --bg-page: #050712;
      --bg-card: #0d101f;
      --bg-card-alt: #111427;
      --bg-table-header: #151933;
      --bg-table-row: #0f1224;
      --bg-table-row-alt: #14172a;
      --border-soft: #262a40;
      --text-main: #f5f6ff;
      --text-muted: #9aa0c2;
      --accent: #FA773C;
      --accent-soft: rgba(250, 119, 60, 0.18);
      --accent-strong: #FA773C;
      --danger: #ff5b7a;
      --warning: #ffc857;
      --font-main: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;

      background: radial-gradient(circle at top, #14172a 0, #050712 55%);
      color: var(--text-main);
      font-family: var(--font-main);
      border-radius: 14px;
      padding: 4px;
      box-shadow: 0 18px 40px rgba(2, 6, 23, 0.18);
    }
    .msbreaker-host *, .msbreaker-host *::before, .msbreaker-host *::after { box-sizing: border-box; }
    .msbreaker-host h1, .msbreaker-host h2, .msbreaker-host h3, .msbreaker-host h4, .msbreaker-host p, .msbreaker-host ul { margin: 0; padding: 0; }

    .msbreaker-host .page { display: flex; align-items: flex-start; justify-content: center; padding: 20px 12px; }

    .msbreaker-host .tool-card {
      width: 100%; max-width: 1120px;
      background: linear-gradient(145deg, var(--bg-card), #070916);
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      box-shadow: 0 28px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02);
      padding: 24px 26px 28px;
    }

    .msbreaker-host .tool-header { margin-bottom: 20px; border-bottom: 1px solid var(--border-soft); padding-bottom: 12px; }
    .msbreaker-host .tool-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .msbreaker-host .tool-title { font-size: 1.6rem; font-weight: 650; letter-spacing: 0.01em; margin: 0; color: #f8fafc; }
    .msbreaker-host .tool-subtitle { margin: 6px 0 0; font-size: 0.92rem; color: var(--text-muted); }
    .msbreaker-host .tool-subtitle code { background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
    .msbreaker-host .version-tag {
      display: inline-block; background: var(--accent-soft); color: var(--accent);
      font-size: 0.72rem; font-weight: 600; padding: 1px 6px; border-radius: 4px;
      margin-left: 4px; vertical-align: middle;
    }

    .msbreaker-host .lab-tag {
      display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
      border-radius: 999px;
      background: radial-gradient(circle at top left, #1e2a40, #050712);
      border: 1px solid rgba(250, 119, 60, 0.4);
      font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.10em;
    }
    .msbreaker-host .lab-dot {
      width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
      box-shadow: 0 0 0 5px var(--accent-soft), 0 0 15px var(--accent-strong);
    }
    .msbreaker-host .lab-text { color: var(--accent); font-weight: 600; }

    .msbreaker-host .tool-section { margin-top: 18px; padding-top: 8px; border-top: 1px dashed rgba(154, 160, 194, 0.35); }
    .msbreaker-host .section-title { margin: 0 0 10px; font-size: 1.05rem; font-weight: 600; color: #f8fafc; }
    .msbreaker-host .section-block { margin-top: 10px; }
    .msbreaker-host .block-title { margin: 0 0 4px; font-size: 0.95rem; font-weight: 600; color: #e5e7eb; }
    .msbreaker-host .block-help { margin: 0 0 8px; font-size: 0.86rem; color: var(--text-muted); }

    .msbreaker-host .upload-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
    .msbreaker-host .upload-input { display: flex; flex-direction: column; gap: 4px; }
    .msbreaker-host .field-label { font-size: 0.88rem; font-weight: 550; color: #cbd5e1; }
    .msbreaker-host #fitFile { display: block; font-size: 0.86rem; color: var(--text-main); }
    .msbreaker-host #fitFile::file-selector-button {
      background: #1e293b; border: 1px solid rgba(148,163,184,0.3); border-radius: 6px;
      color: #e5e7eb; padding: 4px 12px; cursor: pointer; font-size: 0.8rem; margin-right: 8px;
    }
    .msbreaker-host .status-text { font-size: 0.84rem; color: var(--text-muted); }
    .msbreaker-host .status-text--export { margin-top: 8px; }

    .msbreaker-host .file-warning {
      margin-top: 8px; padding: 8px 12px; border-radius: 8px;
      background: rgba(255, 200, 87, 0.1);
      border: 1px solid rgba(255, 200, 87, 0.3);
      color: var(--warning); font-size: 0.84rem;
    }

    .msbreaker-host .diagnostics-panel {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 8px; margin-top: 12px; padding: 10px; border-radius: 10px;
      background: rgba(15, 18, 36, 0.7); border: 1px solid var(--border-soft);
    }
    .msbreaker-host .diag-card { padding: 8px 10px; border-radius: 8px; background: rgba(21, 25, 51, 0.6); border: 1px solid rgba(38, 42, 64, 0.6); }
    .msbreaker-host .diag-card--wide { grid-column: 1 / -1; }
    .msbreaker-host .diag-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 2px; }
    .msbreaker-host .diag-value { font-size: 0.84rem; font-weight: 550; color: var(--text-main); word-break: break-word; }
    .msbreaker-host .diag-warning { color: var(--warning); font-weight: 500; }

    .msbreaker-host .timeline-bar { display: flex; align-items: center; height: 32px; border-radius: 8px; overflow: hidden; background: rgba(4, 6, 18, 0.8); border: 1px solid var(--border-soft); position: relative; margin-bottom: 6px; min-height: 32px; }
    .msbreaker-host .timeline-block { height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; transition: filter 0.12s ease; position: relative; min-width: 2px; }
    .msbreaker-host .timeline-block:hover { filter: brightness(1.25); }
    .msbreaker-host .timeline-label { font-size: 0.7rem; font-weight: 600; color: #000; text-shadow: 0 0 3px rgba(255,255,255,0.3); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
    .msbreaker-host .timeline-boundary { width: 6px; height: 100%; background: rgba(255, 255, 255, 0.5); cursor: col-resize; flex-shrink: 0; transition: background 0.1s; z-index: 2; }
    .msbreaker-host .timeline-boundary:hover { background: rgba(255, 255, 255, 0.85); }

    .msbreaker-host .table-wrapper { margin-top: 4px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-soft); background: rgba(4, 6, 18, 0.8); overflow-x: auto; }
    .msbreaker-host .data-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
    .msbreaker-host .data-table thead { background: var(--bg-table-header); }
    .msbreaker-host .data-table th, .msbreaker-host .data-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid rgba(30, 36, 64, 0.9); color: var(--text-main); }
    .msbreaker-host .data-table th { font-weight: 600; color: rgba(235, 239, 255, 0.92); white-space: nowrap; }
    .msbreaker-host .data-table tbody tr:nth-child(odd) { background: var(--bg-table-row); }
    .msbreaker-host .data-table tbody tr:nth-child(even) { background: var(--bg-table-row-alt); }
    .msbreaker-host .data-table tbody tr:hover { background: rgba(250, 119, 60, 0.10); }

    .msbreaker-host .leg-radio-cell { text-align: center; width: 40px; }
    .msbreaker-host .leg-radio { width: 14px; height: 14px; }

    .msbreaker-host .sport-select { background: rgba(8, 10, 22, 0.9); border: 1px solid var(--border-soft); color: var(--text-main); font-size: 0.8rem; padding: 2px 4px; border-radius: 4px; cursor: pointer; min-width: 80px; }
    .msbreaker-host .sport-select:hover { border-color: var(--accent); }
    .msbreaker-host .sport-select:focus { outline: 1px solid var(--accent); outline-offset: 1px; }

    .msbreaker-host .chart-canvas { display: block; width: 100%; max-width: 980px; height: 320px; margin-top: 4px; background: radial-gradient(circle at top, #151933, #050712); border-radius: 10px; border: 1px solid var(--border-soft); }
    .msbreaker-host .ds-indicator { font-size: 0.78rem; color: var(--warning); font-style: italic; }

    .msbreaker-host .route-map { margin-top: 6px; width: 100%; max-width: 980px; height: 280px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-soft); background: #070814; position: relative; }
    .msbreaker-host .route-map-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.85rem; padding: 16px; text-align: center; }
    .msbreaker-host .leaflet-container { background: #050712; }

    .msbreaker-host .export-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
    .msbreaker-host .btn { font-family: var(--font-main); font-size: 0.84rem; padding: 8px 16px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: filter 0.15s ease, border-color 0.15s ease, transform 0.06s ease; white-space: nowrap; font-weight: 600; letter-spacing: 0.02em; }
    .msbreaker-host .btn-primary { background: linear-gradient(135deg, #FA773C, #9966FF); border-color: transparent; color: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 10px 25px rgba(250, 119, 60, 0.30); }
    .msbreaker-host .btn-primary:hover { filter: brightness(1.10); transform: translateY(-1px); }
    .msbreaker-host .btn-ghost { background: rgba(8, 10, 22, 0.9); border-color: var(--border-soft); color: var(--text-main); }
    .msbreaker-host .btn-ghost:hover { background: rgba(24, 29, 55, 0.9); border-color: var(--accent); color: var(--accent); }

    @media (max-width: 768px) {
      .msbreaker-host .tool-card { padding: 18px 14px 22px; }
      .msbreaker-host .tool-title-row { flex-direction: column; align-items: flex-start; gap: 8px; }
      .msbreaker-host .chart-canvas, .msbreaker-host .route-map { height: 260px; }
      .msbreaker-host .diagnostics-panel { grid-template-columns: 1fr 1fr; }
      .msbreaker-host .timeline-bar { height: 28px; }
    }
    @media (max-width: 480px) {
      .msbreaker-host .diagnostics-panel { grid-template-columns: 1fr; }
    }