:root{
  --vi-blue:#1478ff;
  --vi-cyan:#12c8e9;
  --vi-indigo:#3d18e8;
  --vi-bg:#f7f9fc;
  --vi-surface:#ffffff;
  --vi-text:#111522;
  --vi-muted:#747b8a;
  --vi-border:#e9ecf2;
  --vi-shadow:0 12px 35px rgba(18,31,58,.08);
  --vi-radius:22px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--vi-bg);color:var(--vi-text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.vi-app{min-height:100vh;max-width:720px;margin:auto;padding-bottom:104px}
.vi-header{height:76px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;background:rgba(247,249,252,.9);backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}
.vi-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--vi-text)}
.vi-brand img{
  width:39px;
  height:39px;
  object-fit:contain;
  display:block;
}
.vi-brand-wordmark{font-size:19px;font-weight:900;letter-spacing:-.8px}
.vi-brand-wordmark span{color:var(--vi-blue)}
.vi-icon-btn{border:0;background:#fff;width:42px;height:42px;border-radius:14px;box-shadow:0 5px 20px rgba(18,31,58,.08);font-size:19px}
.vi-pills{display:flex;gap:8px;padding:3px 20px 16px;overflow:auto;scrollbar-width:none;position:sticky;top:76px;z-index:15;background:rgba(247,249,252,.9);backdrop-filter:blur(16px)}
.vi-pills::-webkit-scrollbar{display:none}
.vi-pills button{border:1px solid var(--vi-border);background:#fff;border-radius:999px;padding:9px 16px;color:var(--vi-muted);font-weight:700;white-space:nowrap}
.vi-pills button.active{background:var(--vi-text);border-color:var(--vi-text);color:#fff}
.vi-feed{padding:0 12px}
.vi-post{margin-bottom:22px}
.vi-media{height:min(72vh,640px);min-height:430px;border-radius:28px;position:relative;overflow:hidden;box-shadow:var(--vi-shadow);background-size:cover;background-position:center}
.vi-media-one{background:linear-gradient(145deg,#b9e9f6 0%,#5f8cff 42%,#271b78 100%)}
.vi-media-two{background:linear-gradient(145deg,#f4c7a2,#c98272 40%,#27345f 100%)}
.vi-media img,
.vi-media video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.vi-media-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.18),transparent 30%,transparent 55%,rgba(0,0,0,.58))}
.vi-media-label{position:absolute;top:18px;left:18px;color:#fff;font-size:11px;font-weight:800;letter-spacing:1.6px;padding:8px 11px;border-radius:999px;background:rgba(0,0,0,.25);backdrop-filter:blur(10px)}
.vi-post-actions{position:absolute;right:15px;bottom:18px;display:flex;gap:8px}
.vi-action{border:0;background:rgba(255,255,255,.17);color:#fff;backdrop-filter:blur(12px);border-radius:999px;padding:9px 12px;display:flex;gap:7px;align-items:center;font-weight:750}
.vi-action.liked i{color:#ff3b66}
.vi-post-info{padding:13px 5px 0}
.vi-user{display:flex;align-items:center;gap:10px}
.vi-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--vi-cyan),var(--vi-indigo))}
.vi-user strong{display:block;font-size:14px}
.vi-user small{display:block;color:var(--vi-muted);font-size:11px;margin-top:1px}
.vi-post-info p{margin:9px 2px 0;font-size:15px;line-height:1.45}
.vi-post-menu{
    width:36px;
    height:36px;
    border:0;
    background:transparent;
    color:var(--vi-muted);
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:20px;
}

.vi-post-menu:hover{
    background:#eef1f6;
    color:var(--vi-text);
}
.vi-create{position:fixed;right:max(22px,calc((100vw - 720px)/2 + 22px));bottom:94px;z-index:25;border:0;color:#fff;background:linear-gradient(135deg,var(--vi-cyan),var(--vi-blue) 50%,var(--vi-indigo));box-shadow:0 12px 30px rgba(38,82,235,.28);border-radius:18px;padding:13px 17px;font-weight:800;display:flex;gap:8px;align-items:center}
.vi-bottom-nav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);width:min(calc(100% - 24px),690px);height:70px;background:rgba(17,21,34,.96);border-radius:25px;padding:7px;display:flex;align-items:center;justify-content:space-around;z-index:30;box-shadow:0 15px 45px rgba(12,18,35,.2)}
.vi-bottom-nav a{width:18%;height:56px;color:#8f97a9;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:700}
.vi-bottom-nav a i{font-size:21px}
.vi-bottom-nav a.active{color:#fff}
.vi-post-tab{background:linear-gradient(135deg,var(--vi-cyan),var(--vi-blue),var(--vi-indigo));color:#fff!important;border-radius:18px}
.vi-post-tab i{font-size:27px!important}
.vi-coming-soon{
  position:fixed;
  left:50%;
  bottom:105px;
  transform:translate(-50%,20px);
  z-index:100;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
  padding:14px 18px;
  background:rgba(17,21,34,.96);
  color:#fff;
  border-radius:18px;
  box-shadow:0 15px 45px rgba(12,18,35,.25);
  opacity:0;
  transition:.3s ease;
  pointer-events:none;
}

.vi-coming-soon.show{
  opacity:1;
  transform:translate(-50%,0);
}

.vi-coming-soon > i{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(
    135deg,
    var(--vi-cyan),
    var(--vi-blue),
    var(--vi-indigo)
  );
  font-size:18px;
}

.vi-coming-soon strong{
  display:block;
  font-size:14px;
}

.vi-coming-soon span{
  display:block;
  margin-top:2px;
  color:#9da5b5;
  font-size:12px;
}
.vi-modal{border:0;border-radius:26px;padding:7px;box-shadow:0 25px 70px rgba(14,25,55,.22)}
.vi-upload{border:1px dashed #cfd5df;border-radius:20px;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.vi-upload i{font-size:35px;color:var(--vi-blue);margin-bottom:8px}
.vi-upload span{font-size:13px;color:var(--vi-muted)}
.vi-primary-btn{border:0;border-radius:13px;background:#eef5ff;color:#1768e9;font-weight:800}
.vi-input{border-radius:15px;border-color:var(--vi-border);box-shadow:none}
.vi-input:focus{border-color:#8cbcff;box-shadow:0 0 0 4px rgba(20,120,255,.08)}
.vi-submit{border:0;border-radius:15px;padding:13px;background:linear-gradient(135deg,var(--vi-cyan),var(--vi-blue),var(--vi-indigo));color:#fff;font-weight:850}
@media(min-width:721px){
  body{padding:0 15px}
  .vi-app{padding-top:10px}
}
@media(max-width:430px){
  .vi-brand-wordmark{font-size:18px}
  .vi-media{min-height:500px;height:calc(100vh - 205px);max-height:680px;border-radius:24px}
  .vi-feed{padding:0 8px}
  .vi-header{padding-left:15px;padding-right:15px}
  .vi-pills{padding-left:15px;padding-right:15px}
}



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

.vi-create-page{
  min-height:100vh;
  background:var(--vi-bg);
  padding-bottom:40px;
}

.vi-create-header{
  height:76px;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(247,249,252,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(233,236,242,.7);
}

.vi-back-btn{
  width:42px;
  height:42px;
  border-radius:14px;
  background:#fff;
  color:var(--vi-text);
  display:grid;
  place-items:center;
  text-decoration:none;
  box-shadow:0 5px 20px rgba(18,31,58,.08);
  font-size:19px;
}

.vi-create-title{
  text-align:center;
}

.vi-create-title strong{
  display:block;
  font-size:16px;
  font-weight:850;
}

.vi-create-title span{
  display:block;
  margin-top:2px;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.5px;
  color:var(--vi-blue);
}

.vi-create-spacer{
  width:42px;
}

.vi-create-content{
  width:min(100% - 24px, 620px);
  margin:0 auto;
  padding:20px 0 30px;
}


/* MEDIA */

.vi-create-media{
  position:relative;
  width:100%;
  min-height:360px;
  border-radius:26px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--vi-border);
  box-shadow:var(--vi-shadow);
}

.vi-media-placeholder{
  min-height:360px;
  padding:35px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.vi-upload-icon{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:linear-gradient(
    135deg,
    rgba(18,200,233,.12),
    rgba(61,24,232,.10)
  );
  color:var(--vi-blue);
  font-size:30px;
  margin-bottom:18px;
}

.vi-media-placeholder h5{
  margin:0;
  font-size:17px;
  font-weight:850;
}

.vi-media-placeholder p{
  margin:8px 0 0;
  color:var(--vi-muted);
  font-size:13px;
  max-width:280px;
}

.vi-media-placeholder small{
  margin-top:14px;
  color:#9aa1af;
  font-size:11px;
}

.vi-primary-btn{
  border:0;
  border-radius:13px;
  background:#eef5ff;
  color:#1768e9;
  font-weight:800;
  padding:11px 16px;
}


/* PREVIEW */

.vi-media-preview{
  width:100%;
  height:min(68vh,620px);
  min-height:360px;
  position:relative;
  background:#111522;
}

.vi-media-preview img,
.vi-media-preview video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.vi-remove-media{
  position:absolute;
  top:15px;
  right:15px;
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.6);
  color:#fff;
  backdrop-filter:blur(10px);
}

.vi-replace-media{
  position:absolute;
  bottom:15px;
  left:15px;
  border:0;
  border-radius:12px;
  padding:9px 13px;
  background:rgba(0,0,0,.6);
  color:#fff;
  backdrop-filter:blur(10px);
  font-size:12px;
  font-weight:750;
}


/* SECTIONS */

.vi-create-section{
  margin-top:22px;
}

.vi-section-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:9px;
}

.vi-section-heading label,
.vi-section-label{
  font-size:13px;
  font-weight:850;
}

.vi-section-heading span{
  color:var(--vi-muted);
  font-size:11px;
}

.vi-create-input{
  border:1px solid var(--vi-border);
  border-radius:17px;
  padding:14px;
  resize:none;
  font-size:14px;
  box-shadow:none;
}

.vi-create-input:focus{
  border-color:#8cbcff;
  box-shadow:0 0 0 4px rgba(20,120,255,.08);
}


/* OPTIONS */

.vi-option-card,
.vi-visibility-card{
  display:flex;
  align-items:center;
  gap:13px;
  background:#fff;
  border:1px solid var(--vi-border);
  border-radius:18px;
  padding:14px;
  box-shadow:0 6px 20px rgba(18,31,58,.04);
}

.vi-option-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#f1f6ff;
  color:var(--vi-blue);
  font-size:18px;
}

.vi-option-content{
  flex:1;
  min-width:0;
}

.vi-option-content strong{
  display:block;
  font-size:13px;
  font-weight:800;
}

.vi-option-content span{
  display:block;
  margin-top:2px;
  color:var(--vi-muted);
  font-size:11px;
  line-height:1.4;
}

.vi-option-action{
  border:0;
  background:#eef5ff;
  color:var(--vi-blue);
  border-radius:11px;
  padding:8px 13px;
  font-size:12px;
  font-weight:800;
}

.vi-check{
  color:var(--vi-blue);
  font-size:20px;
}


/* POST BUTTON */

.vi-create-submit{
  width:100%;
  margin-top:28px;
  border:0;
  border-radius:17px;
  padding:15px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  background:linear-gradient(
    135deg,
    var(--vi-cyan),
    var(--vi-blue),
    var(--vi-indigo)
  );
  color:#fff;
  font-size:14px;
  font-weight:850;
  box-shadow:0 12px 30px rgba(38,82,235,.22);
  transition:.2s ease;
}

.vi-create-submit:not(:disabled):active{
  transform:scale(.98);
}

.vi-create-submit:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}


/* LOCATION */

.vi-location-search{
  position:relative;
}

.vi-location-search > i{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--vi-muted);
}

.vi-location-search .vi-input{
  padding-left:40px;
}

.vi-location-note{
  margin-top:16px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:13px;
  border-radius:14px;
  background:#f5f8fc;
  color:var(--vi-muted);
  font-size:11px;
  line-height:1.5;
}

.vi-location-note i{
  color:var(--vi-blue);
  font-size:16px;
}


/* MOBILE */

@media(max-width:430px){

  .vi-create-header{
    padding-left:15px;
    padding-right:15px;
  }

  .vi-create-content{
    width:calc(100% - 20px);
    padding-top:14px;
  }

  .vi-create-media,
  .vi-media-placeholder{
    border-radius:23px;
  }

  .vi-media-placeholder{
    min-height:340px;
  }

  .vi-media-preview{
    min-height:340px;
    height:60vh;
  }

}


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

.vi-toast{
  position:fixed;
  left:50%;
  bottom:30px;
  transform:translate(-50%,30px);
  width:min(calc(100% - 30px),420px);
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  background:rgba(17,21,34,.97);
  color:#fff;
  border-radius:18px;
  box-shadow:0 18px 50px rgba(12,18,35,.25);
  backdrop-filter:blur(18px);
  z-index:2000;
  opacity:0;
  visibility:hidden;
  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;
}

.vi-toast.show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

.vi-toast-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:linear-gradient(
    135deg,
    var(--vi-cyan),
    var(--vi-blue),
    var(--vi-indigo)
  );
  font-size:18px;
}

.vi-toast-content{
  flex:1;
  min-width:0;
}

.vi-toast-content strong{
  display:block;
  font-size:13px;
  font-weight:850;
}

.vi-toast-content span{
  display:block;
  margin-top:2px;
  color:#aab1c0;
  font-size:11px;
  line-height:1.4;
}

.vi-toast button{
  border:0;
  background:transparent;
  color:#8f97a9;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  font-size:19px;
}

.vi-toast button:hover{
  color:#fff;
}

/* ================================
   DISCOVER
================================ */

.vi-discover-content{
  padding:8px 12px 120px;
}

.vi-discover-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:12px 4px 18px;
}

.vi-eyebrow{
  display:block;
  margin-bottom:4px;
  color:var(--vi-blue);
  font-size:9px;
  font-weight:900;
  letter-spacing:1.8px;
}

.vi-discover-heading h1{
  margin:0;
  font-size:23px;
  font-weight:900;
  letter-spacing:-.7px;
}

.vi-discover-count{
  color:var(--vi-muted);
  font-size:11px;
  font-weight:700;
}


/* GRID */

.vi-discover-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.vi-discover-card{
  min-width:0;
  overflow:hidden;
  border-radius:20px;
  background:var(--vi-surface);
  box-shadow:0 8px 25px rgba(18,31,58,.07);
  transition:transform .2s ease,box-shadow .2s ease;
}

.vi-discover-card:hover{
  transform:translateY(-2px);
  box-shadow:0 13px 30px rgba(18,31,58,.11);
}


/* MEDIA */

.vi-discover-media{
  height:250px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  background-size:cover;
  background-position:center;
}

.vi-discover-media-one{
  background:
    linear-gradient(
      145deg,
      #b9e9f6 0%,
      #5f8cff 42%,
      #271b78 100%
    );
}

.vi-discover-media-two{
  background:
    linear-gradient(
      145deg,
      #f4c7a2,
      #c98272 40%,
      #27345f 100%
    );
}

.vi-discover-media-three{
  background:
    linear-gradient(
      145deg,
      #1d2b64,
      #f8cdda 55%,
      #f76b1c
    );
}

.vi-discover-media-four{
  background:
    linear-gradient(
      145deg,
      #d4fc79,
      #96e6a1 45%,
      #277da1
    );
}

.vi-discover-media-five{
  background:
    linear-gradient(
      145deg,
      #667eea,
      #764ba2 55%,
      #1b1b3a
    );
}

.vi-discover-media-six{
  background:
    linear-gradient(
      145deg,
      #ffecd2,
      #fcb69f 45%,
      #735d78
    );
}

.vi-discover-gradient{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.08),
      transparent 45%,
      rgba(0,0,0,.55)
    );
}


/* TYPE */

.vi-discover-type{
  position:absolute;
  top:10px;
  right:10px;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(0,0,0,.28);
  color:#fff;
  backdrop-filter:blur(10px);
  font-size:15px;
}


/* STATS */

.vi-discover-stats{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  display:flex;
  gap:7px;
}

.vi-discover-stats span{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.28);
  color:#fff;
  backdrop-filter:blur(10px);
  font-size:10px;
  font-weight:750;
}

.vi-discover-stats i{
  font-size:10px;
}


/* USER INFO */

.vi-discover-info{
  min-height:54px;
  padding:8px 9px;
  display:flex;
  align-items:center;
  gap:8px;
}

.vi-mini-avatar{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(
    135deg,
    var(--vi-cyan),
    var(--vi-indigo)
  );
  color:#fff;
  font-size:11px;
  font-weight:850;
}

.vi-discover-info > div:nth-child(2){
  min-width:0;
  flex:1;
}

.vi-discover-info strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  font-weight:850;
}

