.ft-story-system-root,
.ft-story-modal{
  --ft-bg-base:#050505;
  --ft-surface:#121214;
  --ft-sheet:rgba(15,15,18,.88);
  --ft-text-main:#fff;
  --ft-text-muted:rgba(255,255,255,.72);
  --ft-primary:#ff3b30;
  --ft-primary-glow:rgba(255,59,48,.6);
  --ft-story-grad:linear-gradient(45deg,#f59e0b,#ef4444,#e11d48);
  --ft-spring:cubic-bezier(.34,1.56,.64,1);
  --ft-smooth:cubic-bezier(.25,1,.5,1);
  font-family:inherit;
  direction:rtl;
}
.ft-story-system-root{position:relative;z-index:5;width:100%}
.ft-story-system-root *,.ft-story-modal *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.ft-story-system-root button,
.ft-story-modal button,
.ft-story-modal input,
.ft-story-modal textarea{
  font-family:inherit!important;
  outline:none!important;
  box-shadow:none!important;
}
.ft-story-system-root button,
.ft-story-modal button{
  border:0!important;
  text-decoration:none!important;
  cursor:pointer;
}
html.ft-story-lock,body.ft-story-lock{overflow:hidden!important}

.ft-stories-tray{display:flex;gap:16px;overflow-x:auto;max-width:100%;padding:20px 4px;scroll-snap-type:x mandatory;width:100%;-ms-overflow-style:none;scrollbar-width:none}
.ft-stories-tray::-webkit-scrollbar{display:none}
.ft-story-card{flex:0 0 auto;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:0;cursor:pointer;width:76px;height:82px;padding:0!important;margin:0!important;background:transparent!important;border:0!important;border-radius:999px!important;box-shadow:none!important;color:inherit!important;appearance:none!important;-webkit-appearance:none!important;outline:none!important;overflow:visible!important}
.ft-story-card:hover,.ft-story-card:focus,.ft-story-card:active{background:transparent!important;color:inherit!important;box-shadow:none!important;outline:none!important;border:0!important;transform:none!important}
.ft-story-card:focus-visible .ft-story-ring{box-shadow:0 0 0 4px rgba(255,59,48,.22),0 12px 22px rgba(255,59,48,.18)}
.ft-story-ring{display:block;width:76px;height:76px;border-radius:50%;background:var(--ft-story-grad);padding:3px;transition:transform .3s var(--ft-spring),background .35s ease;box-shadow:0 10px 24px rgba(239,68,68,.15)}
.ft-story-card:hover .ft-story-ring{transform:scale(1.05)}
.ft-story-card.is-seen .ft-story-ring{background:rgba(255,255,255,.22);box-shadow:none}
.ft-story-avatar-sm{width:100%;height:100%;border-radius:50%;border:3px solid var(--ft-bg-base);background:var(--ft-surface);overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-size:34px}
.ft-story-avatar-sm img{width:100%;height:100%;object-fit:cover;display:block}
.ft-story-name,.ft-story-title{display:none!important}

.ft-story-modal{position:fixed!important;inset:0!important;z-index:2147483000!important;display:flex!important;align-items:center!important;justify-content:center!important;opacity:0;visibility:hidden;transition:opacity .32s var(--ft-smooth),visibility .32s var(--ft-smooth);background:rgba(0,0,0,.64)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none;color:#fff!important}
.ft-story-modal.is-active{opacity:1;visibility:visible;pointer-events:auto}
.ft-story-wrapper{position:relative;width:100%;max-width:420px;height:100vh;max-height:900px;background:#000;overflow:hidden;transform:translateY(40px) scale(.95);opacity:0;transition:all .5s var(--ft-spring);box-shadow:0 30px 70px rgba(0,0,0,.9);isolation:isolate;color:#fff!important}
.ft-story-modal.is-active .ft-story-wrapper{transform:translateY(0) scale(1);opacity:1}
@media(min-width:480px){.ft-story-wrapper{height:90vh;border-radius:32px;border:1px solid rgba(255,255,255,.12)}}
@media(max-width:479px){.ft-story-wrapper{max-width:none;border-radius:0}}

.ft-story-media-wrap{position:absolute;inset:0;z-index:1;background:#000}
.ft-story-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:filter .35s;background:#000}
.ft-story-wrapper.comments-open .ft-story-media{filter:blur(10px) brightness(.58)}
.ft-story-overlay-top{position:absolute;top:0;left:0;right:0;height:132px;background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.28),transparent);z-index:2;pointer-events:none}
.ft-story-overlay-bottom{position:absolute;bottom:0;left:0;right:0;height:235px;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.35),transparent);z-index:2;pointer-events:none}

