.review-toast-stack{
  position:fixed;
  right:18px;
  top:82px;
  z-index:220;
  display:grid;
  gap:10px;
  width:min(350px, calc(100vw - 28px));
  pointer-events:none;
}
.review-toast{
  pointer-events:auto;
  border:1px solid rgba(16,19,21,.10);
  border-radius:10px;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 54px rgba(16,19,21,.16);
  padding:14px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 28px;
  gap:10px;
  opacity:0;
  transform:translateX(18px) scale(.98);
  animation:reviewToastIn .22s ease forwards;
}
@keyframes reviewToastIn{to{opacity:1;transform:translateX(0) scale(1)}}
.review-toast i,.review-modal i,.review-context-menu i{width:18px;height:18px;flex:0 0 auto}
.review-toast-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  color:#335e67;
}
.review-toast-title{
  font:900 14px/1.18 Montserrat,system-ui,sans-serif;
  color:rgba(16,19,21,.88);
}
.review-toast-text{
  margin-top:4px;
  color:rgba(16,19,21,.58);
  font:700 13px/1.35 Rubik,system-ui,sans-serif;
}
.review-toast-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.review-mini-btn{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(16,19,21,.10);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  padding:0 11px;
  color:rgba(16,19,21,.82);
  font:900 12px/1 Rubik,system-ui,sans-serif;
  cursor:pointer;
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}
.review-mini-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.94);
  border-color:rgba(97,147,158,.26);
}
.review-mini-btn--primary{
  background:linear-gradient(135deg, rgba(97,147,158,.24), rgba(255,255,255,.72));
  color:#2c5962;
}
.review-toast-close,.review-modal-close{
  width:28px;
  height:28px;
  border:0;
  background:transparent;
  color:rgba(16,19,21,.58);
  display:grid;
  place-items:center;
  cursor:pointer;
  border-radius:999px;
  transition:transform .16s ease, color .16s ease;
}
.review-toast-close:hover,.review-modal-close:hover{
  transform:rotate(8deg) scale(1.04);
  color:rgba(16,19,21,.90);
}
.review-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:230;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(16,19,21,.34);
  backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.review-modal-backdrop.open{
  opacity:1;
  pointer-events:auto;
}
.review-modal{
  width:min(560px, 100%);
  border:1px solid rgba(16,19,21,.10);
  border-radius:12px;
  background:rgba(255,255,255,.88);
  box-shadow:0 28px 86px rgba(16,19,21,.22);
  padding:18px;
  transform:translateY(12px) scale(.98);
  transition:transform .18s ease;
}
.review-modal-backdrop.open .review-modal{
  transform:translateY(0) scale(1);
}
.review-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.review-modal-title{
  margin:0;
  font:900 24px/1.05 Montserrat,system-ui,sans-serif;
}
.review-modal-sub{
  margin-top:6px;
  color:rgba(16,19,21,.58);
  font:700 14px/1.4 Rubik,system-ui,sans-serif;
}
.review-form{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.review-field{
  display:grid;
  gap:7px;
}
.review-field span{
  color:rgba(16,19,21,.58);
  font:900 12px/1 Rubik,system-ui,sans-serif;
  text-transform:uppercase;
}
.review-input,.review-textarea{
  width:100%;
  border:1px solid rgba(16,19,21,.10);
  border-radius:9px;
  background:rgba(255,255,255,.72);
  outline:none;
  padding:11px 12px;
  color:rgba(16,19,21,.86);
  font:800 14px/1.35 Rubik,system-ui,sans-serif;
}
.review-textarea{
  min-height:132px;
  resize:vertical;
}
.review-upload-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.review-upload-note{
  color:rgba(16,19,21,.52);
  font:700 12px/1.35 Rubik,system-ui,sans-serif;
}
.review-file-name{
  display:none;
  color:#335e67;
  font:800 12px/1.35 Rubik,system-ui,sans-serif;
}
.review-upload-previews{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:12px;
  max-width:100%;
  overflow:visible;
  padding:4px 1px 10px;
}
.review-upload-previews[hidden]{
  display:none !important;
}
.review-upload-preview{
  --progress:0%;
  position:relative;
  flex:0 0 112px;
  width:112px;
  aspect-ratio:1;
  overflow:hidden;
  border:1px solid rgba(97,147,158,.22);
  border-radius:8px;
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 24px rgba(16,19,21,.10);
  scroll-snap-align:start;
  isolation:isolate;
  transition:box-shadow .22s ease, border-color .22s ease;
}
.review-upload-preview img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.review-upload-preview::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--progress);
  background:linear-gradient(0deg, rgba(155,205,211,.72), rgba(155,205,211,.34));
  mix-blend-mode:multiply;
  opacity:.72;
  transition:height .28s ease, opacity .28s ease;
  pointer-events:none;
  z-index:1;
}
.review-upload-preview::before{
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  bottom:0;
  height:3px;
  border-radius:999px 999px 0 0;
  background:#72bf8f;
  box-shadow:0 0 0 rgba(114,191,143,0);
  opacity:0;
  transform:translateY(2px);
  transition:opacity .22s ease, transform .22s ease, box-shadow .22s ease;
  z-index:3;
}
.review-upload-preview.is-done::after{
  opacity:.28;
}
.review-upload-preview.is-done{
  border-color:rgba(114,191,143,.36);
  box-shadow:0 12px 28px rgba(16,19,21,.12), 0 10px 22px rgba(114,191,143,.20);
}
.review-upload-preview.is-done::before{
  opacity:1;
  transform:translateY(0);
  box-shadow:0 -5px 14px rgba(114,191,143,.44);
}
.review-modal.is-uploading .review-upload-preview::after{
  opacity:.78;
}
.review-upload-preview-remove{
  position:absolute;
  top:5px;
  right:5px;
  z-index:4;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#b22e43;
  box-shadow:none;
  cursor:pointer;
  padding:0;
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.review-upload-preview-remove:hover{
  transform:translateY(-1px) scale(1.04);
  background:rgba(255,255,255,.24);
  color:#942236;
}
.review-upload-preview-remove i{
  width:19px;
  height:19px;
  filter:drop-shadow(0 2px 3px rgba(255,255,255,.80)) drop-shadow(0 2px 7px rgba(16,19,21,.18));
}
.review-upload-preview .review-upload-trash{
  display:none;
}
.review-upload-preview.is-done .review-upload-cancel{
  display:none;
}
.review-upload-preview.is-done .review-upload-trash{
  display:block;
}
.review-modal.is-uploading .review-upload-preview .review-upload-cancel{
  display:block;
}
.review-modal.is-uploading .review-upload-preview .review-upload-trash{
  display:none;
}
.review-upload-preview-count{
  position:absolute;
  left:5px;
  bottom:5px;
  z-index:2;
  min-width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:#335e67;
  font:900 10px/1 Rubik,system-ui,sans-serif;
  box-shadow:0 5px 14px rgba(16,19,21,.12);
}
.review-modal .review-mini-btn{
  min-height:41px;
  border-radius:9px;
  padding:0 14px;
  gap:8px;
  font-size:14px;
}
.review-modal .review-mini-btn i{
  width:21px;
  height:21px;
}
.review-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  flex-wrap:wrap;
}
.review-context-menu{
  position:fixed;
  z-index:240;
  min-width:210px;
  border:1px solid rgba(16,19,21,.10);
  border-radius:10px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  box-shadow:0 20px 62px rgba(16,19,21,.18);
  padding:7px;
  opacity:0;
  transform:translateY(4px) scale(.98);
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
}
.review-context-menu.open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.review-context-menu button{
  width:100%;
  border:0;
  border-radius:7px;
  background:transparent;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px;
  color:rgba(16,19,21,.82);
  font:900 13px/1.1 Rubik,system-ui,sans-serif;
  cursor:pointer;
  text-align:left;
}
.review-context-menu button:hover{
  background:rgba(97,147,158,.10);
}
.review-context-menu .danger{
  color:#9d2f45;
}
@media(max-width:620px){
  .review-toast-stack{
    left:12px;
    right:12px;
    top:auto;
    bottom:14px;
    width:auto;
  }
  .review-toast{
    grid-template-columns:26px minmax(0,1fr) 28px;
    padding:13px;
  }
  .review-modal{
    padding:16px;
  }
  .review-modal-title{
    font-size:21px;
  }
  .review-modal-actions{
    justify-content:stretch;
  }
  .review-modal-actions .review-mini-btn{
    flex:1 1 auto;
  }
}