.vi-discover-info span{
  display:block;
  margin-top:1px;
  color:var(--vi-muted);
  font-size:9px;
}

.vi-discover-menu{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:#8c94a3;
  border-radius:9px;
}

.vi-discover-menu:hover{
  background:#f1f3f7;
  color:var(--vi-text);
}


/* EMPTY */

.vi-discover-empty{
  padding:70px 20px;
  text-align:center;
}

.vi-empty-icon{
  width:65px;
  height:65px;
  margin:0 auto 15px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:#eef5ff;
  color:var(--vi-blue);
  font-size:28px;
}

.vi-discover-empty h3{
  margin:0;
  font-size:18px;
  font-weight:850;
}

.vi-discover-empty p{
  margin:7px auto 0;
  max-width:280px;
  color:var(--vi-muted);
  font-size:13px;
  line-height:1.5;
}

.vi-discover-card{
  cursor:pointer;
}

.vi-discover-card:active{
  transform:scale(.985);
}

/* ================================
   DISCOVER SKELETON
================================ */

.vi-discover-skeleton{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.vi-skeleton-card{
  overflow:hidden;
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 25px rgba(18,31,58,.05);
}

.vi-skeleton-media{
  height:250px;
  background:linear-gradient(
    90deg,
    #edf0f5 25%,
    #f7f8fa 37%,
    #edf0f5 63%
  );
  background-size:400% 100%;
  animation:viSkeleton 1.4s ease infinite;
}

.vi-skeleton-info{
  height:54px;
  padding:8px 9px;
  display:flex;
  align-items:center;
  gap:8px;
}

.vi-skeleton-avatar{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:50%;
  background:#edf0f5;
}

.vi-skeleton-lines{
  flex:1;
}

.vi-skeleton-lines span{
  display:block;
  height:7px;
  border-radius:999px;
  background:#edf0f5;
  margin:5px 0;
}

.vi-skeleton-lines span:first-child{
  width:65%;
}

.vi-skeleton-lines span:last-child{
  width:45%;
}

@keyframes viSkeleton{

  0%{
    background-position:100% 0;
  }

  100%{
    background-position:-100% 0;
  }

}

.vi-discover-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.vi-nearby-area{
  align-items:center;
  gap:4px;
  color:var(--vi-muted);
  font-size:10px;
  font-weight:700;
}

.vi-nearby-area i{
  color:var(--vi-blue);
}


/* MOBILE */

@media(max-width:430px){

  .vi-discover-content{
    padding-left:8px;
    padding-right:8px;
  }

  .vi-discover-heading{
    padding-left:5px;
    padding-right:5px;
  }

  .vi-discover-heading h1{
    font-size:21px;
  }

  .vi-discover-media{
    height:225px;
  }

  .vi-discover-card{
    border-radius:17px;
  }

  .vi-skeleton-media{
    height:225px;
  }

}


/* DESKTOP */

@media(min-width:721px){

  .vi-discover-content{
    padding-left:12px;
    padding-right:12px;
  }

  .vi-discover-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .vi-discover-media{
    height:280px;
  }

}

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

.vi-search-page{
  min-height:100vh;
}

.vi-search-header{
  height:76px;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(247,249,252,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(233,236,242,.7);
}

.vi-search-heading{
  text-align:center;
}

.vi-search-heading strong{
  display:block;
  font-size:16px;
  font-weight:850;
}

.vi-search-heading span{
  display:block;
  margin-top:2px;
  color:var(--vi-blue);
  font-size:8px;
  font-weight:900;
  letter-spacing:1.5px;
}

.vi-search-content{
  width:min(100% - 24px,620px);
  margin:auto;
  padding:18px 0 120px;
}


/* SEARCH BOX */

.vi-search-box{
  position:relative;
  display:flex;
  align-items:center;
}

.vi-search-box > i{
  position:absolute;
  left:15px;
  color:var(--vi-muted);
  font-size:17px;
  pointer-events:none;
}

.vi-search-box input{
  width:100%;
  height:52px;
  border:1px solid var(--vi-border);
  border-radius:17px;
  background:#fff;
  padding:0 48px 0 43px;
  outline:none;
  color:var(--vi-text);
  font-size:14px;
  box-shadow:0 7px 25px rgba(18,31,58,.05);
}

.vi-search-box input:focus{
  border-color:#8cbcff;
  box-shadow:
    0 0 0 4px rgba(20,120,255,.08),
    0 7px 25px rgba(18,31,58,.05);
}

.vi-search-box button{
  position:absolute;
  right:9px;
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background:#f0f2f6;
  color:#7c8493;
  display:grid;
  place-items:center;
}


/* START STATE */

.vi-search-start{
  min-height:360px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
}

.vi-search-start-icon{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:#eef5ff;
  color:var(--vi-blue);
  font-size:28px;
  margin-bottom:17px;
}

.vi-search-start h2,
.vi-search-empty h2{
  margin:0;
  font-size:19px;
  font-weight:900;
}

.vi-search-start p,
.vi-search-empty p{
  max-width:290px;
  margin:7px auto 0;
  color:var(--vi-muted);
  font-size:13px;
  line-height:1.5;
}


/* RESULTS */

.vi-search-group{
  margin-top:26px;
}

.vi-search-group:first-child{
  margin-top:22px;
}

.vi-search-group-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  padding:0 3px;
}

.vi-search-group-heading h3{
  margin:0;
  font-size:14px;
  font-weight:850;
}

.vi-see-all{
  border:0;
  background:transparent;
  color:var(--vi-blue);
  font-size:11px;
  font-weight:800;
}


/* PEOPLE */

.vi-person-result{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px;
  margin-bottom:7px;
  background:#fff;
  border:1px solid var(--vi-border);
  border-radius:16px;
  text-decoration:none;
  color:var(--vi-text);
}

.vi-search-avatar{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font-size:13px;
  font-weight:850;
  background:linear-gradient(
    135deg,
    var(--vi-cyan),
    var(--vi-indigo)
  );
}


/* COMMON RESULT INFO */

.vi-search-result-info{
  min-width:0;
  flex:1;
}

.vi-search-result-info strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:800;
}