.ft-tap-zone{position:absolute;top:96px;bottom:105px;z-index:5;background:transparent!important;border:0!important;box-shadow:none!important;color:transparent!important;padding:0!important;margin:0!important;appearance:none!important;-webkit-appearance:none!important}
.ft-tap-zone:hover,.ft-tap-zone:focus,.ft-tap-zone:active{background:transparent!important;box-shadow:none!important;outline:none!important;color:transparent!important}
/* RTL fixed: tapping right goes previous, left goes next */
.ft-tap-next{left:0;width:50%}
.ft-tap-prev{right:0;width:50%}

.ft-progress-container{position:absolute;top:12px;left:12px;right:12px;z-index:25;display:flex;gap:4px;direction:rtl;pointer-events:none}
.ft-progress-segment{flex:1;height:3px;background:rgba(255,255,255,.33);border-radius:10px;overflow:hidden;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ft-progress-fill{width:0;height:100%;background:#fff;border-radius:10px;transform-origin:right center;transition:none;box-shadow:0 0 12px rgba(255,255,255,.6)}
.ft-progress-segment.completed .ft-progress-fill{width:100%}

.ft-story-header{position:absolute;top:24px;left:16px;right:16px;z-index:26;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff!important;pointer-events:none}
.ft-sh-user{display:flex;align-items:center;gap:10px;min-width:0;pointer-events:auto}
.ft-sh-avatar{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.55);overflow:hidden;flex-shrink:0;background:rgba(255,255,255,.12)}
.ft-sh-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ft-sh-name{font-size:14px;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,.9);display:flex;align-items:center;gap:5px;max-width:245px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff!important;line-height:1.2}
.ft-sh-name i{color:#3b82f6!important;font-size:15px;display:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.ft-sh-name.is-verified i{display:inline-block}
.ft-sh-time{font-size:12px;color:rgba(255,255,255,.72)!important;font-weight:700;margin-top:2px;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.ft-story-top-actions{display:flex;align-items:center;gap:8px;pointer-events:auto}
.ft-story-sound,.ft-sh-close,.ft-cs-close{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;border-radius:50%!important;background:rgba(0,0,0,.34)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;font-size:20px!important;border:1px solid rgba(255,255,255,.14)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);line-height:1!important;box-shadow:0 8px 18px rgba(0,0,0,.25)!important}
.ft-story-sound:hover,.ft-sh-close:hover,.ft-cs-close:hover,.ft-story-sound:focus,.ft-sh-close:focus,.ft-cs-close:focus{background:rgba(0,0,0,.52)!important;color:#fff!important;transform:scale(1.04);outline:none!important}
.ft-story-sound.is-hidden{display:none!important}
.ft-story-sound i{font-size:20px;color:#fff!important;display:block!important}
.ft-close-x{font-size:28px;line-height:.8;color:#fff!important;font-weight:300;display:block;transform:translateY(-1px)}

.ft-story-actions{position:absolute;bottom:32px;left:16px;z-index:18;display:flex;flex-direction:column;gap:18px;align-items:center;color:#fff!important}
.ft-action-btn{display:flex!important;flex-direction:column;align-items:center;gap:5px;color:#fff!important;text-shadow:0 2px 5px rgba(0,0,0,.55);transition:transform .2s var(--ft-spring);cursor:pointer;background:transparent!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important;min-width:50px}
.ft-action-btn:hover,.ft-action-btn:focus,.ft-action-btn:active{background:transparent!important;color:#fff!important;box-shadow:none!important;outline:none!important}
.ft-action-btn:active{transform:scale(.86)}
.ft-action-icon{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;background:rgba(0,0,0,.30);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .3s var(--ft-spring);border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.ft-action-icon i{color:#fff!important;font-size:27px;display:block!important}
.ft-action-label{font-size:12px;font-weight:950;color:#fff!important;min-height:16px;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.75)}
.ft-action-btn.is-liked .ft-action-icon{background:rgba(255,59,48,.14);border-color:rgba(255,59,48,.38);box-shadow:0 8px 22px rgba(255,59,48,.22)}
.ft-action-btn.is-liked i{color:var(--ft-primary)!important;animation:ft-popHeart .5s var(--ft-spring)}
@keyframes ft-popHeart{0%{transform:scale(.5)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
.ft-story-caption{position:absolute;bottom:32px;right:16px;left:82px;z-index:12;font-size:14px;line-height:1.7;text-shadow:0 2px 4px rgba(0,0,0,.9);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:#fff!important;font-weight:750}

.ft-comments-sheet{position:absolute;bottom:0;left:0;right:0;height:70%;background:linear-gradient(180deg,rgba(24,24,28,.92),rgba(10,10,12,.96))!important;backdrop-filter:blur(34px) saturate(160%);-webkit-backdrop-filter:blur(34px) saturate(160%);border-top:1px solid rgba(255,255,255,.12);border-radius:32px 32px 0 0;z-index:40;transform:translateY(100%);transition:transform .45s var(--ft-spring);display:flex;flex-direction:column;box-shadow:0 -22px 55px rgba(0,0,0,.55);color:#fff!important}
.ft-story-wrapper.comments-open .ft-comments-sheet{transform:translateY(0)}
.ft-comments-handle{width:46px;height:5px;border-radius:999px;background:rgba(255,255,255,.28);margin:12px auto 2px;flex:0 0 auto}
.ft-cs-header{display:flex;justify-content:space-between;align-items:center;padding:14px 22px 12px;border-bottom:1px solid rgba(255,255,255,.08);flex:0 0 auto}
.ft-cs-title{font-size:16px;font-weight:950;color:#fff!important;display:flex;align-items:center;gap:8px}
.ft-cs-title:before{content:'\e15e';font-family:'Phosphor-Fill';font-size:20px;color:var(--ft-primary)}
.ft-cs-list{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:14px;-ms-overflow-style:none;scrollbar-width:none;color:#fff!important}
.ft-cs-list::-webkit-scrollbar{display:none}
.ft-comment-item{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.065);border-radius:18px;padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.ft-c-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#334155,#111827);overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff!important;font-weight:950;border:1px solid rgba(255,255,255,.1)}
.ft-c-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ft-c-content{flex:1;min-width:0;color:#fff!important}
.ft-c-user{font-size:13px;font-weight:950;margin-bottom:5px;color:rgba(255,255,255,.74)!important;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ft-c-text{font-size:14px;line-height:1.65;margin:0;color:#fff!important;word-break:break-word;font-weight:600}
.ft-pending-badge{display:inline-flex;background:#f59e0b;color:#111!important;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:950;box-shadow:0 4px 12px rgba(245,158,11,.25)}
.ft-comment-empty{color:rgba(255,255,255,.62)!important;text-align:center;font-size:13px;font-weight:700;padding:30px 10px}
.ft-cs-form{border-top:1px solid rgba(255,255,255,.08);padding:12px 14px calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto;gap:8px;background:rgba(0,0,0,.24);flex:0 0 auto}
.ft-cs-text{width:100%!important;resize:none!important;min-height:46px!important;max-height:96px!important;border-radius:18px!important;background:rgba(255,255,255,.09)!important;color:#fff!important;border:1px solid rgba(255,255,255,.12)!important;padding:12px 14px!important;font-size:13px!important;line-height:1.6!important;box-shadow:none!important;outline:none!important}
.ft-cs-text::placeholder{color:rgba(255,255,255,.48)!important}
.ft-cs-text:focus{border-color:rgba(255,59,48,.55)!important;box-shadow:0 0 0 3px rgba(255,59,48,.12)!important;background:rgba(255,255,255,.11)!important}
.ft-cs-submit{height:46px!important;border-radius:18px!important;background:linear-gradient(135deg,#ff3b30,#f59e0b)!important;color:#fff!important;font-weight:950!important;padding:0 14px!important;white-space:nowrap!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;border:0!important;box-shadow:0 10px 22px rgba(255,59,48,.24)!important;min-width:78px!important}
.ft-cs-submit i,.ft-cs-submit span{color:#fff!important;display:inline-block!important}
.ft-cs-submit:hover,.ft-cs-submit:focus{background:linear-gradient(135deg,#ff3b30,#f59e0b)!important;color:#fff!important;transform:translateY(-1px)}
.ft-cs-form.is-guest .ft-cs-text{opacity:.65;pointer-events:none}
.ft-cs-form.is-guest .ft-cs-submit{background:rgba(255,255,255,.14)!important;box-shadow:none!important;pointer-events:auto}
.ft-cs-message{grid-column:1/-1;font-size:12px;color:#fbbf24!important;min-height:16px;font-weight:800;line-height:1.6}
.ft-cs-message a{color:#fff!important;text-decoration:underline!important;text-underline-offset:4px}
.ft-story-toast{position:absolute;left:50%;bottom:118px;z-index:80;transform:translate(-50%,12px);background:rgba(10,10,12,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14);color:#fff!important;border-radius:999px;padding:10px 16px;font-size:13px;font-weight:900;box-shadow:0 12px 28px rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:all .25s var(--ft-smooth);white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
.ft-story-toast.is-active{opacity:1;visibility:visible;transform:translate(-50%,0)}
.ft-flying-heart{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:100px;color:var(--ft-primary)!important;filter:drop-shadow(0 10px 20px rgba(255,59,48,.5));z-index:50;pointer-events:none;opacity:0}
.ft-flying-heart.animate{animation:ft-flyHeartAnim .8s cubic-bezier(.175,.885,.32,1.275) forwards}
@keyframes ft-flyHeartAnim{0%{transform:translate(-50%,-50%) scale(0) rotate(-15deg);opacity:0}20%{transform:translate(-50%,-50%) scale(1.2) rotate(10deg);opacity:1}80%{transform:translate(-50%,-70%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(-50%,-100%) scale(.5);opacity:0}}


/* ===== v5.4 story light-mode tray fix + hard overlay priority ===== */
.ft-story-modal{z-index:2147483200!important;}
html:not(.dark):not(.farstube-dark) .ft-story-system-root{--ft-bg-base:#ffffff;--ft-surface:#ffffff;--ft-text-main:#0f172a;--ft-text-muted:#64748b;}
html:not(.dark):not(.farstube-dark) .ft-story-system-root .ft-story-avatar-sm{border-color:#fff!important;background:#fff!important;color:#0f172a!important;box-shadow:inset 0 0 0 1px rgba(15,23,42,.04)!important;}
html:not(.dark):not(.farstube-dark) .ft-story-system-root .ft-story-card.is-seen .ft-story-ring{background:rgba(15,23,42,.12)!important;box-shadow:none!important;}
html:not(.dark):not(.farstube-dark) .ft-story-system-root .ft-story-ring{box-shadow:0 10px 24px rgba(239,68,68,.12)!important;}

/* ===== v5.5 story light-mode edge cleanup ===== */
.ft-story-system-root .ft-story-thumb,
.ft-story-system-root .ft-story-item,
.ft-story-system-root button[data-story-open]{
  border-color:transparent!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.ft-story-system-root .ft-story-thumb img{
  border-radius:50%!important;
}
html:not(.dark):not(.farstube-dark) .ft-story-system-root .ft-story-ring,
body:not(.dark):not(.farstube-dark) .ft-story-system-root .ft-story-ring{
  box-shadow:0 0 0 3px rgba(255,255,255,.92),0 8px 22px rgba(15,23,42,.10)!important;
}
html:not(.dark):not(.farstube-dark) .ft-story-system-root .ft-story-item.is-seen .ft-story-ring,
body:not(.dark):not(.farstube-dark) .ft-story-system-root .ft-story-item.is-seen .ft-story-ring{
  background:#e5e7eb!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.94)!important;
}
html:not(.dark):not(.farstube-dark) .ft-story-system-root,
body:not(.dark):not(.farstube-dark) .ft-story-system-root{
  --ft-bg-base:#fff!important;
  --ft-surface:#f8fafc!important;
  --ft-text-main:#0f172a!important;
  --ft-text-muted:#64748b!important;
}
