/* KinoVio Movie Requests v1.2.0 — Color UI */
:root{
  --kvr-bg:#0b1017;
  --kvr-panel:#111a26;
  --kvr-panel2:#151f2d;
  --kvr-border:rgba(255,255,255,.10);
  --kvr-text:#f8fafc;
  --kvr-muted:#9aa7b4;

  --kvr-green:#18c58f;
  --kvr-green2:#37e0aa;
  --kvr-emerald:#20c997;

  --kvr-gold:#fbbf24;
  --kvr-blue:#60a5fa;
  --kvr-purple:#a78bfa;
  --kvr-coral:#fb7185;
}

/* Floating button */
.kvr-fab{
  position:fixed;
  right:22px;
  bottom:88px;
  z-index:9990;
  border:1px solid rgba(52,211,153,.34);
  border-radius:999px;
  padding:13px 19px;
  background:linear-gradient(135deg,#16c98d,#37e0aa);
  color:#04251a;
  font:850 14px/1.1 inherit;
  box-shadow:
    0 12px 34px rgba(16,185,129,.27),
    inset 0 1px 0 rgba(255,255,255,.25);
  cursor:pointer;
  transition:.18s transform,.18s box-shadow,.18s filter;
}
.kvr-fab:hover{
  transform:translateY(-2px);
  filter:saturate(1.08);
  box-shadow:0 16px 40px rgba(16,185,129,.34)
}
.kvr-fab span{
  margin-right:8px;
  color:#063d2d
}

/* Overlay */
.kvr-overlay{
  position:fixed;
  inset:0;
  z-index:10050;
  background:rgba(1,6,15,.82);
  backdrop-filter:blur(7px) saturate(.8);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.kvr-overlay[hidden]{display:none!important}

/* Modal */
.kvr-modal{
  position:relative;
  width:min(700px,100%);
  max-height:min(800px,92vh);
  overflow:auto;
  border:1px solid rgba(96,165,250,.14);
  border-radius:20px;
  background:
    radial-gradient(circle at 10% 0%,rgba(32,201,151,.09),transparent 27%),
    radial-gradient(circle at 95% 10%,rgba(167,139,250,.09),transparent 30%),
    linear-gradient(180deg,#172131,#0f1722);
  color:var(--kvr-text);
  box-shadow:
    0 36px 90px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.025) inset;
}
.kvr-modal::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  border-radius:20px 20px 0 0;
  background:linear-gradient(90deg,var(--kvr-emerald),var(--kvr-gold),var(--kvr-purple));
}

/* Header */
.kvr-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:25px 27px 15px
}
.kvr-title{
  font-size:26px;
  line-height:1.15;
  font-weight:950;
  margin:0;
  color:#fff;
}
.kvr-title::first-letter{
  color:var(--kvr-green2)
}
.kvr-sub{
  color:#a8b4c0;
  font-size:14px;
  line-height:1.45;
  margin-top:7px
}

.kvr-close{
  width:39px;
  height:39px;
  border:1px solid rgba(251,113,133,.20);
  border-radius:11px;
  background:rgba(251,113,133,.06);
  color:#d9e0e7;
  font-size:24px;
  cursor:pointer;
  transition:.16s background,.16s color,.16s transform,.16s border-color;
}
.kvr-close:hover{
  color:#fff;
  background:rgba(251,113,133,.20);
  border-color:rgba(251,113,133,.48);
  transform:rotate(4deg)
}

.kvr-body{padding:0 27px 27px}

/* Tabs */
.kvr-tabs{
  display:flex;
  gap:9px;
  margin:5px 0 21px
}
.kvr-tab{
  border:1px solid rgba(255,255,255,.09);
  background:#172130;
  color:#c5ced7;
  border-radius:999px;
  padding:9px 15px;
  cursor:pointer;
  font-weight:850;
  transition:.16s all;
}
.kvr-tab:first-child:hover{
  border-color:rgba(32,201,151,.38);
  color:#78e6c4
}
.kvr-tab:nth-child(2):hover{
  border-color:rgba(167,139,250,.40);
  color:#c4b5fd
}
.kvr-tab.is-active{
  background:linear-gradient(135deg,rgba(32,201,151,.18),rgba(32,201,151,.08));
  border-color:rgba(32,201,151,.42);
  color:#72e5c1;
  box-shadow:0 0 0 1px rgba(32,201,151,.04) inset
}
.kvr-tab:nth-child(2).is-active{
  background:linear-gradient(135deg,rgba(167,139,250,.20),rgba(96,165,250,.08));
  border-color:rgba(167,139,250,.40);
  color:#c4b5fd
}

.kvr-pane[hidden]{display:none!important}

/* Form */
.kvr-row{
  display:grid;
  grid-template-columns:1fr 130px;
  gap:13px
}
.kvr-field{margin-bottom:14px}