.vi-search-result-info span{
  display:block;
  margin-top:2px;
  color:var(--vi-muted);
  font-size:11px;
}


/* MOMENTS */

.vi-search-moment{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px;
  margin-bottom:8px;
  border:1px solid var(--vi-border);
  border-radius:17px;
  background:#fff;
  cursor:pointer;
}

.vi-search-moment-media{
  width:70px;
  height:70px;
  flex:0 0 70px;
  position:relative;
  overflow:hidden;
  border-radius:13px;
  background-size:cover;
  background-position:center;
}

.vi-search-media-type{
  position:absolute;
  right:6px;
  top:6px;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(0,0,0,.35);
  color:#fff;
  backdrop-filter:blur(8px);
  font-size:12px;
}


/* PLACES */

.vi-place-result{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px;
  margin-bottom:8px;
  border:1px solid var(--vi-border);
  border-radius:17px;
  background:#fff;
  color:var(--vi-text);
  text-decoration:none;
}

.vi-place-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#eef5ff;
  color:var(--vi-blue);
  font-size:18px;
}

.vi-place-result > i{
  color:#9aa1af;
  font-size:13px;
}


/* EMPTY */

.vi-search-empty{
  min-height:360px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
}

.vi-search-empty-icon{
  width:65px;
  height:65px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:#eef5ff;
  color:var(--vi-blue);
  font-size:27px;
  margin-bottom:16px;
}

