html {
          width: 100%;
          height: 100%;
      }

      .player {
          position: absolute;
          right: 0;
          bottom: 0;
          left: 0;
          top: 0;
      }

      #info-toggle {
          display: none;
          position: absolute;
          top: 12px;
          left: 12px;
          width: 36px;
          height: 36px;
          z-index: 1001;
          background: rgba(15, 15, 20, 0.88);
          backdrop-filter: blur(8px);
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 8px;
          cursor: pointer;
          align-items: center;
          justify-content: center;
          transition: background 0.15s, border-color 0.15s, left 0.2s;
      }

      #info-toggle.ready {
          display: flex;
      }

      #info-toggle:hover {
          background: rgba(40, 40, 50, 0.95);
          border-color: rgba(255, 255, 255, 0.22);
      }

      #info-toggle.active {
          display: none;
          background: rgba(99, 179, 237, 0.18);
          border-color: rgba(99, 179, 237, 0.45);
          border-left: none;
          border-radius: 0 8px 8px 0;
      }

      #info-toggle.active:hover {
          background: rgba(99, 179, 237, 0.28);
      }

      #info-toggle svg {
          width: 16px;
          height: 16px;
          opacity: 0.7;
      }

      #info-toggle.active svg {
          opacity: 1;
          color: #63b3ed;
      }

      #info-block {

          position: absolute;
          top: 0;
          left: 0;
          width: 360px;
          min-width: 200px;
          max-width: 80vw;
          height: 100%;
          z-index: 1000;
          background: rgba(15, 15, 20, 0.92);
          backdrop-filter: blur(8px);
          border-right: 1px solid rgba(255, 255, 255, 0.08);
          font-family: 'Segoe UI', system-ui, sans-serif;
          font-size: 13px;
          color: #e0e0e0;
          overflow: hidden;
          /*display: flex;*/
          flex-direction: column;
          display: none;
      }

      #info-block.visible {
          display: flex;
      }

      #info-block-scroll {
          flex: 1;
          scroll-behavior: smooth;
          scrollbar-width: thin;
          overflow-y: auto;
          overflow-x: hidden;
      }

      #info-resize-handle {
          position: absolute;
          top: 0;
          right: -3px;
          width: 6px;
          height: 100%;
          cursor: col-resize;
          z-index: 1002;
          background: transparent;
          transition: background 0.15s;
      }

      #info-resize-handle:hover,
      #info-resize-handle.dragging {
          background: rgba(99, 179, 237, 0.35);
      }

      .info-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 12px 12px 20px;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: #888;
          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }

      .info-header-close {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 28px;
          height: 28px;
          border: none;
          background: none;
          cursor: pointer;
          border-radius: 6px;
          color: #666;
          transition: background 0.15s, color 0.15s;
          flex-shrink: 0;
      }

      .info-header-close:hover {
          background: rgba(255, 255, 255, 0.08);
          color: #ccc;
      }

      .accordion-item {
          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }

      .accordion-trigger {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          padding: 12px 20px;
          background: none;
          border: none;
          cursor: pointer;
          color: #e0e0e0;
          font-size: 13px;
          font-weight: 500;
          text-align: left;
          transition: background 0.15s;
      }

      .accordion-trigger:hover {
          background: rgba(255, 255, 255, 0.04);
      }

      .accordion-trigger-label {
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .accordion-badge {
          font-size: 10px;
          font-weight: 600;
          padding: 2px 6px;
          border-radius: 4px;
          background: rgba(99, 179, 237, 0.15);
          color: #63b3ed;
          letter-spacing: 0.04em;
      }

      .accordion-badge.empty {
          background: rgba(255, 255, 255, 0.06);
          color: #666;
      }

      .accordion-arrow {
          font-size: 10px;
          color: #666;
          transition: transform 0.2s;
          flex-shrink: 0;
      }

      .accordion-item.open .accordion-arrow {
          transform: rotate(180deg);
      }

      .accordion-content {
          display: none;
          padding: 0 12px 12px;
      }

      .accordion-item.open .accordion-content {
          display: block;
      }

      .splash-preview {
          width: 100%;
          border-radius: 6px;
          display: block;
          margin-bottom: 8px;
          border: 1px solid rgba(255, 255, 255, 0.08);
      }

      .splash-url-text {
          font-size: 11px;
          color: #888;
          word-break: break-all;
          padding: 8px 10px;
          background: rgba(0, 0, 0, 0.3);
          border-radius: 4px;
      }

      .splash-empty {
          font-size: 12px;
          color: #555;
          padding: 8px 10px;
      }

      .json-viewer {
          background: rgba(0, 0, 0, 0.3);
          border-radius: 6px;
          padding: 10px 12px;
          overflow-x: auto;
          font-family: 'Consolas', 'Fira Code', monospace;
          font-size: 11.5px;
          line-height: 1.6;
      }

      .json-viewer .jv-key {
          color: #79c0ff;
      }

      .json-viewer .jv-string {
          color: #a5d6ff;
      }

      .json-viewer .jv-number {
          color: #f0883e;
      }

      .json-viewer .jv-boolean {
          color: #ff7b72;
      }

      .json-viewer .jv-null {
          color: #8b949e;
      }

      .jv-toggle {
          cursor: pointer;
          user-select: none;
      }

      .jv-toggle::before {
          content: '▾ ';
          font-size: 10px;
          color: #555;
      }

      .jv-toggle.collapsed::before {
          content: '▸ ';
      }

      .jv-children {
          margin-left: 16px;
      }

      .jv-toggle.collapsed ~ .jv-children {
          display: none;
      }

      .jv-collapsed-hint {
          color: #555;
          font-size: 11px;
      }
    
      .gcv-voh-tags__popup {
        display: none;
      }