:root{

  --bg:#fafafa;
  --surface:#ffffff;
  --surface2:#f5f6f8;
  --text:#15171a;
  --muted:#7b8189;
  --line:#e4e7eb;

  --accent:#6256e8;
  --accent2:#8e6cff;

  --danger:#e6495b;

  --shadow:
    0 18px 50px rgba(17,24,39,.09);

  --radius:20px;

}


*{
  box-sizing:border-box;
}


html,
body{

  margin:0;
  width:100%;
  min-height:100%;

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(98,86,232,.04),
      transparent 35%
    ),
    var(--bg);

  color:var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

}


button,
input,
textarea{

  font:inherit;

}


button{

  cursor:pointer;

}


.hidden{

  display:none !important;

}


/* =====================================================
   TOAST
===================================================== */

#toast{

  position:fixed;

  left:50%;
  bottom:30px;

  transform:
    translateX(-50%)
    translateY(20px);

  opacity:0;

  z-index:9999;

  padding:13px 18px;

  border-radius:999px;

  background:#15171a;

  color:#fff;

  box-shadow:var(--shadow);

  font-size:13px;

  pointer-events:none;

  transition:
    .25s ease;

}


#toast.show{

  opacity:1;

  transform:
    translateX(-50%)
    translateY(0);

}


/* =====================================================
   AUTH
===================================================== */

.auth-page{

  min-height:100vh;

  display:flex;

  justify-content:center;

  align-items:center;

  padding:24px;

  position:relative;

  overflow:hidden;

}


.auth-background{

  position:absolute;
  inset:0;

  pointer-events:none;

}


.orb{

  position:absolute;

  border-radius:50%;

  filter:blur(30px);

  opacity:.6;

}


.orb-one{

  width:400px;
  height:400px;

  background:
    rgba(98,86,232,.18);

  top:-120px;
  left:-100px;

}


.orb-two{

  width:350px;
  height:350px;

  background:
    rgba(142,108,255,.16);

  right:-100px;
  bottom:-100px;

}


.auth-card{

  width:
    min(420px,100%);

  position:relative;

  background:
    rgba(255,255,255,.9);

  border:1px solid
    rgba(255,255,255,.7);

  backdrop-filter:
    blur(20px);

  padding:32px;

  border-radius:28px;

  box-shadow:
    0 30px 100px
    rgba(35,27,81,.14);

}


.brand{

  display:flex;

  align-items:center;

  gap:13px;

  margin-bottom:28px;

}


.brand-mark{

  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      var(--accent),
      var(--accent2)
    );

  color:#fff;

  font-weight:900;

  font-size:23px;

}


.brand-name{

  font-weight:900;

  font-size:19px;

  letter-spacing:.04em;

}


.brand-sub{

  font-size:9px;

  color:var(--muted);

  letter-spacing:.18em;

  margin-top:3px;

}


.auth-tabs{

  display:grid;

  grid-template-columns:1fr 1fr;

  border-bottom:1px solid var(--line);

  margin-bottom:22px;

}


.auth-tab{

  border:0;

  background:transparent;

  padding:14px 8px;

  color:var(--muted);

  position:relative;

  font-weight:800;

  font-size:12px;

  letter-spacing:.12em;

}


.auth-tab.active{

  color:var(--text);

}


.auth-tab.active::after{

  content:"";

  position:absolute;

  height:2px;

  background:var(--accent);

  left:0;
  right:0;
  bottom:-1px;

}


.auth-form{

  display:flex;

  flex-direction:column;

  gap:16px;

}


.auth-form label{

  display:flex;

  flex-direction:column;

  gap:8px;

  font-size:12px;

  color:#646b73;

  font-weight:700;

}


.auth-form input,
.auth-form textarea{

  width:100%;

  border:
    1px solid var(--line);

  background:#fff;

  padding:13px 14px;

  border-radius:13px;

  outline:none;

  color:var(--text);

  transition:.18s ease;

}


.auth-form input:focus,
.auth-form textarea:focus{

  border-color:
    rgba(98,86,232,.7);

  box-shadow:
    0 0 0 4px
    rgba(98,86,232,.09);

}


.auth-note{

  color:var(--muted);

  font-size:10px;

  line-height:1.6;

  margin-top:18px;

  text-align:center;

}


/* =====================================================
   BUTTONS
===================================================== */

.primary-btn{

  border:0;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2)
    );

  padding:11px 16px;

  border-radius:12px;

  font-weight:800;

  font-size:11px;

  letter-spacing:.08em;

  box-shadow:
    0 10px 24px
    rgba(98,86,232,.22);

}