/* ================================
   VIDEOISO SEARCH ICON
================================ */

.vi-search-trigger{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 42px;

  border:1px solid rgba(220,225,234,.9);
  border-radius:14px;

  background:rgba(255,255,255,.88);
  color:#151a24;

  text-decoration:none;

  box-shadow:
    0 5px 18px rgba(20,30,50,.06);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    color .2s ease;
}

.vi-search-trigger i{
  font-size:17px;
  line-height:1;
}

.vi-search-trigger:hover{
  color:var(--vi-blue);
  background:#fff;

  transform:translateY(-1px);

  box-shadow:
    0 8px 22px rgba(20,30,50,.10);
}

.vi-search-trigger:active{
  transform:scale(.95);
}

.vi-search-trigger:focus-visible{
  outline:none;

  box-shadow:
    0 0 0 4px rgba(20,120,255,.10),
    0 6px 20px rgba(20,30,50,.08);
}


/* MOBILE */

@media(max-width:430px){

  .vi-search-header{
    padding-left:15px;
    padding-right:15px;
  }

  .vi-search-content{
    width:calc(100% - 20px);
    padding-top:14px;
  }

  .vi-search-start{
    min-height:330px;
  }

}

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

.vi-profile-page{
  min-height:100vh;
}


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

.vi-profile-header{
  height:76px;
  padding:14px 20px;

  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;

  position:sticky;
  top:0;
  z-index:20;

  background:rgba(247,249,252,.92);
  backdrop-filter:blur(16px);

  border-bottom:1px solid rgba(233,236,242,.7);
}