.kvr-field label{
  display:block;
  font-size:13px;
  margin:0 0 7px;
  font-weight:850;
  color:#d3dbe3
}
.kvr-row .kvr-field:first-child label{
  color:#72e5c1
}
.kvr-row .kvr-field:nth-child(2) label{
  color:var(--kvr-gold)
}
.kvr-field:has(.kvr-textarea) label{
  color:#c4b5fd
}

.kvr-input,
.kvr-textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.09);
  background:#0b131e;
  color:#f8fafc;
  border-radius:11px;
  padding:12px 13px;
  font-size:14px;
  outline:none;
  transition:.16s border-color,.16s box-shadow,.16s background
}
.kvr-input::placeholder,
.kvr-textarea::placeholder{
  color:#7d8995
}
.kvr-input:hover,
.kvr-textarea:hover{
  background:#0d1622;
  border-color:rgba(255,255,255,.15)
}
.kvr-input:focus,
.kvr-textarea:focus{
  background:#0e1824;
  border-color:rgba(32,201,151,.68);
  box-shadow:
    0 0 0 3px rgba(32,201,151,.10),
    0 8px 22px rgba(0,0,0,.12)
}
.kvr-row .kvr-field:nth-child(2) .kvr-input:focus{
  border-color:rgba(251,191,36,.66);
  box-shadow:0 0 0 3px rgba(251,191,36,.09)
}
.kvr-textarea:focus{
  border-color:rgba(167,139,250,.68);
  box-shadow:0 0 0 3px rgba(167,139,250,.10)
}
.kvr-textarea{
  min-height:102px;
  resize:vertical
}

/* Submit */
.kvr-submit{
  width:100%;
  border:1px solid rgba(52,211,153,.32);
  border-radius:11px;
  padding:13px 15px;
  background:linear-gradient(90deg,#14bd85,#22d39a,#37e0aa);
  color:#03261b;
  font-size:15px;
  font-weight:950;
  cursor:pointer;
  box-shadow:
    0 8px 24px rgba(16,185,129,.18),
    inset 0 1px 0 rgba(255,255,255,.23);
  transition:.17s transform,.17s box-shadow,.17s filter
}
.kvr-submit:hover{
  transform:translateY(-1px);
  filter:saturate(1.08) brightness(1.04);
  box-shadow:0 12px 30px rgba(16,185,129,.25)
}
.kvr-submit:disabled{
  opacity:.55;
  cursor:wait;
  transform:none
}

/* Messages */
.kvr-msg{
  margin-top:13px;
  padding:12px 13px;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  font-size:13px
}
.kvr-msg.ok{
  background:rgba(32,201,151,.11);
  border:1px solid rgba(32,201,151,.18);
  color:#8ceacc
}
.kvr-msg.err{
  background:rgba(251,113,133,.10);
  border:1px solid rgba(251,113,133,.18);
  color:#fecdd3
}

/* Waiting list */
.kvr-list{display:grid;gap:10px}
.kvr-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:14px 15px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  transition:.15s border-color,.15s transform
}
.kvr-item:hover{
  border-color:rgba(96,165,250,.22);
  transform:translateY(-1px)
}
.kvr-item-title{
  color:#f7f9fb;
  font-weight:900
}
.kvr-item-meta{
  font-size:12px;
  color:var(--kvr-muted);
  margin-top:4px
}

.kvr-status{
  display:inline-block;
  margin-left:7px;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900
}
.kvr-status-new{
  background:rgba(96,165,250,.13);
  color:#93c5fd;
  border:1px solid rgba(96,165,250,.14)
}
.kvr-status-planned{
  background:rgba(251,191,36,.12);
  color:#fcd34d;
  border:1px solid rgba(251,191,36,.13)
}
.kvr-status-added{
  background:rgba(32,201,151,.12);
  color:#75e5c3;
  border:1px solid rgba(32,201,151,.14)
}

.kvr-vote{
  border:1px solid rgba(167,139,250,.34);
  background:linear-gradient(135deg,rgba(167,139,250,.14),rgba(96,165,250,.08));
  color:#c4b5fd;
  border-radius:10px;
  padding:9px 11px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap
}
.kvr-vote:hover{
  border-color:rgba(167,139,250,.52);
  color:#ddd6fe
}
.kvr-vote:disabled{opacity:.55}

.kvr-added-link{
  color:#6ee7b7;
  font-weight:850
}
.kvr-empty{
  text-align:center;
  padding:32px 10px;
  color:var(--kvr-muted)
}

@media(max-width:650px){
  .kvr-fab{right:14px;bottom:76px;padding:12px 15px}
  .kvr-row{grid-template-columns:1fr}
  .kvr-modal{border-radius:15px}
  .kvr-head,.kvr-body{padding-left:18px;padding-right:18px}
  .kvr-title{font-size:23px}
  .kvr-sub{font-size:13px}
  .kvr-item{grid-template-columns:1fr}
  .kvr-vote{width:100%}
}