.primary-btn:hover{

  transform:translateY(-1px);

}


.primary-btn.big{

  padding:15px 18px;

}


.ghost-btn{

  border:1px solid var(--line);

  background:#fff;

  color:var(--text);

  padding:10px 14px;

  border-radius:12px;

  font-size:11px;

  font-weight:800;

}


.text-btn{

  border:0;

  background:transparent;

  color:var(--accent);

  font-size:10px;

  font-weight:900;

  letter-spacing:.08em;

}


.danger-btn{

  border:1px solid #f2c6cb;

  background:#fff3f4;

  color:var(--danger);

  padding:13px;

  border-radius:12px;

  font-weight:900;

}


/* =====================================================
   TOP NAV
===================================================== */

.top-nav{

  height:72px;

  position:sticky;

  top:0;

  z-index:100;

  display:grid;

  grid-template-columns:
    1fr
    minmax(240px,420px)
    1fr;

  align-items:center;

  gap:22px;

  padding:
    0 max(20px, calc((100vw - 1200px)/2));

  background:
    rgba(255,255,255,.92);

  border-bottom:
    1px solid var(--line);

  backdrop-filter:blur(18px);

}


.logo-btn{

  justify-self:start;

  display:flex;

  align-items:center;

  gap:10px;

  border:0;

  background:transparent;

  padding:0;

}


.logo-icon{

  width:34px;
  height:34px;

  display:grid;

  place-items:center;

  border-radius:11px;

  color:#fff;

  background:
    linear-gradient(
      145deg,
      var(--accent),
      var(--accent2)
    );

  font-weight:900;

}


.logo-text{

  font-size:14px;

  font-weight:900;

  letter-spacing:.12em;

}


.search-box{

  height:40px;

  background:
    #f2f3f5;

  border-radius:13px;

  display:flex;

  align-items:center;

  padding:
    0 13px;

  gap:8px;

  color:#8b9198;

}


.search-box input{

  flex:1;

  border:0;

  outline:0;

  background:transparent;

}


.nav-actions{

  display:flex;

  justify-content:flex-end;

  align-items:center;

  gap:7px;

}


.icon-btn{

  width:38px;
  height:38px;

  border:0;

  background:transparent;

  border-radius:12px;

  font-size:22px;

}


.icon-btn:hover{

  background:#f2f3f5;

}


.avatar-btn{

  width:38px;
  height:38px;

  border:1px solid var(--line);

  padding:0;

  border-radius:50%;

  overflow:hidden;

  background:#eee;

}


.avatar-btn img{

  width:100%;
  height:100%;

  object-fit:cover;

}


/* =====================================================
   MAIN
===================================================== */

.main-layout{

  max-width:1200px;

  margin:auto;

}


.view{

  display:none;

  padding:
    26px
    20px
    100px;

}


.view.active-view{

  display:block;

}


#homeView{

  display:grid;

  grid-template-columns:
    minmax(0,620px)
    300px;

  gap:60px;

  justify-content:center;

}


.feed-column{

  min-width:0;

}


.side-column{

  padding-top:24px;

  position:sticky;

  top:95px;

  align-self:start;

}


.stories-card{

  background:#fff;

  border:1px solid var(--line);

  border-radius:16px;

  padding:16px;

  margin-bottom:18px;

  overflow:hidden;

}


.stories{

  display:flex;

  gap:18px;

  overflow-x:auto;

  scrollbar-width:none;

}


.stories::-webkit-scrollbar{

  display:none;

}


.story{

  min-width:64px;

  text-align:center;

}


.story-ring{

  width:60px;
  height:60px;

  border-radius:50%;

  padding:2px;

  background:
    linear-gradient(
      135deg,
      #ff7c6a,
      #7b61ff,
      #39baf8
    );

}


.story-ring img{

  width:100%;
  height:100%;

  border-radius:50%;

  border:3px solid #fff;

  object-fit:cover;

}


.story-name{

  margin-top:6px;

  display:block;

  font-size:10px;

  overflow:hidden;

  white-space:nowrap;

  text-overflow:ellipsis;

}


/* =====================================================
   POST
===================================================== */

.post{

  background:#fff;

  border:1px solid var(--line);

  border-radius:16px;

  overflow:hidden;

  margin-bottom:18px;

}


.post-header{

  display:flex;

  align-items:center;

  padding:13px 15px;

  gap:10px;

}


.post-avatar{

  width:38px;
  height:38px;

  border-radius:50%;

  overflow:hidden;

  background:#eee;

  flex-shrink:0;

}


.post-avatar img{

  width:100%;
  height:100%;

  object-fit:cover;

}


.post-user{

  flex:1;

  min-width:0;

}