.vi-profile-header > .vi-back-btn,
.vi-profile-header > .vi-profile-settings{
  width:42px;
  height:42px;

  margin:0;
  padding:0;

  display:grid;
  place-items:center;

  box-sizing:border-box;
}

.vi-profile-header > .vi-profile-settings{
  justify-self:end;
}

.vi-profile-header-title{
  display:flex;
  align-items:center;
  justify-content:center;

  height:42px;

  text-align:center;
}

.vi-profile-header-title strong{
  display:block;

  margin:0;

  font-size:16px;
  line-height:1;
  font-weight:850;
}

.vi-profile-settings i{
  display:block;

  margin:0;

  font-size:17px;
  line-height:1;
}


/* PROFILE INTRO */

.vi-profile-intro{
  padding:30px 20px 25px;
  text-align:center;
}

.vi-profile-avatar-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:14px;
}

.vi-profile-avatar{
  width:92px;
  height:92px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#fff;
  font-size:27px;
  font-weight:900;

  background:
    linear-gradient(
      135deg,
      var(--vi-cyan),
      var(--vi-indigo)
    );

  box-shadow:
    0 10px 30px rgba(37,99,235,.18);

  border:4px solid #fff;
}

.vi-profile-intro h1{
  margin:0;

  font-size:22px;
  font-weight:900;
  letter-spacing:-.3px;
}

.vi-profile-username{
  margin-top:2px;

  color:var(--vi-blue);

  font-size:12px;
  font-weight:750;
}

.vi-profile-bio{
  max-width:340px;

  margin:10px auto 0;

  color:var(--vi-muted);

  font-size:13px;
  line-height:1.5;
}

.vi-profile-count{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;

  margin-top:15px;
}

.vi-profile-count strong{
  font-size:15px;
  font-weight:900;
}

.vi-profile-count span{
  color:var(--vi-muted);
  font-size:12px;
}

.vi-profile-edit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  height:39px;

  margin-top:17px;
  padding:0 18px;

  border:1px solid var(--vi-border);
  border-radius:12px;

  background:#fff;
  color:var(--vi-text);

  font-size:12px;
  font-weight:800;

  text-decoration:none;

  box-shadow:
    0 5px 18px rgba(20,30,50,.05);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.vi-profile-edit:hover{
  color:var(--vi-blue);

  transform:translateY(-1px);

  box-shadow:
    0 8px 22px rgba(20,30,50,.09);
}


/* CONTENT */

.vi-profile-content{
  width:min(100% - 20px,850px);

  margin:auto;

  padding-bottom:120px;
}

.vi-profile-section-heading{
  display:flex;
  align-items:center;

  padding:0 3px 11px;

  border-bottom:1px solid var(--vi-border);
}

.vi-profile-section-heading h2{
  margin:0;

  font-size:14px;
  font-weight:900;
}


/* GRID */

.vi-profile-grid{
  display:grid;

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

  gap:5px;

  margin-top:10px;
}

.vi-profile-card{
  position:relative;

  overflow:hidden;

  aspect-ratio:1 / 1;

  border-radius:9px;

  cursor:pointer;

  background:#e9edf3;
}

.vi-profile-media{
  width:100%;
  height:100%;

  position:relative;

  background-size:cover;
  background-position:center;

  transition:
    transform .35s ease;
}

.vi-profile-card:hover
.vi-profile-media{
  transform:scale(1.035);
}


/* PROTOTYPE MEDIA */

.vi-profile-media-one{
  background:
    linear-gradient(
      145deg,
      #161c35 0%,
      #304b8c 45%,
      #62c8e8 100%
    );
}

.vi-profile-media-two{
  background:
    linear-gradient(
      135deg,
      #f1b58a 0%,
      #d46d8c 48%,
      #493a71 100%
    );
}

.vi-profile-media-three{
  background:
    linear-gradient(
      145deg,
      #152e28 0%,
      #3b806d 48%,
      #b5d99b 100%
    );
}

.vi-profile-media-four{
  background:
    linear-gradient(
      135deg,
      #20232c 0%,
      #636b7d 50%,
      #d7d8d5 100%
    );
}

.vi-profile-media-five{
  background:
    linear-gradient(
      145deg,
      #241936 0%,
      #764b91 48%,
      #df8eae 100%
    );
}

.vi-profile-media-six{
  background:
    linear-gradient(
      135deg,
      #142238 0%,
      #3677a7 48%,
      #b5e1e7 100%
    );
}


/* MEDIA TYPE */

.vi-profile-media-type{
  position:absolute;

  top:8px;
  right:8px;

  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border-radius:9px;

  color:#fff;

  background:rgba(0,0,0,.34);

  backdrop-filter:blur(8px);

  font-size:13px;
}


