* {
      box-sizing: border-box;
    }

    body {
      background: #14161a;
      color: #e6e8ec;
      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
      margin: 0;
      padding: 16px;
      min-height: 100vh;
    }

    .wrap {
      max-width: 720px;
      margin: 0 auto;
    }

    h1 {
      font-size: 18px;
      margin: 0 0 4px;
    }

    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 4px;
    }
    .top-bar h1 {
      margin: 0;
    }

    .line-quality {
      font-size: 12px;
      color: #8a90a0;
      white-space: nowrap;
      cursor: default;
      user-select: none;
    }
    .line-quality .dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
      vertical-align: middle;
      background: #8a90a0;
    }
    .line-quality.good .dot { background: #5fc77b; }
    .line-quality.ok    .dot { background: #e8b34a; }
    .line-quality.bad   .dot { background: #e8605f; }
    .line-quality.good   { color: #c3c9d4; }
    .line-quality.ok     { color: #c3c9d4; }
    .line-quality.bad    { color: #c3c9d4; }

    .sub {
      color: #8a90a0;
      font-size: 12px;
      margin-bottom: 16px;
    }

    .card {
      background: #1e2229;
      border: 1px solid #2c313b;
      border-radius: 10px;
      padding: 14px;
      margin-bottom: 12px;
    }

    .card h2 {
      font-size: 14px;
      margin: 0 0 10px;
      color: #c3c9d4;
      font-weight: 500;
    }

    .row {
      display: flex;
      gap: 8px;
      align-items: stretch;
      flex-wrap: wrap;
    }

    .row>* {
      min-width: 0;
    }

    input[type=text] {
      background: #12151a;
      color: #e6e8ec;
      border: 1px solid #333a47;
      border-radius: 6px;
      padding: 9px 12px;
      font-size: 15px;
      flex: 1;
      min-width: 120px;
      font-family: inherit;
      -webkit-appearance: none;
    }

    input:focus {
      outline: none;
      border-color: #4c8bf5;
    }

    button {
      background: #2c5f2e;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 9px 14px;
      font-size: 14px;
      cursor: pointer;
      white-space: nowrap;
      font-family: inherit;
    }

    button:hover {
      background: #3a7a3d;
    }

    button.blue {
      background: #2b5fbf;
    }

    button.blue:hover {
      background: #3a72d6;
    }

    button.gray {
      background: #3a414c;
    }

    button.gray:hover {
      background: #4a535f;
    }

    button:disabled {
      opacity: .5;
      cursor: not-allowed;
    }

    .id-line {
      margin-top: 8px;
      font-size: 13px;
      color: #9aa1b0;
      word-break: break-all;
    }

    .id-line b {
      color: #8fe39a;
      font-family: Consolas, Menlo, monospace;
    }

    .id-line.bad b {
      color: #f0a3a3;
    }

    .btn-row {
      display: flex;
      gap: 10px;
      margin-top: 14px;
      flex-wrap: wrap;
    }

    .btn-row button {
      flex: 1;
      min-width: 120px;
      padding: 11px 14px;
      font-size: 15px;
    }

    #play-btn {
      flex: 2;
      padding: 12px 14px;
      font-size: 16px;
      font-weight: 500;
    }

    video {
      width: 100%;
      max-width: 720px;
      background: #000;
      border-radius: 8px;
      margin-top: 8px;
    }

    .player-overlay {
      position: fixed;
      inset: 0;
      background: #000;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .player-overlay video {
      width: 100vw;
      height: 100vh;
      max-width: 100vw;
      max-height: 100vh;
      object-fit: contain;
      background: #000;
      margin: 0;
      border-radius: 0;
    }

    .back-btn {
      position: fixed;
      top: 14px;
      left: 14px;
      z-index: 10000;
      padding: 8px 14px;
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: background 0.15s;
    }

    .back-btn:hover {
      background: rgba(40, 40, 40, 0.8);
    }

    .dl-btn {
      position: fixed;
      top: 14px;
      right: 14px;
      z-index: 10000;
      padding: 8px 14px;
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      text-decoration: none;
      display: none;
    }

    .dl-btn:hover {
      background: rgba(40, 40, 40, 0.8);
    }

    .dl-btn[aria-busy="true"] {
      opacity: 0.5;
      pointer-events: none;
    }

    .img-btn {
      position: fixed;
      top: 14px;
      right: 142px;
      z-index: 10000;
      padding: 8px 14px;
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      text-decoration: none;
      display: none;
      font-family: inherit;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: background 0.15s;
    }

    .img-btn:hover {
      background: rgba(40, 40, 40, 0.8);
    }
    .img-btn[data-progress]::after {
      content: " (" attr(data-progress) ")";
      opacity: 0.75;
      font-size: 12px;
      margin-left: 4px;
    }

    .gallery-overlay {
      position: fixed;
      inset: 0;
      background: #000;
      z-index: 10001;
      display: flex;
      align-items: center;
      justify-content: center;
      touch-action: pan-y;
      -webkit-user-select: none;
      user-select: none;
    }

    .gallery-img {
      max-width: 100vw;
      max-height: 100vh;
      object-fit: contain;
      background: #000;
      display: block;
    }

    .gallery-close {
      position: fixed;
      top: 14px;
      right: 14px;
      z-index: 10002;
      width: 44px;
      height: 44px;
      padding: 0;
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 50%;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: background 0.15s;
    }

    .gallery-close:hover {
      background: rgba(40, 40, 40, 0.8);
    }

    .gallery-nav {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10002;
      width: 48px;
      height: 64px;
      padding: 0;
      background: rgba(0, 0, 0, 0.45);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      font-size: 32px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: background 0.15s;
    }

    .gallery-prev { left: 12px; }
    .gallery-next { right: 12px; }

    .gallery-nav:hover {
      background: rgba(40, 40, 40, 0.75);
    }

    .gallery-counter {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10002;
      padding: 6px 14px;
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 999px;
      font-size: 13px;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    @media (max-width: 480px) {
      .img-btn {
        right: 14px;
        top: 58px;
        font-size: 13px;
        padding: 7px 10px;
      }
      .gallery-nav {
        width: 40px;
        height: 56px;
        font-size: 28px;
      }
    }

    #status {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 13px;
      word-break: break-all;
      line-height: 1.5;
      display: none;
    }

    #status.ok {
      background: #1f4d23;
      color: #cfe8d2;
      display: block;
    }

    #status.err {
      background: #5a2323;
      color: #f0d0d0;
      display: block;
    }

    #status.info {
      background: #1f3a5a;
      color: #d0e0f0;
      display: block;
    }

    .hint {
      color: #8a90a0;
      font-size: 12px;
      margin-top: 6px;
      line-height: 1.5;
    }

    kbd {
      background: #2a2f39;
      border-radius: 4px;
      padding: 1px 6px;
      font-family: Consolas, Menlo, monospace;
      font-size: 12px;
    }

    .paste-btn {
      padding: 9px 12px;
    }

    @media (max-width: 480px) {
      .row {
        flex-direction: column;
      }

      input[type=text] {
        width: 100%;
      }

      .btn-row {
        flex-direction: column;
      }

      .btn-row button {
        width: 100%;
      }
    }

    .warn-banner {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255, 152, 0, 0.95);
      color: #fff;
      padding: 10px 18px;
      border-radius: 10px;
      z-index: 20000;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
      font-size: 14px;
      max-width: 92vw;
      text-align: center;
      animation: warn-fade-in 0.25s ease-out;
    }

    @keyframes warn-fade-in {
      from { opacity: 0; transform: translate(-50%, -10px); }
      to   { opacity: 1; transform: translate(-50%, 0); }
    }

    .parse-images-label {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      font-size: 13px;
      color: #d8d8d8;
      cursor: pointer;
      user-select: none;
      width: 100%;
      box-sizing: border-box;
    }

    .parse-images-label input {
      margin: 0;
      cursor: pointer;
    }