.post-user strong{

  display:block;

  font-size:12px;

}


.post-user span{

  color:var(--muted);

  font-size:10px;

}


.post-menu{

  border:0;

  background:transparent;

  font-size:18px;

}


.post-media{

  width:100%;

  background:#edf0f3;

  cursor:pointer;

}


.post-media img,
.post-media video{

  display:block;

  width:100%;

  max-height:720px;

  object-fit:cover;

}


.post-actions{

  display:flex;

  gap:4px;

  padding:9px 11px 3px;

}


.post-action{

  border:0;

  background:transparent;

  font-size:23px;

  width:37px;
  height:37px;

  border-radius:50%;

}


.post-action:hover{

  background:#f4f5f6;

}


.post-action.liked{

  color:#e8485a;

}


.post-save{

  margin-left:auto;

}


.post-body{

  padding:
    0 15px
    15px;

}


.post-likes{

  font-weight:800;

  font-size:11px;

  margin-bottom:7px;

}


.post-caption{

  font-size:12px;

  line-height:1.55;

}


.post-caption strong{

  margin-right:5px;

}


.post-comments-btn{

  border:0;

  padding:0;

  margin-top:9px;

  background:transparent;

  color:var(--muted);

  font-size:11px;

}


.post-time{

  margin-top:10px;

  font-size:9px;

  color:#a1a6ad;

  text-transform:uppercase;

  letter-spacing:.08em;

}


/* =====================================================
   SIDE PROFILE
===================================================== */

.mini-profile{

  display:flex;

  align-items:center;

  gap:11px;

  margin-bottom:26px;

}


.mini-avatar-btn{

  width:52px;
  height:52px;

  border-radius:50%;

  overflow:hidden;

  border:1px solid var(--line);

  padding:0;

  background:#eee;

}


.mini-avatar-btn img{

  width:100%;
  height:100%;
  object-fit:cover;

}


.mini-profile>div{

  flex:1;

}


.mini-profile strong{

  display:block;

  font-size:12px;

}


.mini-profile span{

  color:var(--muted);

  font-size:11px;

}


.suggestions-head{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:12px;

  font-size:11px;

  font-weight:800;

  color:#7c838c;

}


.suggestions{

  display:flex;

  flex-direction:column;

  gap:14px;

}


.suggestion{

  display:flex;

  align-items:center;

  gap:10px;

}


.suggestion img{

  width:38px;
  height:38px;

  border-radius:50%;

  object-fit:cover;

  background:#eee;

}


.suggestion-info{

  min-width:0;

  flex:1;

}


.suggestion-info strong{

  display:block;

  font-size:11px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

}


.suggestion-info span{

  display:block;

  font-size:9px;

  color:var(--muted);

}


.follow-btn{

  border:0;

  background:transparent;

  color:var(--accent);

  font-size:9px;

  font-weight:900;

}


.footer-note{

  margin-top:35px;

  color:#b0b4ba;

  font-size:9px;

  line-height:1.7;

}


/* =====================================================
   PAGE HEAD
===================================================== */

.page-head{

  max-width:1040px;

  margin:
    0 auto 24px;

  display:flex;

  align-items:end;

  justify-content:space-between;

}


.page-head h1{

  margin:7px 0 0;

  font-size:36px;

  letter-spacing:-.04em;

}


.eyebrow{

  color:#868d95;

  letter-spacing:.2em;

  font-size:9px;

  font-weight:900;

}


/* =====================================================
   EXPLORE
===================================================== */

.explore-grid{

  max-width:1040px;

  margin:auto;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:4px;

}


.explore-item{

  aspect-ratio:1;

  overflow:hidden;

  background:#eee;

  cursor:pointer;

}


.explore-item img,
.explore-item video{

  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:.25s;

}


.explore-item:hover img,
.explore-item:hover video{

  transform:scale(1.03);

}


/* =====================================================
   CREATE
===================================================== */

.create-view{

  justify-content:center;

}


.create-card{

  max-width:680px;

  margin:auto;

}


.create-form{

  background:#fff;

  border:1px solid var(--line);

  border-radius:18px;

  padding:20px;

}


.create-form>label{

  display:flex;

  flex-direction:column;

  gap:8px;

  margin-top:16px;

  color:#717880;

  font-size:11px;

  font-weight:800;

}


.create-form input,
.create-form textarea{

  border:1px solid var(--line);

  border-radius:12px;

  padding:13px;

  outline:none;

  resize:vertical;

}


.drop-zone{

  border:2px dashed #dce0e5;

  border-radius:17px;

  overflow:hidden;

  min-height:330px;

  display:grid;

  place-items:center;

  background:#fafbfc;

}