/* OVERLAY */

.vi-profile-overlay{
  position:absolute;

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

  display:flex;
  align-items:center;
  gap:12px;

  padding:28px 9px 8px;

  color:#fff;

  background:
    linear-gradient(
      transparent,
      rgba(0,0,0,.55)
    );

  opacity:0;

  transition:opacity .2s ease;
}

.vi-profile-card:hover
.vi-profile-overlay{
  opacity:1;
}

.vi-profile-overlay span{
  display:flex;
  align-items:center;
  gap:4px;

  font-size:10px;
  font-weight:750;
}

.vi-profile-overlay i{
  font-size:9px;
}


/* EMPTY */

.vi-profile-empty{
  min-height:320px;

  display:flex;

  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  padding:40px 20px;
}

.vi-profile-empty-icon{
  width:65px;
  height:65px;

  display:grid;
  place-items:center;

  border-radius:20px;

  background:#eef5ff;
  color:var(--vi-blue);

  font-size:27px;

  margin-bottom:15px;
}

.vi-profile-empty h2{
  margin:0;

  font-size:18px;
  font-weight:900;
}

.vi-profile-empty p{
  max-width:280px;

  margin:7px 0 17px;

  color:var(--vi-muted);

  font-size:13px;
  line-height:1.5;
}

.vi-profile-empty a{
  display:inline-flex;
  align-items:center;
  gap:6px;

  height:40px;

  padding:0 16px;

  border-radius:12px;

  background:var(--vi-blue);
  color:#fff;

  text-decoration:none;

  font-size:12px;
  font-weight:800;
}


/* MOBILE */

@media(max-width:430px){

  .vi-profile-header{
    padding-left:14px;
    padding-right:14px;
  }

  .vi-profile-intro{
    padding-top:25px;
  }

  .vi-profile-avatar{
    width:84px;
    height:84px;
  }

  .vi-profile-content{
    width:calc(100% - 12px);
  }

  .vi-profile-grid{
    gap:3px;
  }

  .vi-profile-card{
    border-radius:6px;
  }

  .vi-profile-overlay{
    opacity:1;
  }

}


/* DESKTOP */

@media(min-width:768px){

  .vi-profile-intro{
    padding-top:40px;
  }

  .vi-profile-grid{
    gap:8px;
  }

  .vi-profile-card{
    border-radius:12px;
  }

}

/* ==========================================
   VIDEOISO MOMENT VIEWER
========================================== */

.vi-viewer-body{
  margin:0;
  padding:0;

  overflow:hidden;

  background:#080b12;
}


/* MAIN */

.vi-post-viewer{
  position:relative;

  width:100%;
  height:100dvh;

  min-height:100vh;

  overflow:hidden;

  background:#080b12;

  color:#fff;
}


/* ==========================================
   MEDIA
========================================== */

.vi-viewer-media{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  background:#080b12;
}

.vi-viewer-placeholder{
  width:100%;
  height:100%;

  display:grid;
  place-items:center;

  background:
    linear-gradient(
      145deg,
      #10162b 0%,
      #243b72 40%,
      #397ea5 72%,
      #8bc9d4 100%
    );
}

.vi-viewer-placeholder-icon{
  width:76px;
  height:76px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:rgba(0,0,0,.27);

  backdrop-filter:blur(12px);

  color:#fff;

  font-size:32px;

  padding-left:3px;
}


/* REAL MEDIA */

.vi-viewer-media img,
.vi-viewer-media video{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}


/* ==========================================
   DARK GRADIENTS
========================================== */

.vi-post-viewer::before{
  content:"";

  position:absolute;

  top:0;
  left:0;
  right:0;

  height:150px;

  z-index:2;

  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.65),
      transparent
    );
}


.vi-post-viewer::after{
  content:"";

  position:absolute;

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

  height:340px;

  z-index:2;

  pointer-events:none;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.86),
      rgba(0,0,0,.48) 42%,
      transparent
    );
}


/* ==========================================
   TOP CONTROLS
========================================== */

.vi-viewer-top{
  position:absolute;

  top:0;
  left:0;
  right:0;

  z-index:10;

  height:78px;

  padding:
    max(16px, env(safe-area-inset-top))
    18px
    12px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}

.vi-viewer-btn{
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

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

  border-radius:14px;

  background:rgba(0,0,0,.30);

  color:#fff;

  backdrop-filter:blur(14px);

  box-shadow:
    0 5px 18px rgba(0,0,0,.18);

  font-size:17px;

  transition:
    transform .2s ease,
    background .2s ease;
}

.vi-viewer-btn:hover{
  background:rgba(0,0,0,.48);

  transform:translateY(-1px);
}

.vi-viewer-btn:active{
  transform:scale(.94);
}


/* ==========================================
   BOTTOM CONTENT
========================================== */

.vi-viewer-bottom{
  position:absolute;

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

  z-index:10;

  padding:
    30px
    20px
    max(24px, env(safe-area-inset-bottom));

  pointer-events:none;
}


/* USER */

.vi-viewer-user{
  display:flex;
  align-items:center;

  gap:11px;

  pointer-events:auto;
}

.vi-viewer-avatar{
  width:42px;
  height:42px;

  flex:0 0 42px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      var(--vi-cyan),
      var(--vi-indigo)
    );

  color:#fff;

  font-size:13px;
  font-weight:900;

  border:2px solid rgba(255,255,255,.9);
}

.vi-viewer-user-info strong{
  display:block;

  color:#fff;

  font-size:13px;
  font-weight:850;
}

.vi-viewer-user-info span{
  display:block;

  margin-top:2px;

  color:rgba(255,255,255,.65);

  font-size:10px;
}


/* CAPTION */

.vi-viewer-caption{
  max-width:520px;

  margin:13px 0 0;

  color:#fff;

  font-size:14px;
  line-height:1.5;

  text-shadow:
    0 1px 4px rgba(0,0,0,.4);
}


/* LOCATION */

.vi-viewer-location{
  display:inline-flex;

  align-items:center;

  gap:6px;

  margin-top:8px;

  color:rgba(255,255,255,.78);

  font-size:11px;
}

