


.rpoll {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 220rem 1fr;
  gap: 20rem;
  align-items: center;
  width: min(720rem, calc(100% - 32px));
  margin: 36rem auto 0;
  padding: 20rem 20rem 16rem 24rem;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-family: "Avenir Next LT Pro", sans-serif;
  color: #fff;
  box-sizing: border-box;
}
.rpoll p { margin: 0; }
.rpoll__side { display: flex; flex-direction: column; gap: 8px; padding-right: 20rem; border-right: 1px solid rgba(255,255,255,.08); }
.rpoll__label { display: flex; align-items: center; gap: 7px; font-size: 12em; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.55); }
.rpoll__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 0 3px rgba(62,224,143,.18); }
.rpoll.is-closed .rpoll__dot { background: rgba(255,255,255,.35); box-shadow: none; }
.rpoll__q { font-size: 18em; font-weight: 600; line-height: 1.3; }
.rpoll__meta { font-size: 12em; line-height: 1.6; color: rgba(255,255,255,.45); }
.rpoll__meta b { font-weight: 500; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.rpoll__note { font-size: 12em; color: rgba(255,255,255,.4); }
.rpoll.is-voted:not(.is-closed) .rpoll__note { color: #3ee08f; }
.rpoll__note.is-err { color: #ff7a7a !important; }
.rpoll__list { display: flex; flex-direction: column; gap: 4px; }
.rpoll__opt {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px 12px;
  border: 0; border-radius: 10px; background: none;
  color: #fff; font: inherit; font-size: 14em; text-align: left; cursor: pointer;
  transition: background .2s;
}
.rpoll__opt:hover { background: rgba(255,255,255,.05); }
.rpoll__opt:disabled { cursor: default; color: #fff; }
.rpoll__name { flex: 1; min-width: 0; position: relative; }
.rpoll__pc { position: relative; font-size: .93em; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.rpoll__radio { position: relative; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); box-sizing: border-box; transition: all .2s; }
.rpoll__opt:hover .rpoll__radio { border-color: #1685ff; }
.rpoll__track { position: absolute; left: 36px; right: 10px; bottom: 4px; height: 3px; pointer-events: none; }
.rpoll__bar { display: block; height: 100%; border-radius: 3px; background: #1685ff; opacity: .45; transition: width .7s ease; }
.rpoll__opt.is-mine { background: rgba(22,133,255,.08); }
.rpoll__opt.is-mine .rpoll__bar { opacity: 1; }
.rpoll__opt.is-mine .rpoll__pc { color: #fff; }

.rpoll__opt.is-mine .rpoll__radio { border-color: #1685ff; background: radial-gradient(circle closest-side, #fff 0 42%, #1685ff 50% 100%); }
.rpoll.is-voted .rpoll__opt, .rpoll.is-busy .rpoll__opt { cursor: default; }
.rpoll.is-voted .rpoll__opt:hover { background: none; }
.rpoll.is-voted .rpoll__opt.is-mine:hover { background: rgba(22,133,255,.08); }
.rpoll.is-voted .rpoll__opt:hover .rpoll__radio { border-color: rgba(255,255,255,.35); }
@media (max-width: 760px) {
  .rpoll { grid-template-columns: 1fr; gap: 10px; padding: 14px 12px 10px; }
  .rpoll__side { padding: 0 0 10px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .rpoll__meta br { display: none; }
  .rpoll__label, .rpoll__meta, .rpoll__note { font-size: 11px; }
  .rpoll__q { font-size: 16px; }
  .rpoll__opt { font-size: 14px; }
}


.review__admin-status {
  right: 16rem;
  bottom: 14rem;
  min-height: 0;
  max-width: calc(100% - 90rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.review__admin-status .review__admin-status-text {
  display: flex;
  align-items: center;
  gap: 6rem;
  font-size: 12.5em;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  color: #a9c4e4;
}
.review__admin-status-ic {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 768px) {
  .review__admin-status { right: 16rem; bottom: 20rem; max-width: calc(100% - 100rem); padding: 0; }
  .review__admin-status .review__admin-status-text { font-size: 12px; }
}


.review__video { position: relative; margin: 0 0 16rem; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #0b1424; cursor: pointer; }
.review__video img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.review__video:hover img { transform: scale(1.03); }
.review__video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,10,20,0) 50%, rgba(5,10,20,.55)); pointer-events: none; }
.review__video-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 54px; height: 38px; margin: -19px 0 0 -27px; border-radius: 11px; background: rgba(15,22,36,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); transition: background .2s, border-color .2s; }
.review__video-play::before { content: ""; position: absolute; left: 22px; top: 11px; border-left: 14px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.review__video:hover .review__video-play { background: #ff2d2d; border-color: #ff2d2d; }
.review__video-tag { position: absolute; left: 10px; bottom: 9px; z-index: 2; display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.85); }
.review__video-tag i { position: relative; width: 14px; height: 10px; border-radius: 3px; background: #ff2d2d; }
.review__video-tag i::before { content: ""; position: absolute; left: 5px; top: 2.5px; border-left: 5px solid #fff; border-top: 2.5px solid transparent; border-bottom: 2.5px solid transparent; }
.review__video iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; }
.review__video.is-playing { cursor: default; }
.review__video.is-playing::after, .review__video.is-playing .review__video-tag, .review__video.is-playing .review__video-play { display: none; }


.rhf { width: min(560rem, calc(100vw - 32px)); margin: 32rem auto 0; font-family: "Avenir Next LT Pro", sans-serif; color: #fff; box-sizing: border-box; }
.rhf p { margin: 0; }
.rhf svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rhf-box { border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(80.78deg, rgba(255,255,255,.09) -32.05%, rgba(255,255,255,.04) 44.46%, rgba(255,255,255,.09) 119.44%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: border-color .2s; }
.rhf-box:focus-within { border-color: rgba(201,225,255,.35); }
.rhf-text { display: block; width: 100%; min-height: 110px; box-sizing: border-box; resize: none; padding: 16px 16px 8px; border: 0; outline: 0; background: none; color: #fff; font: 400 15px/1.45 "Avenir Next LT Pro", sans-serif; }
.rhf-text::placeholder { color: rgba(255,255,255,.4); }
.rhf-yt { display: flex; align-items: center; gap: 10px; height: 44px; margin: 0 12px 10px; padding: 0 10px 0 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); box-sizing: border-box; transition: border-color .2s; }
.rhf-yt[hidden] { display: none; }
.rhf-yt:focus-within { border-color: rgba(201,225,255,.4); }
.rhf-yt.is-ok { border-color: rgba(70,227,154,.45); }
.rhf-yt.is-bad { border-color: rgba(255,110,110,.55); }
.rhf-yt__ic { position: relative; flex: 0 0 auto; width: 22px; height: 16px; border-radius: 5px; background: #ff2d2d; opacity: .9; }
.rhf-yt__ic i { position: absolute; left: 8.5px; top: 4.5px; border-left: 6.5px solid #fff; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.rhf-yt__in { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: #fff; font: 400 14px "Avenir Next LT Pro", sans-serif; }
.rhf-yt__in::placeholder { color: rgba(255,255,255,.38); }
.rhf-x { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.rhf-x:hover { background: rgba(255,255,255,.22); }
.rhf-att { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 12px 10px; }
.rhf-att:empty { display: none; }
.rhf-thumb { position: relative; width: 120px; height: 68px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #0b1424; }
.rhf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rhf-thumb .rhf-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; font-size: 14px; background: rgba(5,10,20,.7); }
.rhf-thumb--vid::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 18px; margin: -9px 0 0 -13px; border-radius: 6px; background: #ff2d2d; }
.rhf-thumb--vid::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; margin: -4.5px 0 0 -2px; border-left: 7px solid #fff; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.rhf-tools { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 10px; border-top: 1px solid rgba(255,255,255,.08); }
.rhf-tool { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: rgba(201,225,255,.85); font: 500 13.5px "Avenir Next LT Pro", sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.rhf-tool:hover, .rhf-tool.is-on { background: rgba(255,255,255,.07); color: #fff; }
.rhf-tool svg { width: 18px; height: 18px; }
.rhf-tool--yt.is-on svg { color: #ff4d4d; }
.rhf-tool.is-set svg { color: #46e39a; }
.rhf-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rhf-cnt { margin-left: auto; margin-right: 8px; font-size: 11.5px; color: rgba(255,255,255,.35); font-variant-numeric: tabular-nums; }
.rhf-send { flex: 0 0 auto; height: 38px; min-width: 96px; padding: 0 22px; border: 0; border-radius: 50px; background: linear-gradient(90deg, #6f9fd4 0%, #a9cbf7 50%, #c9e1ff 100%); color: #0b1424; font: 500 15px "Avenir Next LT Pro", sans-serif; cursor: pointer; box-shadow: 0 6px 14px rgba(135,174,219,.35), inset 0 1px 0 rgba(255,255,255,.6); transition: transform .2s, box-shadow .2s; }
.rhf-send:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(135,174,219,.5), inset 0 1px 0 rgba(255,255,255,.6); }
.rhf-cap { margin-top: 10px !important; font-size: 12.5px; text-align: center; color: rgba(255,255,255,.45); }
.rhf-err { margin-top: 8px !important; font-size: 12.5px; text-align: center; color: #ff7a7a; }
.rhf-err[hidden] { display: none; }
.rhf.shake .rhf-box { animation: rhfShake .35s; border-color: rgba(255,110,110,.55); }
@keyframes rhfShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (max-width: 760px) {
  .rhf-tool span { display: none; }
  .rhf-tool { padding: 0 10px; }
}
