/* 好看视频 - 信息流页样式 */
:root{
  --app-bg:#f6f6f8;
  --surface:#ffffff;
  --ink-1:#1d1d24;
  --ink-2:#5a5a66;
  --ink-3:#9a9aa6;
  --line:#ededf2;
  --accent:#ff4d4f;
  --accent-soft:rgba(255,77,79,.12);
  --chip:#f2f2f5;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
/* prevent native pull-to-refresh / overscroll so our custom PTR works */
html,body{ overscroll-behavior-y:contain; }
body{
  font-family:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--app-bg);
  color:var(--ink-1);
  min-height:100vh;
  display:flex;justify-content:center;
}
.app{
  width:100%;max-width:426px;
  background:var(--app-bg);
  min-height:100vh;
  display:flex;flex-direction:column;
  box-shadow:0 0 60px -20px rgba(0,0,0,.18);
}

/* ===== sticky top bar (header + categories together so cats isn't covered) ===== */
.topbar{
  position:sticky;top:0;z-index:20;
  background:var(--surface);
}
.header{
  background:var(--surface);
  padding:12px 14px 10px;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:7px;flex-shrink:0;}
.brand .logo{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,#ff4d4f,#ff7a18);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px -3px rgba(255,77,79,.55);
}
.brand .logo svg{width:15px;height:15px;color:#fff;}
.brand .name{
  font-family:"ZCOOL QingKe HuangYou","Noto Sans SC",sans-serif;
  font-size:19px;color:var(--ink-1);letter-spacing:.5px;line-height:1;white-space:nowrap;
}
.search{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:7px;
  height:36px;padding:0 12px;
  background:var(--chip);border-radius:18px;
  color:var(--ink-3);font-size:13px;overflow:hidden;cursor:pointer;
}
.search svg{flex-shrink:0;}
.search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.search .hot{color:var(--ink-2);}
.download-btn{
  flex-shrink:0;height:32px;padding:0 14px;border:none;border-radius:16px;
  background:var(--accent);color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;gap:4px;cursor:pointer;
  box-shadow:0 4px 10px -3px rgba(255,77,79,.5);transition:transform .12s ease;
}
.download-btn:active{transform:translateY(1px);}
.download-btn svg{width:13px;height:13px;}

/* ===== category tabs ===== */
.cats{
  background:var(--surface);
  display:flex;align-items:center;gap:20px;
  padding:8px 14px 10px;
  overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line);
}
.cats::-webkit-scrollbar{display:none;}
.cats .c{
  font-size:15px;color:var(--ink-2);font-weight:500;white-space:nowrap;
  position:relative;padding-bottom:6px;cursor:pointer;
  transition:color .15s;
}
.cats .c.active{color:var(--ink-1);font-weight:700;font-size:16px;}
.cats .c.active::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:18px;height:3px;border-radius:2px;background:var(--accent);
  animation:tabUnderline .25s ease;
}
@keyframes tabUnderline{from{width:0;}to{width:18px;}}

/* ===== pull to refresh ===== */
.ptr{
  height:0;overflow:hidden;background:transparent;
  display:flex;align-items:flex-end;justify-content:center;
  transition:height .22s ease;will-change:height;
}
.ptr.no-tr{transition:none;}
.ptr-inner{
  height:56px;width:100%;
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:var(--ink-3);font-size:13px;
}
.ptr .arrow{
  width:18px;height:18px;color:var(--ink-3);
  transition:transform .15s ease;
}
.ptr.ready .arrow{transform:rotate(180deg);}
.ptr .spinner{
  width:20px;height:20px;border-radius:50%;
  border:2.5px solid var(--line);border-top-color:var(--accent);
  animation:spin .8s linear infinite;display:none;
}
.ptr.loading .spinner{display:block;}
.ptr.loading .arrow{display:none;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===== feed ===== */
.feed{padding:10px 0 8px;min-height:60vh;}
/* only show "no content" when truly empty AND not currently loading */
.feed:empty:not(.loading)::before{
  content:"暂无内容";
  display:block;text-align:center;color:var(--ink-3);font-size:13px;padding:60px 0;
}
/* centered full-screen spinner while the feed is loading (initial load / tab switch) */
.feed.loading::after{
  content:"";
  position:fixed;left:50%;top:50%;
  margin:-17px 0 0 -17px;  /* center via negative margin so transform is free for the spin animation */
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--accent);
  animation:spin .8s linear infinite;
  z-index:50;
}
.card{
  background:var(--surface);
  margin:0 10px 12px;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 10px -6px rgba(0,0,0,.08);
  animation:cardIn .35s ease both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;}
/* fallback for mobile browsers without aspect-ratio support */
@supports not (aspect-ratio:16/9){
  .thumb{height:0;padding-top:56.25%;}
  .thumb img{position:absolute;top:0;left:0;}
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;background:#222;}
.thumb .overlay-text{
  position:absolute;left:12px;right:12px;bottom:32px;
  color:#fff;font-size:13px;line-height:1.45;font-weight:500;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.thumb .scrim{
  position:absolute;left:0;right:0;bottom:0;height:75%;
  background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0));pointer-events:none;
}
.play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(0,0,0,.45);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
}
.play svg{width:20px;height:20px;color:#fff;margin-left:2px;}
.thumb .meta-bl{
  position:absolute;left:12px;bottom:10px;
  display:flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.95);font-size:11px;font-weight:500;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.thumb .meta-bl .dot{opacity:.7;}
.thumb .tag-chip{
  position:absolute;left:10px;top:10px;height:20px;padding:0 8px;border-radius:10px;
  background:rgba(0,0,0,.45);color:#fff;font-size:11px;font-weight:500;
  display:flex;align-items:center;
}
.body{padding:10px 12px 12px;}
.author{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.avatar{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.2);
}
.author .name{font-size:13px;color:var(--ink-2);font-weight:500;}
.author .desc{
  font-size:12px;color:var(--ink-3);margin-left:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;
}
.actions{
  display:flex;align-items:center;gap:18px;
  padding-top:8px;border-top:1px solid var(--line);
}
.actions .a{display:flex;align-items:center;gap:5px;color:var(--ink-3);font-size:12px;font-weight:500;cursor:pointer;}
.actions .a svg{width:16px;height:16px;}
.actions .a:active{color:var(--accent);}
.actions .share{margin-left:auto;}

/* pulsing play badge — keep translate(-50%,-50%) so it stays centered */
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.9;}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1;}}
.play{animation:pulse 2.4s ease-in-out infinite;}

/* ===== bottom loader ===== */
.loader{
  padding:16px 0 26px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:var(--ink-3);font-size:13px;min-height:48px;
}
.loader .spinner{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--accent);
  animation:spin .8s linear infinite;display:none;
}
.loader.loading .spinner{display:block;}
.loader.no-more .l-text::before{content:"— ";}
.loader.no-more .l-text::after{content:" —";}

.safe{height:8px;}

/* ===== toast ===== */
.toast{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);
  background:rgba(20,20,28,.82);color:#fff;
  padding:11px 20px;border-radius:10px;font-size:13px;font-weight:500;
  opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;
  z-index:999;backdrop-filter:blur(6px);white-space:nowrap;
}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* disable selection while pulling */
body.ptr-pulling{user-select:none;}
/* disable text selection on interactive icons for tidiness */
.actions .a,.play,.cats .c{user-select:none;}