.vi-viewer-location i{
  font-size:11px;
}


/* STATS */

.vi-viewer-stats{
  display:flex;

  align-items:center;

  gap:20px;

  margin-top:15px;

  pointer-events:auto;
}

.vi-viewer-stat{
  display:flex;

  align-items:center;

  gap:6px;

  padding:0;

  border:0;

  background:transparent;

  color:#fff;

  font-size:12px;
  font-weight:750;
}

.vi-viewer-stat i{
  font-size:18px;
}

.vi-like-btn{
  cursor:pointer;

  transition:
    transform .15s ease;
}

.vi-like-btn:active{
  transform:scale(.9);
}

.vi-like-btn.liked{
  color:#ff5b75;
}


/* ==========================================
   MODERATION MENU
========================================== */

.vi-post-menu-backdrop{
  position:fixed;

  inset:0;

  z-index:100;

  display:flex;

  align-items:flex-end;

  justify-content:center;

  padding:12px;

  background:rgba(0,0,0,.48);

  backdrop-filter:blur(5px);

  opacity:0;

  visibility:hidden;

  transition:
    opacity .2s ease,
    visibility .2s ease;
}

.vi-post-menu-backdrop.show{
  opacity:1;

  visibility:visible;
}

.vi-post-menu{
  width:min(100%,520px);

  padding:
    9px
    9px
    calc(9px + env(safe-area-inset-bottom));

  border-radius:22px 22px 18px 18px;

  background:#fff;

  color:#171b25;

  box-shadow:
    0 -12px 45px rgba(0,0,0,.2);

  transform:translateY(30px);

  transition:
    transform .25s ease;
}

.vi-post-menu-backdrop.show
.vi-post-menu{
  transform:translateY(0);
}

.vi-post-menu-handle{
  width:38px;
  height:4px;

  margin:4px auto 10px;

  border-radius:20px;

  background:#d8dce4;
}

.vi-post-menu-item{
  width:100%;

  min-height:50px;

  display:flex;

  align-items:center;

  gap:13px;

  padding:0 13px;

  border:0;

  border-radius:13px;

  background:transparent;

  color:#20242d;

  text-align:left;

  font-size:13px;
  font-weight:700;
}

.vi-post-menu-item:hover{
  background:#f4f6f9;
}

.vi-post-menu-item i{
  width:22px;

  text-align:center;

  color:#596171;

  font-size:16px;
}

.vi-post-menu-cancel{
  justify-content:center;

  margin-top:5px;

  background:#f1f3f6;

  color:#303641;

  font-weight:800;
}


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

.vi-viewer-toast{
  position:fixed;

  left:50%;

  bottom:
    calc(24px + env(safe-area-inset-bottom));

  z-index:200;

  width:min(
    calc(100% - 28px),
    390px
  );

  display:flex;

  align-items:center;

  gap:11px;

  padding:12px 12px;

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

  border-radius:16px;

  background:rgba(21,25,34,.94);

  color:#fff;

  box-shadow:
    0 12px 35px rgba(0,0,0,.3);

  backdrop-filter:blur(16px);

  transform:
    translate(-50%, 20px);

  opacity:0;

  visibility:hidden;

  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease;
}

.vi-viewer-toast.show{
  opacity:1;

  visibility:visible;

  transform:
    translate(-50%, 0);
}

.vi-viewer-toast-icon{
  width:34px;
  height:34px;

  flex:0 0 34px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:rgba(52,211,153,.13);

  color:#6ee7b7;

  font-size:15px;
}

.vi-viewer-toast-content{
  min-width:0;

  flex:1;
}

.vi-viewer-toast-content strong{
  display:block;

  font-size:12px;
  font-weight:850;
}

.vi-viewer-toast-content span{
  display:block;

  margin-top:2px;

  color:rgba(255,255,255,.65);

  font-size:10px;
  line-height:1.4;
}

.vi-viewer-toast > button{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border:0;

  border-radius:9px;

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

  color:rgba(255,255,255,.7);
}


/* ==========================================
   DESKTOP
========================================== */

@media(min-width:768px){

  .vi-post-viewer{
    width:min(100%,1100px);

    margin:auto;
  }

  .vi-viewer-bottom{
    padding-left:35px;
    padding-right:35px;
  }

  .vi-viewer-caption{
    font-size:15px;
  }

}


/* ==========================================
   SMALL PHONES
========================================== */

@media(max-width:380px){

  .vi-viewer-bottom{
    padding-left:15px;
    padding-right:15px;
  }

  .vi-viewer-caption{
    font-size:13px;
  }

}

/* ==========================================
   VIDEOISO SETTINGS
========================================== */

.vi-settings-page{
  min-height:100vh;
  background:#f7f9fc;
}


/* HEADER */

.vi-settings-header{
  height:76px;

  padding:14px 20px;

  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;

  position:sticky;
  top:0;
  z-index:30;

  background:rgba(247,249,252,.93);
  backdrop-filter:blur(16px);

  border-bottom:1px solid rgba(233,236,242,.7);
}

.vi-settings-header .vi-back-btn{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  margin:0;
  padding:0;
}

.vi-settings-title{
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;
}

.vi-settings-title strong{
  font-size:16px;
  line-height:1;
  font-weight:850;
}

.vi-settings-spacer{
  width:42px;
  height:42px;
}


/* CONTENT */

.vi-settings-content{
  width:min(
    calc(100% - 24px),
    650px
  );

  margin:0 auto;

  padding:
    20px
    0
    100px;
}


/* SECTION */

.vi-settings-section{
  margin-bottom:27px;
}

.vi-settings-section-title{
  margin:0 4px 9px;

  color:#7b8493;

  font-size:10px;
  font-weight:900;

  text-transform:uppercase;
  letter-spacing:1.2px;
}


/* SETTING ITEM */

