/* ============================================================
   Shorts — full-screen vertical video feed
   ============================================================ */
.page-shorts{
  --shorts-bg:#080c0e;
  --shorts-nav:calc(70px + env(safe-area-inset-bottom,0px));
  background:var(--shorts-bg);
  color:#fff;
  overflow:hidden;
}
.page-shorts a{color:inherit}
.page-shorts .ico{width:24px;height:24px}

/* top bar */
.shorts-top{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:calc(56px + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 14px 0;
  background:linear-gradient(180deg,#080c0ee6 0%,#080c0e00 100%);
  pointer-events:none;
}
.shorts-top>*{pointer-events:auto}
.shorts-top__btn{
  position:relative;display:grid;place-items:center;width:40px;height:40px;
  border-radius:50%;color:#fff;background:#ffffff14;
}
.shorts-top__btn:hover{background:#ffffff26}
.shorts-top__btn .badgecount--nav{top:-2px;right:-4px}
.shorts-top__title{
  display:flex;align-items:center;gap:7px;color:#fff;font-weight:600;
  font-size:16px;letter-spacing:.02em;text-shadow:0 1px 8px #0008;
}
.shorts-top__title .ico{width:16px;height:16px;fill:currentColor}

/* feed */
.shorts-feed{
  height:100vh;height:100dvh;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior-y:contain;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.shorts-feed::-webkit-scrollbar{display:none}
.short{
  position:relative;display:flex;justify-content:center;
  height:100vh;height:100dvh;
  scroll-snap-align:start;scroll-snap-stop:always;
  background:#000;
}
.short__stage{
  position:relative;overflow:hidden;
  width:100%;max-width:min(100vw,calc(100dvh * 9 / 16));
  height:100%;background:#000;
}
@media (min-width:901px){
  .short__stage{max-width:460px;box-shadow:0 0 60px #0006}
}

/* media layers */
.short__poster,
.short__video,
.short__embed{
  position:absolute;inset:0;width:100%;height:100%;
}
.short__poster{object-fit:cover;z-index:1;transition:opacity .25s ease}
.short__poster--brand{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:radial-gradient(circle at 50% 38%,#1b3d6b 0%,#0b1830 58%,#050a16 100%);
  color:#9fc1ff;font-size:12.5px;font-weight:600;letter-spacing:.04em;
}
.short__poster--brand .ico{width:52px;height:52px;fill:currentColor;filter:drop-shadow(0 8px 22px #0a2a6099)}
.short.is-playing .short__poster{opacity:0}
.short__video{object-fit:cover;z-index:2;background:#000}
.short__embed{z-index:2;background:#000}
.short__embed iframe{display:block;width:100%;height:100%;border:0}

.short__shade{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(180deg,#0009 0%,#0000 18%,#0000 52%,#0009 78%,#000d 100%);
}

/* center play state */
.short__play{
  position:absolute;left:50%;top:50%;z-index:6;
  display:grid;place-items:center;width:66px;height:66px;margin:-33px 0 0 -33px;
  border:0;border-radius:50%;background:#00000080;color:#fff;
  opacity:0;transform:scale(.9);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  backdrop-filter:blur(4px);
}
.short__play .ico{width:28px;height:28px;fill:currentColor;margin-left:3px}
.short.is-paused .short__play{opacity:1;transform:scale(1);pointer-events:auto}
.short__play:hover{background:#000000a6}

/* right rail */
.short__rail{
  position:absolute;right:10px;z-index:6;
  bottom:calc(var(--shorts-nav) + 150px);
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.short__action{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  width:52px;padding:7px 0;border:0;border-radius:16px;background:#0000002e;
  color:#fff;font-size:10.5px;font-weight:600;
  letter-spacing:.03em;text-shadow:0 1px 6px #000a;cursor:pointer;
  backdrop-filter:blur(6px);
  transition:background .18s ease,transform .18s ease;
}
.short__action:hover{background:#ffffff1a;transform:translateY(-1px)}
.short__action .ico{width:27px;height:27px;filter:drop-shadow(0 1px 4px #0008)}
.short__action:hover .ico{transform:scale(1.06)}
.short__action span{font-variant-numeric:tabular-nums}
.short__like.is-liked{color:#ff3b5c}
.short__like.is-liked .ico{fill:currentColor;stroke:currentColor;animation:short-pop .32s ease}
@keyframes short-pop{
  0%{transform:scale(1)}
  45%{transform:scale(1.28)}
  100%{transform:scale(1)}
}
.short__action .short__ico-sound{display:none}
.short__action[data-muted="0"] .short__ico-muted{display:none}
.short__action[data-muted="0"] .short__ico-sound{display:block}

/* caption + call to action */
.short__meta{
  position:absolute;left:0;right:0;z-index:5;
  bottom:calc(var(--shorts-nav) + 14px);
  padding:0 16px 0 16px;
  padding-right:64px;
}
.short__wa{
  display:inline-flex;align-items:center;gap:8px;max-width:100%;
  margin-bottom:10px;padding:10px 16px;border-radius:999px;
  background:linear-gradient(135deg,#2ee06f 0%,#25d366 55%,#1cb455 100%);
  color:#04310f!important;font-size:13px;font-weight:700;
  box-shadow:0 8px 24px #25d36659;
}
.short__wa .ico{width:17px;height:17px;flex:none}
.short__wa:hover{filter:brightness(1.05)}
.short__cta{
  display:inline-flex;align-items:center;gap:8px;max-width:100%;
  margin-bottom:12px;padding:9px 14px;border-radius:999px;
  background:#d70f64;color:#fff!important;font-size:13px;font-weight:600;
  box-shadow:0 6px 20px #d70f6459;
}
.short__cta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.short__cta .ico{width:15px;height:15px;flex:none}
.short__cta:hover{background:#b30d52}
.short__stats{
  display:flex;align-items:center;gap:5px;margin:0 0 8px;
  color:#dfeaec;font-size:11.5px;font-weight:500;letter-spacing:.02em;
  text-shadow:0 1px 8px #000a;
}
.short__stats .ico{width:14px;height:14px;opacity:.85;flex:none}
.short__heading{
  margin:0;font-family:var(--sans);font-size:19px;line-height:1.25;
  font-weight:600;color:#fff;text-shadow:0 2px 12px #0009;
}
.short__desc{
  margin:6px 0 0;font-size:13px;line-height:1.45;color:#eef3f2;
  text-shadow:0 1px 8px #000a;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* bottom navigation — always visible on this page */
.shorts-nav{
  display:flex!important;
  background:#080c0eeb;
  border-top:1px solid #ffffff1f;
  color:#9fb0b3;
  backdrop-filter:saturate(140%) blur(18px);
}
.shorts-nav .bottomnav__item{color:#9fb0b3}
.shorts-nav .bottomnav__item.is-active{color:#fff}
.shorts-nav .bottomnav__item .ico{width:23px;height:23px}
.shorts-nav .bottomnav__item.is-active .ico{fill:currentColor;stroke-width:1.4}
.shorts-nav .badgecount--nav{background:#d70f64}

/* swipe hint */
.shorts-hint{
  position:fixed;left:50%;z-index:55;
  bottom:calc(var(--shorts-nav) + 8px);transform:translateX(-50%);
  display:flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:999px;
  background:#ffffff1a;color:#fff;font-size:11px;letter-spacing:.02em;
  pointer-events:none;transition:opacity .4s ease,transform .4s ease;
  animation:shorts-bob 2.4s ease-in-out infinite;
}
.shorts-hint.is-hidden{opacity:0;transform:translate(-50%,8px)}
@keyframes shorts-bob{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,-5px)}
}
.shorts-hint .ico{width:12px;height:12px}

/* empty state */
.shorts-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;min-height:100dvh;padding:0 28px calc(var(--shorts-nav) + 30px);
  text-align:center;
}
.shorts-empty__ico{
  display:grid;place-items:center;width:86px;height:86px;margin-bottom:22px;
  border-radius:50%;background:#ffffff12;color:#fff;
}
.shorts-empty__ico .ico{width:38px;height:38px;fill:currentColor;margin-left:5px}
.shorts-empty h1{margin:0 0 10px;font-family:var(--sans);font-size:29px;color:#fff}
.shorts-empty p{max-width:34ch;margin:0 0 26px;color:#a9b7ba;font-size:14px;line-height:1.6}
.shorts-empty .btn{background:#d70f64;border-color:#d70f64;color:#fff;border-radius:999px;padding:13px 26px}

@media (max-width:600px){
  .short__heading{font-size:17px}
  .short__desc{font-size:12.5px}
  .short__rail{bottom:calc(var(--shorts-nav) + 130px);gap:15px}
  .short__meta{padding-left:14px}
}

/* ---------------------------------------------------------- comments sheet */
body.sheet-open{overflow:hidden}
body.sheet-open .shorts-feed{overflow:hidden}

.shortsheet{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:var(--kb-offset,0px);
  transition:padding-bottom .16s ease;
}
.shortsheet[hidden]{display:none}
.shortsheet__scrim{position:absolute;inset:0;background:#000000b3}
.shortsheet__panel{
  position:relative;display:flex;flex-direction:column;
  width:100%;max-width:520px;
  max-height:min(72vh, calc(100vh - var(--kb-offset,0px) - 10px));
  max-height:min(72dvh, calc(100dvh - var(--kb-offset,0px) - 10px));
  background:#101719;color:#fff;
  border-radius:20px 20px 0 0;
  box-shadow:0 -20px 60px #000000a6;
  animation:sheet-up .24s ease;
}
@keyframes sheet-up{
  from{transform:translateY(24px);opacity:.4}
  to{transform:translateY(0);opacity:1}
}
.shortsheet__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 12px;border-bottom:1px solid #ffffff17;
}
.shortsheet__head strong{font-size:15px;font-weight:600}
.shortsheet__head strong span{color:#8fa0a3;font-weight:500;margin-left:4px}
.shortsheet__x{
  display:grid;place-items:center;width:32px;height:32px;
  border:0;border-radius:50%;background:#ffffff14;color:#fff;cursor:pointer;
}
.shortsheet__x:hover{background:#ffffff26}
.shortsheet__list{
  flex:1;min-height:110px;overflow-y:auto;overscroll-behavior:contain;
  padding:8px 18px;
}
.shortsheet__empty{
  margin:26px 0;text-align:center;color:#8fa0a3;font-size:13px;
}
.shortcomment{
  display:flex;gap:11px;padding:12px 0;
  border-bottom:1px solid #ffffff0f;
}
.shortcomment:last-child{border-bottom:0}
.shortcomment__avatar{
  display:grid;place-items:center;flex:none;
  width:34px;height:34px;border-radius:50%;
  background:#2b3a3e;color:#d7e3e5;font-size:14px;font-weight:600;
}
.shortcomment__body{min-width:0;flex:1}
.shortcomment__head{
  display:flex;align-items:baseline;gap:8px;margin:0 0 3px;
  font-size:12.5px;
}
.shortcomment__head strong{color:#fff;font-weight:600}
.shortcomment__head span{color:#7d8f92;font-size:11px}
.shortcomment__text{
  margin:0;color:#d7e0e2;font-size:13.5px;line-height:1.5;
  overflow-wrap:anywhere;white-space:pre-wrap;
}
.shortsheet__form{
  display:grid;gap:8px;padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px));
  border-top:1px solid #ffffff17;background:#0c1416;
  border-radius:0 0 0 0;
}
.shortsheet__form input{
  width:100%;min-width:0;height:40px;padding:0 13px;
  border:1px solid #ffffff24;border-radius:10px;
  background:#ffffff0d;color:#fff;font:inherit;font-size:13.5px;
}
.shortsheet__form input::placeholder{color:#7d8f92}
.shortsheet__form input:focus{outline:0;border-color:#25d366;background:#ffffff14}
.shortsheet__private{
  display:flex;align-items:center;gap:8px;
  padding:0 2px;color:#9fb0b3;font-size:12px;cursor:pointer;user-select:none;
}
.shortsheet__private input{
  width:16px;height:16px;margin:0;accent-color:#25d366;cursor:pointer;
}
.shortsheet__private input:checked+span{color:#d8f5e3}
.shortsheet__row{display:flex;gap:8px}
.shortsheet__row input{flex:1}
.shortsheet__row button{
  flex:none;height:40px;padding:0 18px;border:0;border-radius:10px;
  background:#25d366;color:#04310f;font:inherit;font-size:13px;font-weight:700;
  cursor:pointer;
}
.shortsheet__row button:disabled{opacity:.6;cursor:default}
.shortsheet__error{margin:0;color:#ff8fa2;font-size:12px}

/* ------------------------------------------------------------------- toast */
.shorttoast{
  position:fixed;left:50%;z-index:100;
  bottom:calc(var(--shorts-nav) + 22px);transform:translateX(-50%);
  max-width:calc(100vw - 40px);
  padding:10px 18px;border-radius:999px;
  background:#ffffffeb;color:#111;font-size:12.5px;font-weight:500;
  box-shadow:0 10px 34px #00000059;text-align:center;
  animation:toast-in .2s ease;
}
.shorttoast[hidden]{display:none}
@keyframes toast-in{
  from{opacity:0;transform:translate(-50%,8px)}
  to{opacity:1;transform:translate(-50%,0)}
}