.preview-area{

  text-align:center;

  display:flex;

  flex-direction:column;

  gap:10px;

  align-items:center;

  color:#7e8790;

  padding:20px;

}


.upload-icon{

  width:66px;
  height:66px;

  border-radius:20px;

  display:grid;
  place-items:center;

  background:#f1f0ff;

  color:var(--accent);

  font-size:28px;

}


.preview-area strong{

  color:var(--text);

}


.preview-media{

  width:100%;
  height:330px;

  object-fit:contain;

  background:#0d1014;

}


/* =====================================================
   PROFILE
===================================================== */

.profile-head{

  max-width:920px;

  margin:
    20px auto 30px;

  display:grid;

  grid-template-columns:180px 1fr;

  gap:50px;

}


.profile-avatar-large{

  width:160px;
  height:160px;

  border-radius:50%;

  overflow:hidden;

  background:#eee;

  border:4px solid #fff;

  box-shadow:
    0 0 0 1px var(--line);

}


.profile-avatar-large img{

  width:100%;
  height:100%;

  object-fit:cover;

}


.profile-line{

  display:flex;

  align-items:center;

  gap:10px;

}


.profile-line h1{

  font-size:24px;

  margin:0;

  margin-right:7px;

}


.profile-more{

  margin-left:auto;

}


.stats{

  display:flex;

  gap:28px;

  margin:
    22px 0;

  font-size:12px;

}


.stats div{

  display:flex;

  gap:5px;

}


.bio-block strong{

  font-size:12px;

}


.bio-block p{

  font-size:12px;

  line-height:1.5;

  margin:5px 0;

  color:#50565d;

}


.bio-block a{

  color:var(--accent);

  font-size:11px;

}


.profile-tabs{

  max-width:920px;

  margin:auto;

  border-top:1px solid var(--line);

  display:flex;

  justify-content:center;

}


.profile-tab{

  width:140px;

  padding:16px;

  border:0;

  background:transparent;

  font-size:10px;

  font-weight:900;

  letter-spacing:.14em;

  color:#8a9198;

  position:relative;

}


.profile-tab.active{

  color:var(--text);

}


.profile-tab.active::after{

  content:"";

  position:absolute;

  top:-1px;

  left:18px;

  right:18px;

  height:2px;

  background:var(--text);

}


.profile-grid{

  max-width:920px;

  margin:
    4px auto 0;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:4px;

}


.profile-grid .grid-item{

  aspect-ratio:1;

  overflow:hidden;

  cursor:pointer;

  background:#eee;

}


.profile-grid img,
.profile-grid video{

  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

}


/* =====================================================
   USER SEARCH
===================================================== */

.user-results{

  max-width:700px;

  margin:auto;

  display:flex;

  flex-direction:column;

  gap:8px;

}


.user-card{

  background:#fff;

  border:1px solid var(--line);

  border-radius:15px;

  padding:13px;

  display:flex;

  align-items:center;

  gap:12px;

}


.user-card img{

  width:48px;
  height:48px;

  border-radius:50%;

  object-fit:cover;

}


.user-card-info{

  flex:1;

}


.user-card-info strong{

  display:block;

  font-size:12px;

}


.user-card-info span{

  display:block;

  color:var(--muted);

  font-size:11px;

}


/* =====================================================
   NOTIFICATIONS
===================================================== */

.notifications{

  max-width:700px;

  margin:auto;

  display:flex;

  flex-direction:column;

}


.notification{

  display:flex;

  align-items:center;

  gap:10px;

  padding:15px;

  border-bottom:1px solid var(--line);

}


.notification.unread{

  background:#faf9ff;

}


.notification img{

  width:42px;
  height:42px;

  border-radius:50%;

  object-fit:cover;

}


.notification-text{

  flex:1;

  font-size:11px;

  line-height:1.5;

}


.notification-time{

  font-size:9px;

  color:var(--muted);

}


/* =====================================================
   MODALS
===================================================== */

.modal{

  position:fixed;

  inset:0;

  z-index:300;

  background:
    rgba(10,12,17,.66);

  display:flex;

  align-items:center;

  justify-content:center;

  padding:20px;

  backdrop-filter:blur(7px);

}


.modal-card{

  background:#fff;

  width:
    min(520px,100%);

  max-height:90vh;

  overflow:auto;

  padding:24px;

  border-radius:20px;

  box-shadow:
    0 30px 100px
    rgba(0,0,0,.25);

}


.modal-head{

  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-bottom:18px;

}


.modal-head h2{

  margin:6px 0 0;

}


