* { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: -apple-system, "PingFang SC", sans-serif; background: #0f1115; color: #e8e8ec; }
  .navbar { background: rgba(15,23,42,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            padding: 0 24px; height: 56px; display: flex; justify-content: space-between; align-items: center;
            border-bottom: 1px solid #1e293b; position: sticky; top: 0; z-index: 50; }
  .navbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05em; color: #f8fafc; }
  .navbar .brand .logo { width: 30px; height: 30px; background: linear-gradient(135deg,#6366f1,#22c55e);
                         border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
  .nav-btn { padding: 7px 14px; border-radius: 8px; border: 1px solid #334155; background: transparent;
             color: #94a3b8; cursor: pointer; font-size: .82em; text-decoration: none; display: inline-block; }
  .nav-btn:hover { border-color: #6366f1; color: #6366f1; background: rgba(99,102,241,.08); }
  .toolbar { padding: 12px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
             border-bottom: 1px solid #262a33; position: sticky; top: 56px; z-index: 40;
             background: rgba(15,17,21,.92); backdrop-filter: blur(8px); }
  .toolbar .count { color: #8b93a3; font-size: 13px; }
  #search { flex: 1; min-width: 180px; padding: 8px 12px; border-radius: 8px; border: 1px solid #333a47;
            background: #1a1e26; color: #e8e8ec; font-size: 14px; outline: none; }
  #search:focus { border-color: #4f7cff; }
  select { padding: 8px 10px; border-radius: 8px; border: 1px solid #333a47; background: #1a1e26;
           color: #e8e8ec; font-size: 13px; cursor: pointer; }
  #grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; padding: 16px; }
  .card { background: #1a1e26; border-radius: 10px; overflow: hidden; cursor: pointer;
          border: 1px solid #262a33; transition: transform .15s, border-color .15s; position: relative; }
  .card:hover { transform: translateY(-2px); border-color: #4f7cff; }
  .card .thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #12151b; }
  .card video.inline { width: 100%; aspect-ratio: 16/9; display: block; background: #000; }
  .card .meta { padding: 8px 10px; }
  .card .title { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box;
                 -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card .sub { margin-top: 5px; display: flex; gap: 6px; align-items: center; }
  .badge { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: #2a3040; color: #9aa4b8; }
  .badge.dl { background: #14401f; color: #5fd68a; }
  .badge.played { background: #453a1c; color: #e0c368; cursor: pointer; }
  .card .preview { margin-top: 6px; font-size: 11px; color: #8b93a3; line-height: 1.55;
                   display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
                   overflow: hidden; white-space: pre-wrap; word-break: break-word; }
  .card .cardfoot { margin-top: 8px; display: flex; justify-content: flex-end; gap: 6px; }
  .dl-mini { padding: 4px 12px; border-radius: 6px; border: 1px solid #3a4356; background: #232833;
             color: #cfd6e4; font-size: 11px; cursor: pointer; white-space: nowrap; }
  .dl-mini:hover { border-color: #4f7cff; color: #fff; }
  .dl-mini.done { background: #14401f; border-color: #1e5c2e; color: #5fd68a; }
  .predl { padding: 4px 10px; border-radius: 6px; border: 1px solid #3a4356; background: #232833;
           color: #9aa4b8; font-size: 11px; cursor: pointer; white-space: nowrap; }
  .predl:hover:not(:disabled) { border-color: #4f7cff; color: #fff; }
  .predl:disabled { opacity: .6; cursor: default; }
  .favbtn { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px;
            border: none; border-radius: 50%; background: rgba(0,0,0,.5); color: #64748b;
            font-size: 15px; cursor: pointer; line-height: 1; }
  .favbtn:hover { color: #facc15; }
  .favbtn.on { color: #facc15; text-shadow: 0 0 8px rgba(250,204,21,.5); }
  #predl { padding: 8px 12px; border-radius: 8px; border: 1px solid #2e5c3a; background: #173322;
           color: #5fd68a; font-size: 13px; cursor: pointer; white-space: nowrap; }
  #predl:hover:not(:disabled) { border-color: #5fd68a; }
  #predl:disabled { opacity: .45; cursor: default; }
  .dlstat { color: #8b93a3; font-size: 12px; }
  #toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
           background: #1e2733; border: 1px solid #334155; color: #e8e8ec; padding: 10px 18px;
           border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none;
           transition: opacity .25s, transform .25s; z-index: 200; max-width: 80vw; }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  #toast.err { border-color: #7f1d1d; background: #331a1a; color: #fca5a5; }
  #sentinel { height: 60px; }
  #empty { text-align: center; color: #8b93a3; padding: 60px 0; display: none; }

  /* 弹窗 */
  #modal { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.72); display: none;
           align-items: center; justify-content: center; padding: 20px; }
  #modal.open { display: flex; }
  #dialog { background: #171a21; border-radius: 14px; max-width: 860px; width: 100%; max-height: 92vh;
            overflow-y: auto; border: 1px solid #2c313d; position: relative; }
  #dialog .vwrap { position: relative; background: #000; aspect-ratio: 16/9; display: flex;
                   align-items: center; justify-content: center; }
  #dialog video { width: 100%; max-height: 60vh; display: block; }
  #dialog .body { padding: 16px 20px 22px; }
  #dialog h2 { font-size: 17px; margin-bottom: 6px; }
  #dialog .desc { color: #9aa4b8; font-size: 13px; margin-bottom: 12px; }
  .tabs { display: flex; gap: 8px; margin-bottom: 8px; }
  .tab { padding: 5px 14px; border-radius: 6px; font-size: 13px; cursor: pointer;
         background: #232833; color: #9aa4b8; border: none; }
  .tab.on { background: #4f7cff; color: #fff; }
  #promptbox { white-space: pre-wrap; word-break: break-word; background: #12151b; border-radius: 8px;
               padding: 14px; font-size: 13px; line-height: 1.7; max-height: 320px; overflow-y: auto;
               font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #cfd6e4; }
  .row { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: #8b93a3; }
  .row a { color: #6f97ff; text-decoration: none; }
  #copybtn { padding: 6px 14px; border-radius: 6px; border: 1px solid #333a47; background: #232833;
             color: #cfd6e4; font-size: 12px; cursor: pointer; }
  #closebtn { position: absolute; top: 10px; right: 12px; z-index: 2; width: 32px; height: 32px; border: none;
              border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 16px; cursor: pointer; }

  /* H3 版按钮：与复制按钮同风格 */
  #genh3btn { padding: 6px 14px; border-radius: 6px; border: 1px solid #2e5c3a; background: #173322;
              color: #5fd68a; font-size: 13px; cursor: pointer; }
  #genh3btn:hover { border-color: #5fd68a; }