*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: #0a0a0a;
      color: #fff;
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* ── Layout ── */
    .home-section {
      flex: 1;
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      margin-left: 78px;
      transition: margin-left 0.5s ease;
    }

    /* ── Header ── */
    .top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      height: 60px;
      flex-shrink: 0;
      background: #111;
      border-bottom: 1px solid #1e1e1e;
      z-index: 10;
    }

    .logo {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.5px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .logo-icon {
      display: flex;
      gap: 3px;
      align-items: center;
    }

    .logo-icon span {
      display: block;
      width: 5px;
      border-radius: 2px;
      background: #e23e57;
    }

    .logo-icon span:nth-child(1) { height: 10px; }
    .logo-icon span:nth-child(2) { height: 16px; }
    .logo-icon span:nth-child(3) { height: 12px; }
    .logo-icon span:nth-child(4) { height: 8px;  }

    .logo-text { color: #fff; }
    .logo-text em { color: #e23e57; font-style: normal; }

    .header-right {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .stream-badge {
      font-size: 13px;
      color: #555;
      font-weight: 500;
      background: #161616;
      border: 1px solid #222;
      padding: 4px 10px;
      border-radius: 20px;
    }

    .stream-badge .n {
      color: #e23e57;
      font-weight: 700;
    }

    #add-btn {
      background: #e23e57;
      color: #fff;
      border: none;
      padding: 0 16px;
      height: 36px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 7px;
      transition: background 0.15s, transform 0.1s, opacity 0.15s;
    }

    #add-btn:hover:not(:disabled) { background: #e23e57d3; }
    #add-btn:active:not(:disabled) { transform: scale(0.96); }
    #add-btn:disabled { opacity: 0.35; cursor: not-allowed; }

    /* ── Main ── */
    main {
      flex: 1;
      overflow: hidden;
      padding: 10px;
      display: flex;
    }

    /* ── Placeholder slot ── */
    .stream-placeholder {
      position: relative;
      border: 2px dashed #222;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      min-height: 0;
      min-width: 0;
      transition: border-color 0.2s, background 0.2s;
      user-select: none;
    }

    .stream-placeholder:hover {
      border-color: #e23e57;
      background: rgba(124, 111, 247, 0.05);
    }

    .placeholder-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      color: #2e2e2e;
      transition: color 0.2s;
      pointer-events: none;
    }

    .stream-placeholder:hover .placeholder-inner { color: #e23e57; }

    /* add manually here */

    .source-info {
      display: flex;
      justify-content: space-between;
    }

    .live-matches {
      overflow: auto;
      max-height: 350px;
      scrollbar-width: thin; 
      scrollbar-color: #888 #242424;
    }

    .match-card {
      border: #e23e57, solid, 1px;
      background-color: #2c2c2c;
      border-radius: 5px;
      margin-bottom: 5px;
    }

    .source-row {
      cursor: pointer;
      border: #e23e57, solid, 1px;
    }

    .source-title, .source-body, .source-caret, .match-main {
      padding: 10px;
    }

    .sport-category-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 8px 0px;
    } 

    .sport-name,
    .match-title,
    .source-info,
    .stream-info,
    #back-to-live {
      color: white;
      transition: color 0.1s ease;
      cursor: pointer;
    }

    .sport-name:hover,
    .match-title:hover,
    .source-info:hover,
    .stream-info:hover {
      color: #e23e57;
    }

    

    /* Category Styling */

    .sports-grid {
      display: grid;
      grid-template-columns: auto auto auto;
    }

    .sport-card {
      background-color: #242424;
      border: #e23e57 solid 1px;
      border-radius: 5px;
      margin: 5px;
      cursor: pointer;
    }

    .sport-name {
      padding: 10px;
      color: white;
    }

    .plus-ring {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: 2px solid currentColor;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s;
    }

    .stream-placeholder:hover .plus-ring { transform: scale(1.1); }

    .placeholder-label {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.3px;
    }

    .placeholder-remove-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 28px;
      height: 28px;
      background: transparent;
      border: 1px solid #2a2a2a;
      color: #444;
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    .placeholder-remove-btn:hover {
      background: rgba(220, 38, 38, 0.85);
      border-color: rgba(255, 80, 80, 0.3);
      color: #fff;
    }

    /* ── Streams grid ── */
    #streams-grid {
      flex: 1;
      display: grid;
      gap: 8px;
    }

    #streams-grid.layout-1 {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
    }

    #streams-grid.layout-2 {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr;
    }

    #streams-grid.layout-3 {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }

    #streams-grid.layout-3 > *:last-child {
      grid-column: 1 / -1;
    }

    #streams-grid.layout-4 {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }

    /* ── Stream slot ── */
    .stream-slot {
      position: relative;
      background: #111;
      border-radius: 10px;
      overflow: hidden;
      min-height: 0;
      min-width: 0;
      border: 1px solid #1e1e1e;
      transition: border-color 0.2s;
    }

    .stream-slot:hover { border-color: #2e2e2e; }

    .stream-slot iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }

    /* ── Remove button ── */
    .remove-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 30px;
      height: 30px;
      background: rgba(10, 10, 10, 0.8);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: #ccc;
      border-radius: 50%;
      cursor: pointer;
      font-size: 17px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
      opacity: 0;
      transform: scale(0.75);
      transition: opacity 0.15s, transform 0.15s, background 0.15s, color 0.15s;
    }

    .stream-slot:hover .remove-btn {
      opacity: 1;
      transform: scale(1);
    }

    .remove-btn:hover {
      background: rgba(220, 38, 38, 0.9);
      border-color: rgba(255, 80, 80, 0.3);
      color: #fff;
    }

    /* always visible on touch devices */
    @media (pointer: coarse) {
      .remove-btn { opacity: 1; transform: scale(1); }
    }

    /* ── Modal overlay ── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 50;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }

    .modal-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    /* ── Modal box ── */
    .modal {
      background: #141414;
      border: 1px solid #252525;
      border-radius: 16px;
      padding: 28px;
      width: 500px;
      max-width: calc(100vw - 32px);
      transform: scale(0.93) translateY(12px);
      transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .modal-overlay.open .modal { transform: scale(1) translateY(0); }

    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22px;
    }

    .modal-head h2 { font-size: 17px; font-weight: 700; }

    .modal-close {
      background: #1e1e1e;
      border: 1px solid #2a2a2a;
      color: #888;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
      line-height: 1;
    }

    .modal-close:hover { background: #2a2a2a; color: #fff; }

    .field-label {
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      margin-bottom: 8px;
    }

    #url-input {
      width: 100%;
      background: #0d0d0d;
      border: 1px solid #252525;
      color: #fff;
      padding: 11px 14px;
      border-radius: 9px;
      font-size: 14px;
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
      font-family: 'Menlo', 'Consolas', monospace;
    }

    #url-input:focus {
      border-color: #e23e57;
      box-shadow: 0 0 0 3px rgba(124, 111, 247, 0.12);
    }

    #url-input::placeholder { color: #333; }

    .error-msg {
      font-size: 13px;
      color: #f87171;
      margin-top: 8px;
      min-height: 18px;
    }

    .platforms {
      margin-top: 16px;
      padding: 14px;
      background: #0d0d0d;
      border-radius: 10px;
      border: 1px solid #1e1e1e;
    }

    .platforms-title {
      font-size: 11px;
      font-weight: 700;
      color: #444;
      text-transform: uppercase;
      letter-spacing: 0.7px;
      margin-bottom: 10px;
    }

    .platform-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 6px;
    }

    .platform-row:last-child { margin-bottom: 0; }

    .platform-tag {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 4px;
      min-width: 70px;
      text-align: center;
    }

    .tag-yt { background: rgba(255, 0, 0, 0.12); color: #f87171; }
    .tag-tw { background: rgba(145, 70, 255, 0.12); color: #f87171; }

    .platform-example {
      font-size: 12px;
      color: #3a3a3a;
      font-family: 'Menlo', 'Consolas', monospace;
    }

    .modal-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 22px;
    }

    .btn {
      padding: 9px 18px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      transition: background 0.15s, transform 0.1s;
      height: 38px;
      display: flex;
      align-items: center;
    }

    .btn:active { transform: scale(0.96); }
    .btn-ghost { background: #1e1e1e; color: #888; border: 1px solid #252525; }
    .btn-ghost:hover { background: #252525; color: #ccc; }
    .btn-purple { background: #e23e57; color: #fff; }
    .btn-purple:hover { background: #e23e57d3; }