.close-btn{

  width:38px;
  height:38px;

  border:0;

  border-radius:50%;

  background:#f0f1f3;

  font-size:24px;

}


.post-modal-card{

  width:
    min(1000px,96vw);

  max-height:92vh;

  overflow:hidden;

  border-radius:20px;

  background:#fff;

  position:relative;

}


.modal-x{

  position:absolute;

  right:12px;
  top:12px;

  z-index:2;

  width:36px;
  height:36px;

  border:0;

  background:
    rgba(255,255,255,.9);

  border-radius:50%;

  font-size:23px;

}


.post-modal-content{

  display:grid;

  grid-template-columns:
    1.2fr
    .8fr;

  max-height:92vh;

}


.modal-media{

  background:#0b0d10;

  display:flex;

  align-items:center;

  justify-content:center;

  min-height:400px;

}


.modal-media img,
.modal-media video{

  width:100%;
  height:100%;

  max-height:92vh;

  object-fit:contain;

}


.modal-comments{

  display:flex;

  flex-direction:column;

  min-width:0;

}


.modal-comments-head{

  padding:16px;

  border-bottom:1px solid var(--line);

}


.modal-comments-list{

  flex:1;

  overflow:auto;

  padding:16px;

}


.comment{

  display:flex;

  gap:9px;

  margin-bottom:14px;

}


.comment img{

  width:32px;
  height:32px;

  border-radius:50%;

  object-fit:cover;

}


.comment-body{

  font-size:11px;

  line-height:1.5;

}


.comment-body strong{

  margin-right:5px;

}


.comment-form{

  display:flex;

  border-top:1px solid var(--line);

}


.comment-form input{

  flex:1;

  border:0;

  padding:15px;

  outline:0;

}


.comment-form button{

  border:0;

  background:#fff;

  color:var(--accent);

  font-weight:900;

  padding:0 16px;

}


/* =====================================================
   EMPTY
===================================================== */

.empty-state{

  text-align:center;

  padding:70px 25px;

  color:var(--muted);

}


.empty-icon{

  font-size:50px;

  margin-bottom:10px;

}


.empty-state h3{

  color:var(--text);

  margin-bottom:5px;

}


/* =====================================================
   MOBILE NAV
===================================================== */

.mobile-nav{

  display:none;

}


@media(max-width:900px){

  .top-nav{

    grid-template-columns:
      auto
      1fr
      auto;

    padding:
      0 13px;

  }


  .logo-text{

    display:none;

  }


  .search-box{

    max-width:none;

  }


  .nav-actions .icon-btn{

    display:none;

  }


  .main-layout{

    width:100%;

  }


  #homeView{

    display:block;

    padding-bottom:80px;

  }


  .side-column{

    display:none;

  }


  .view{

    padding:
      18px
      12px
      85px;

  }


  .stories-card{

    border-left:0;
    border-right:0;

    border-radius:0;

  }


  .post{

    border-left:0;
    border-right:0;

    border-radius:0;

  }


  .profile-head{

    grid-template-columns:
      95px 1fr;

    gap:18px;

    margin-top:8px;

  }


  .profile-avatar-large{

    width:88px;
    height:88px;

  }


  .profile-line{

    flex-wrap:wrap;

  }


  .profile-line h1{

    width:100%;

  }


  .stats{

    gap:13px;

    margin:12px 0;

    font-size:11px;

  }


  .stats div{

    flex-direction:column;

    gap:2px;

  }


  .profile-grid,
  .explore-grid{

    gap:2px;

  }


  .post-modal-content{

    display:block;

    overflow:auto;

  }


  .modal-media{

    min-height:300px;

  }


  .modal-comments{

    max-height:350px;

  }


  .mobile-nav{

    display:grid;

    grid-template-columns:
      repeat(5,1fr);

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    height:64px;

    z-index:200;

    background:
      rgba(255,255,255,.96);

    border-top:1px solid var(--line);

    backdrop-filter:blur(16px);

  }


  .mobile-nav button{

    border:0;

    background:transparent;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:3px;

    color:#34383d;

    font-size:19px;

  }


  .mobile-nav button span{

    font-size:8px;

    color:#858a90;

  }


  .mobile-nav img{

    width:23px;
    height:23px;

    border-radius:50%;

    object-fit:cover;

  }

}


@media(max-width:560px){

  .auth-card{

    padding:23px;

  }


  .top-nav{

    height:62px;

  }


  .search-box{

    height:36px;

  }


  .page-head h1{

    font-size:30px;

  }


  .create-form{

    padding:13px;

  }


  .drop-zone{

    min-height:260px;

  }


  .preview-media{

    height:260px;

  }

}