*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background:#000;color:#fff;overflow-x:hidden}
.top{position:fixed;top:0;left:0;right:0;height:56px;z-index:40;background:#000;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #111}.logo{height:26px}.searchBar{flex:1;max-width:520px;margin:0 10px;background:#111;border:1px solid #1f1f1f;border-radius:22px;display:flex;align-items:center;padding:9px 15px}.searchBar input{background:transparent;border:none;color:#fff;outline:none;width:100%;font-size:14px}
#feed{height:100dvh;width:100vw;overflow-y:scroll;scroll-snap-type:y mandatory;background:#000;scrollbar-width:none;-ms-overflow-style:none}#feed::-webkit-scrollbar{display:none;width:0;height:0}.card{height:100dvh;width:100vw;position:relative;scroll-snap-align:start;background:#000;display:flex;justify-content:center;align-items:center}.card video{width:100%;height:100%;object-fit:contain;background:#000}.card.landscape video{object-fit:contain}.card.portrait video{object-fit:cover}.card img.postImage{width:100%;height:100%;object-fit:contain;background:#000}.skipBtns{position:absolute;right:12px;bottom:350px;z-index:16;display:flex;gap:8px}.skipBtn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:800;cursor:pointer;backdrop-filter:blur(8px)}.creatorLink{color:#fff;text-decoration:none;cursor:pointer}.followBtn{margin-top:7px;background:#00E676;color:#000;border:0;border-radius:16px;padding:6px 12px;font-size:11px;font-weight:900;cursor:pointer}.followBtn.following{background:#222;color:#fff;border:1px solid #444}.mediaType{display:flex;gap:8px;margin-bottom:10px}.mediaType button{flex:1;background:#111;color:#aaa;border:1px solid #2a2a2a;border-radius:10px;padding:10px;font-weight:800;cursor:pointer}.mediaType button.active{background:#00E676;color:#000;border-color:#00E676}.postPhoto{width:100%;max-height:260px;object-fit:contain;border-radius:12px;margin-top:10px;display:none}
.mute{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;width:64px;height:64px;background:rgba(0,0,0,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px}.mute.hide{opacity:0}
.info{position:absolute;left:12px;bottom:95px;z-index:10;max-width:62%;text-shadow:0 1px 6px #000}.act{position:absolute;right:10px;bottom:110px;z-index:15;display:flex;flex-direction:column;gap:18px;align-items:center}.ic{width:44px;height:44px;background:rgba(255,255,255,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer}.ic.liked{background:#00E676;color:#000}.avatar-feed{width:48px;height:48px;border-radius:50%;border:2px solid #fff;overflow:hidden;background:#111;position:relative}.avatar-feed img{width:100%;height:100%;object-fit:cover}.follow-plus{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:18px;height:18px;background:#00E676;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#000;font-weight:900;font-size:13px;border:2px solid #000}
.progress{position:absolute;bottom:66px;left:0;width:100%;height:14px;background:transparent;z-index:30;cursor:pointer;touch-action:none;display:flex;align-items:center;padding:0 0}.progress::before{content:"";position:absolute;left:0;right:0;top:6px;height:3px;background:rgba(255,255,255,.28);border-radius:99px}.progress i{position:absolute;left:0;top:6px;display:block;height:3px;background:#00E676;width:0%;border-radius:99px}.progress i::after{content:"";position:absolute;right:-5px;top:-4px;width:11px;height:11px;border-radius:50%;background:#00E676;box-shadow:0 1px 5px rgba(0,0,0,.45);transform:scale(.9);transition:transform .12s ease}.progress.seeking i::after,.progress:hover i::after{transform:scale(1.15)}
.nav{position:fixed;bottom:0;left:0;right:0;height:66px;background:#000;border-top:1px solid #1a1a1a;display:flex;justify-content:space-around;align-items:center;z-index:50}.nav a{color:#777;font-size:10px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:50px;text-decoration:none} .nav a.on{color:#fff} .plus-nav{width:44px;height:30px;background:linear-gradient(90deg,#00E676,#ff2d55);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#000;font-weight:900;font-size:22px}
/* FREE MEDIA UPLOAD MODAL */
#upModal{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:999;display:none;align-items:center;justify-content:center;padding:16px} .upBox{background:#111;width:100%;max-width:420px;border-radius:20px;border:1px solid #222;overflow:hidden;max-height:90vh;overflow-y:auto} .upHead{padding:16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #222} .upBody{padding:16px} .drop{border:2px dashed #333;border-radius:16px;padding:20px;text-align:center;background:#0d0d0d;cursor:pointer;transition:.2s} .drop.dragover{border-color:#00E676;background:#0f1f15} .drop video{width:100%;max-height:200px;border-radius:12px;margin-top:10px;display:none} .field{margin-top:14px} .field label{font-size:12px;color:#888;margin-bottom:6px;display:block} .field input,.field textarea, .field select{width:100%;padding:12px;background:#000;border:1px solid #333;border-radius:10px;color:#fff;outline:none;font-size:14px} .field input:focus,.field textarea:focus{border-color:#00E676} .progWrap{margin-top:12px;background:#222;height:6px;border-radius:10px;overflow:hidden;display:none} .progBar{height:100%;background:linear-gradient(90deg,#00E676,#ff2d55);width:0%;transition:.2s} .upBtn{width:100%;padding:14px;background:linear-gradient(90deg,#00E676,#ff2d55);border:none;border-radius:30px;font-weight:800;color:#000;margin-top:16px;cursor:pointer;font-size:15px} .upBtn:disabled{opacity:.5}
.formatMeta{margin-top:8px;padding:9px 10px;border-radius:10px;background:#0d0d0d;border:1px solid #222;color:#888;font-size:11px;line-height:1.45}.formatMeta.ok{border-color:#00E67655;color:#00E676}.formatMeta.warn{border-color:#ffb30066;color:#ffb300}

/* PRO NOTIFICATIONS */
#notifToast{display:none;position:fixed;top:62px;right:12px;left:auto;z-index:120;background:#111;border:1px solid #262626;border-radius:12px;padding:9px 11px;box-shadow:0 8px 24px rgba(0,0,0,.45);max-width:330px}
#notifToast .ntRow{display:flex;align-items:center;gap:8px}
#notifToastTitle{font-size:12px;font-weight:800}
#notifToastText{color:#999;font-size:11px;margin-top:2px;line-height:1.25}
#notifEnable{background:#00E676;border:0;border-radius:14px;padding:6px 10px;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap}
#notifClose{background:transparent;border:0;color:#777;font-size:15px;cursor:pointer;padding:2px}
#notifOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(3px);z-index:230}
#notifPanel{position:fixed;inset:0;width:100vw;height:100dvh;background:rgba(8,8,8,.98);z-index:240;display:none;flex-direction:column;box-shadow:none}
#notifPanel.open{display:flex}
.notifHead{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100vw - 760px)/2));border-bottom:1px solid #242424;flex-shrink:0}
.notifHead b{font-size:22px}.notifHead button{border:1px solid #333;background:#111;color:#fff;width:46px;height:46px;border-radius:50%;font-size:22px;cursor:pointer}
#notifList{flex:1;overflow:auto;width:min(760px,100%);margin:0 auto;padding:8px 18px 40px;box-sizing:border-box}
.notifEmpty{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;color:#777;flex-direction:column;gap:10px}
.notifEmpty .bellBig{font-size:54px;opacity:.55}.notifEmpty b{color:#ddd;font-size:18px}.notifEmpty span{font-size:13px;max-width:360px;line-height:1.5}
.notifItem{display:flex;gap:14px;padding:18px 4px;border-bottom:1px solid #222;cursor:pointer;transition:.15s}.notifItem:hover{background:#111}.notifItem.unread{background:#0e1711}.notifIcon{width:48px;height:48px;border-radius:50%;background:#171717;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:22px}.notifContent{min-width:0;flex:1}.notifTitle{font-size:16px;font-weight:800}.notifBody{font-size:14px;color:#aaa;margin-top:5px;line-height:1.45}.notifTime{font-size:11px;color:#666;margin-top:7px}
@media(max-width:600px){#notifToast{left:12px;right:12px;max-width:none}.notifHead{padding:0 16px}.notifHead b{font-size:20px}#notifList{padding-left:16px;padding-right:16px}.notifItem{padding:16px 2px}}

/* SAFANKSHORT CONTENT FILTER BAR */
#contentFilters{position:fixed;top:56px;left:0;right:0;z-index:35;background:#000;border-bottom:1px solid #171717;padding:8px 12px 9px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
#contentFilters::-webkit-scrollbar{display:none}
.contentFilter{flex:0 0 auto;border:1px solid #2a2a2a;background:#111;color:#aaa;border-radius:22px;padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:.18s}
.contentFilter:hover{border-color:#444;color:#fff}
.contentFilter.active{background:#00E676;color:#000;border-color:#00E676}
#feed{height:calc(100dvh - 108px);margin-top:108px}
.noContent{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;color:#777;flex-direction:column;gap:8px}
.noContent b{color:#ddd}
.noContent small{max-width:300px;line-height:1.45}
@media(max-width:600px){#contentFilters{padding-left:10px;padding-right:10px}.contentFilter{font-size:11px;padding:7px 12px}}

/* Notification permission is persistent: the prompt is shown only while permission is undecided. */
@media(max-width:600px){.searchBar{max-width:none;margin:0 8px}.searchBar input{font-size:13px}}

/* SAFANK PRO CREATE COMPOSER */
.sfComposer{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:999;display:none;align-items:center;justify-content:center;padding:20px}
.sfComposerBox{width:min(680px,100%);max-height:min(92vh,860px);background:#101010;border:1px solid #292929;border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.65);overflow:hidden;display:flex;flex-direction:column}
.sfComposerHead{height:76px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #242424;flex:0 0 auto}
.sfEyebrow{font-size:9px;letter-spacing:2px;color:#777;font-weight:800;margin-bottom:3px}.sfComposerHead h2{font-size:21px;letter-spacing:-.3px}.sfClose{width:38px;height:38px;border-radius:50%;border:1px solid #303030;background:#181818;color:#aaa;font-size:24px;cursor:pointer}.sfClose:hover{color:#fff;background:#222}
.sfComposerBody{overflow:auto;padding:22px}.sfEmptyCreate{text-align:center;padding:30px 18px 36px}.sfEmptyIcon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:#1a1a1a;border:1px solid #303030;color:#ddd;font-size:28px}.sfEmptyCreate h3{font-size:20px;margin-bottom:8px}.sfEmptyCreate p{max-width:480px;margin:0 auto;color:#777;font-size:13px;line-height:1.6}.sfCreateActions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px auto 0;max-width:520px}.sfCreateCard{display:flex;align-items:center;gap:13px;text-align:left;padding:17px;border-radius:14px;border:1px solid #292929;background:#151515;color:#fff;cursor:pointer;transition:.18s}.sfCreateCard:hover{border-color:#555;background:#1b1b1b;transform:translateY(-1px)}.sfCreateIcon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#202020;color:#fff;font-weight:900}.sfCreateCard b{display:block;font-size:14px}.sfCreateCard small{display:block;color:#777;font-size:11px;margin-top:4px}.sfSelectedComposer{max-width:620px;margin:auto}.sfMediaPreviewWrap{position:relative}.sfMediaPreview{min-height:230px;border:1px solid #2a2a2a;border-radius:16px;background:#090909;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.sfMediaPreview video,.sfMediaPreview img{max-width:100%;max-height:360px;width:auto;height:auto;display:none;object-fit:contain}.sfPreviewIcon{position:absolute;z-index:2;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.65);border:1px solid #333;display:grid;place-items:center;color:#aaa;font-size:25px}.sfMediaPreview:has(video[style*="display: block"]) .sfPreviewIcon,.sfMediaPreview:has(img[style*="display: block"]) .sfPreviewIcon{display:none}.sfMediaPreview p{color:#777;font-size:12px}.sfChangeBtn{position:absolute;right:12px;top:12px;border:1px solid #444;background:rgba(10,10,10,.82);color:#fff;border-radius:9px;padding:8px 11px;font-size:11px;font-weight:700;cursor:pointer;z-index:5}.sfDetectedMeta{margin-top:10px;padding:11px 13px;border:1px solid #252525;background:#141414;border-radius:11px;color:#aaa;font-size:11px;line-height:1.45}.sfDetectedMeta strong{color:#eee}.sfField{position:relative;margin-top:16px}.sfField label{display:flex;justify-content:space-between;align-items:center;color:#aaa;font-size:11px;font-weight:700;margin-bottom:7px}.sfField label span{font-weight:500;color:#666}.sfField input,.sfField textarea,.sfField select{width:100%;background:#080808;border:1px solid #2b2b2b;color:#fff;border-radius:10px;padding:12px 13px;outline:none;font:inherit;font-size:13px}.sfField textarea{resize:vertical;min-height:78px}.sfField input:focus,.sfField textarea:focus,.sfField select:focus{border-color:#666}.sfField input::placeholder,.sfField textarea::placeholder{color:#555}.sfField select{appearance:auto}.sfField #tCount{position:absolute;right:10px;bottom:-17px;color:#555;font-size:10px}.sfGrid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sfProgWrap{display:none;margin-top:18px;height:6px;background:#252525;border-radius:99px;overflow:hidden}.sfProgBar{height:100%;width:0;background:#fff;border-radius:99px;transition:width .18s}.sfProgText{text-align:center;color:#888;font-size:11px;min-height:16px;margin-top:9px}.sfPublishBtn{width:100%;height:48px;margin-top:10px;border:0;border-radius:12px;background:#fff;color:#000;font-weight:850;font-size:14px;cursor:pointer}.sfPublishBtn:hover{background:#e9e9e9}.sfPublishBtn:disabled{opacity:.45;cursor:not-allowed}.sfFreeNote{text-align:center;color:#555;font-size:10px;margin:9px 0 0}.sfComposerBody::-webkit-scrollbar{width:7px}.sfComposerBody::-webkit-scrollbar-thumb{background:#333;border-radius:99px}
@media(max-width:600px){.sfComposer{padding:0;align-items:flex-end}.sfComposerBox{width:100%;max-height:94vh;border-radius:22px 22px 0 0}.sfComposerHead{height:68px;padding:0 16px}.sfComposerBody{padding:16px}.sfEmptyCreate{padding:24px 6px 28px}.sfCreateActions{grid-template-columns:1fr}.sfMediaPreview{min-height:200px}.sfMediaPreview video,.sfMediaPreview img{max-height:300px}.sfGrid2{grid-template-columns:1fr}.sfComposerHead h2{font-size:19px}}