.vi-settings-item{
  width:100%;
  min-height:67px;

  display:flex;
  align-items:center;

  gap:12px;

  padding:10px 12px;

  margin-bottom:6px;

  border:1px solid var(--vi-border);
  border-radius:16px;

  background:#fff;

  color:var(--vi-text);

  text-decoration:none;

  box-shadow:
    0 4px 16px rgba(20,30,50,.035);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.vi-settings-item:hover{
  color:var(--vi-text);

  transform:translateY(-1px);

  border-color:#dce2eb;

  box-shadow:
    0 7px 22px rgba(20,30,50,.07);
}


/* ICON */

.vi-settings-icon{
  width:40px;
  height:40px;

  flex:0 0 40px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:#eef5ff;

  color:var(--vi-blue);

  font-size:16px;
}


/* TEXT */

.vi-settings-item-info{
  min-width:0;
  flex:1;
}

.vi-settings-item-info strong{
  display:block;

  font-size:13px;
  font-weight:800;
}

.vi-settings-item-info span{
  display:block;

  margin-top:3px;

  color:var(--vi-muted);

  font-size:10px;
  line-height:1.4;
}


/* ARROW */

.vi-settings-arrow{
  flex:0 0 auto;

  color:#a2a9b5;

  font-size:12px;
}


/* SWITCH */

.vi-switch{
  position:relative;

  width:43px;
  height:25px;

  flex:0 0 43px;

  cursor:pointer;
}

.vi-switch input{
  position:absolute;

  opacity:0;

  width:0;
  height:0;
}

.vi-switch span{
  position:absolute;

  inset:0;

  border-radius:30px;

  background:#d8dde5;

  transition:
    background .2s ease;
}

.vi-switch span::after{
  content:"";

  position:absolute;

  width:19px;
  height:19px;

  left:3px;
  top:3px;

  border-radius:50%;

  background:#fff;

  box-shadow:
    0 2px 5px rgba(0,0,0,.16);

  transition:
    transform .2s ease;
}

.vi-switch input:checked + span{
  background:var(--vi-blue);
}

.vi-switch input:checked + span::after{
  transform:translateX(18px);
}


/* LOGOUT */

.vi-logout-btn{
  width:100%;
  height:50px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  margin-top:4px;

  border:1px solid rgba(220,77,91,.18);
  border-radius:15px;

  background:#fff;

  color:#d84858;

  font-size:13px;
  font-weight:850;

  transition:
    background .2s ease,
    transform .2s ease;
}

.vi-logout-btn:hover{
  background:#fff5f6;

  transform:translateY(-1px);
}

.vi-logout-btn i{
  font-size:16px;
}


/* FOOTER */

.vi-settings-footer{
  padding:27px 0 10px;

  text-align:center;

  color:#9ca3af;

  font-size:11px;
  font-weight:900;

  letter-spacing:1.5px;
}

.vi-settings-footer span{
  display:block;

  margin-top:5px;

  color:var(--vi-blue);

  font-size:8px;

  letter-spacing:1.4px;
}


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

.vi-settings-toast{
  position:fixed;

  left:50%;

  bottom:25px;

  z-index:100;

  width:min(
    calc(100% - 28px),
    390px
  );

  display:flex;
  align-items:center;

  gap:11px;

  padding:12px;

  border-radius:16px;

  background:rgba(20,25,34,.95);

  color:#fff;

  box-shadow:
    0 12px 35px rgba(0,0,0,.25);

  backdrop-filter:blur(15px);

  transform:
    translate(-50%,20px);

  opacity:0;
  visibility:hidden;

  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease;
}

.vi-settings-toast.show{
  opacity:1;
  visibility:visible;

  transform:
    translate(-50%,0);
}

.vi-settings-toast-icon{
  width:34px;
  height:34px;

  flex:0 0 34px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:rgba(56,130,255,.14);

  color:#70a9ff;
}

.vi-settings-toast-content{
  min-width:0;
  flex:1;
}

.vi-settings-toast-content strong{
  display:block;

  font-size:12px;
  font-weight:850;
}

.vi-settings-toast-content span{
  display:block;

  margin-top:2px;

  color:rgba(255,255,255,.65);

  font-size:10px;
}

.vi-settings-toast > button{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border:0;
  border-radius:9px;

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

  color:rgba(255,255,255,.7);
}


/* ==========================================
   LOGOUT MODAL
========================================== */

.vi-settings-modal{
  position:fixed;

  inset:0;

  z-index:150;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:20px;

  background:rgba(0,0,0,.43);

  backdrop-filter:blur(5px);

  opacity:0;
  visibility:hidden;

  transition:
    opacity .2s ease,
    visibility .2s ease;
}

.vi-settings-modal.show{
  opacity:1;
  visibility:visible;
}

.vi-settings-modal-card{
  width:min(
    100%,
    370px
  );

  padding:27px 22px 20px;

  border-radius:22px;

  background:#fff;

  text-align:center;

  box-shadow:
    0 20px 60px rgba(0,0,0,.2);

  transform:translateY(12px);

  transition:
    transform .22s ease;
}

.vi-settings-modal.show
.vi-settings-modal-card{
  transform:translateY(0);
}

.vi-settings-modal-icon{
  width:54px;
  height:54px;

  display:grid;
  place-items:center;

  margin:0 auto 13px;

  border-radius:16px;

  background:#fff1f3;

  color:#d84858;

  font-size:22px;
}

.vi-settings-modal-card h2{
  margin:0;

  font-size:19px;
  font-weight:900;
}

.vi-settings-modal-card p{
  margin:7px auto 20px;

  color:var(--vi-muted);

  font-size:12px;
  line-height:1.5;
}

.vi-settings-modal-actions{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:8px;
}

.vi-modal-cancel,
.vi-modal-danger{
  height:44px;

  border-radius:12px;

  font-size:12px;
  font-weight:800;
}

.vi-modal-cancel{
  border:1px solid var(--vi-border);

  background:#f6f7f9;

  color:#343a45;
}

.vi-modal-danger{
  border:0;

  background:#d84858;

  color:#fff;
}


/* MOBILE */

@media(max-width:430px){

  .vi-settings-header{
    padding-left:14px;
    padding-right:14px;
  }

  .vi-settings-content{
    width:calc(100% - 20px);

    padding-top:17px;
  }

  .vi-settings-item{
    min-height:64px;

    padding:9px 10px;
  }

  .vi-settings-icon{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

}


/* DESKTOP */

@media(min-width:768px){

  .vi-settings-content{
    padding-top:28px;
  }

}