:root{
  --base-w:1672;
  --base-h:941;
  --bg:#020403;
  --panel:#060b0b;
  --line:rgba(255,255,255,.15);
  --line2:rgba(255,255,255,.08);
  --text:#fff;
  --muted:#a4aeae;
  --green:#23d12f;
  --green2:#12a51f;
  --red:#e83b1e;
  --shadow:0 24px 70px rgba(0,0,0,.48);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:radial-gradient(circle at 90% 0,rgba(25,111,35,.22),transparent 30%),linear-gradient(180deg,#030606,#010202);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  overflow-x:hidden;
}

button,input,select{font:inherit}
button{cursor:pointer}

.scale-wrap{
  position:relative;
  margin:0 auto;
}

.stage{
  position:absolute;
  left:0;
  top:0;
  width:1672px;
  height:941px;
  transform-origin:top left;
  background:
    radial-gradient(circle at 46% 24%,rgba(75,92,99,.30),transparent 36%),
    linear-gradient(180deg,#050807,#020403);
  display:grid;
  grid-template-columns:245px 1fr;
  overflow:hidden;
  box-shadow:0 30px 100px rgba(0,0,0,.55);
}

/* Sidebar */
.sidebar{
  border-right:1px solid var(--line2);
  background:linear-gradient(180deg,#020605,#06100d);
  padding:18px 10px;
}

.logo-block{
  height:125px;
  display:grid;
  place-items:center;
}

.logo-block img{
  width:160px;
  height:auto;
  object-fit:contain;
}

.model-menu{
  border:1px solid var(--line2);
  border-radius:10px;
  overflow:hidden;
  background:#050b0b;
  box-shadow:var(--shadow);
}

.model-title{
  position:relative;
  height:55px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:linear-gradient(90deg,#12751d,#0b3211);
  font-size:17px;
  font-weight:1000;
}

.model-title span{
  position:absolute;
  left:0;
  width:0;height:0;
  border-top:20px solid transparent;
  border-bottom:20px solid transparent;
  border-left:18px solid var(--green);
}

.model-btn{
  position:relative;
  width:100%;
  height:70px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:transparent;
  color:#fff;
  display:grid;
  grid-template-columns:100px 1fr;
  align-items:center;
  padding:0 18px 0 24px;
  text-align:left;
}

.model-btn::before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  width:0;height:0;
  border-top:17px solid transparent;
  border-bottom:17px solid transparent;
  border-left:13px solid rgba(35,209,47,.25);
}

.model-btn:hover{background:rgba(35,209,47,.10)}
.model-btn.active{background:linear-gradient(90deg,#21db32,#11a61e)}

.model-btn img{
  width:83px;
  height:34px;
  object-fit:contain;
  filter:drop-shadow(0 9px 12px rgba(0,0,0,.55));
}

.model-btn b{
  font-size:18px;
  font-weight:1000;
  text-shadow:0 2px 8px #000;
}

.model-info{
  margin:27px 16px 17px;
  min-height:74px;
  display:grid;
  place-items:center;
  text-align:center;
  border:1px solid rgba(35,209,47,.45);
  border-radius:9px;
  background:rgba(10,45,17,.36);
  font-size:16px;
  line-height:1.35;
  font-weight:900;
}

/* Main */
.main{
  padding:22px 18px 15px;
  min-width:0;
}

.topbar{
  height:90px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding-left:6px;
}

.title h1{
  margin:0;
  font-size:47px;
  line-height:.95;
  font-style:italic;
  letter-spacing:.02em;
  font-weight:1000;
}

.title h1 span{color:var(--green)}
.title p{margin:8px 0 0;font-size:17px}
.title p b{color:var(--green)}

.live-actions{
  display:flex;
  align-items:center;
  gap:18px;
  padding-top:10px;
  font-size:18px;
  font-weight:900;
  white-space:nowrap;
}

.live-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(#ee2e20,#b1110a);
  border-radius:999px;
  padding:9px 18px;
  box-shadow:0 9px 25px rgba(238,46,32,.24);
}
.live-pill i{width:11px;height:11px;border-radius:50%;background:#fff;display:block}
.viewer-count{border-right:1px solid var(--line);padding-right:15px}
.live-actions b{color:var(--green)}

.wa-icon{
  width:43px;height:43px;border-radius:50%;
  display:grid;place-items:center;
  background:#26c05f;
  color:#fff;
  border:3px solid #fff;
  text-decoration:none;
  font-weight:1000;
}

.content-grid{
  display:grid;
  grid-template-columns:760px 290px 320px;
  gap:18px;
}

.viewer-section{min-width:0}

.model-head{
  height:88px;
  padding:18px 42px 0;
  background:linear-gradient(90deg,rgba(255,255,255,.025),transparent);
  border-radius:20px 20px 0 0;
}

.model-head h2{
  margin:0;
  font-size:40px;
  font-style:italic;
  font-weight:1000;
  line-height:1;
}

.model-head h2 span{
  color:var(--green);
  text-shadow:0 0 18px rgba(35,209,47,.25);
}

.model-head h2 em{
  display:inline-flex;
  height:35px;
  align-items:center;
  margin-left:12px;
  padding:0 16px;
  border-radius:7px;
  background:linear-gradient(#257b29,#143f17);
  font-size:18px;
  font-style:italic;
  vertical-align:middle;
}

.spin-guide{
  margin-top:18px;
  display:flex;
  gap:18px;
  align-items:center;
}

.spin-guide strong{font-size:24px}
.spin-guide small{font-weight:900;color:#fff}

.viewer-card{
  position:relative;
  height:405px;
  border:1px solid var(--line2);
  border-radius:20px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 77%,rgba(255,255,255,.18),transparent 34%),
    radial-gradient(ellipse at 50% 35%,rgba(73,88,94,.35),transparent 58%),
    linear-gradient(180deg,#10191a,#050808);
  box-shadow:var(--shadow);
}

.sirv-box{
  position:absolute;
  left:70px;
  right:70px;
  top:32px;
  bottom:43px;
  display:grid;
  place-items:center;
}

.poster{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.sirv-layer{
  display:none;
  position:absolute;
  inset:0;
  z-index:2;
  background:transparent;
}

.sirv-layer.active{display:block}

#sirvMount,
#sirvMount .Sirv,
#sirvMount .sirv-spin{
  width:100%;
  height:100%;
}

#sirvMount img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.nav-arrow{
  position:absolute;
  z-index:6;
  top:50%;
  transform:translateY(-50%);
  width:58px;
  height:58px;
  border:0;
  border-radius:50%;
  background:#f2f5f6;
  color:#111;
  font-size:56px;
  line-height:42px;
  display:grid;
  place-items:center;
  box-shadow:0 15px 35px rgba(0,0,0,.36);
}

.nav-arrow.left{left:25px}
.nav-arrow.right{right:25px}

.rotate-label{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:3px;
  transform:translateX(-50%);
  width:340px;
  color:#fff;
  text-align:center;
  text-shadow:0 3px 12px #000;
  pointer-events:none;
}

.rotate-label b{display:block;font-size:36px;line-height:.9}
.rotate-label svg{width:100%;height:64px;margin-top:-5px}

.thumb-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:13px;
  margin:13px 28px 11px;
}

.thumb{
  min-height:92px;
  padding:0;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.07));
  display:grid;
  place-items:center;
}

.thumb.active{
  border-color:var(--green);
  box-shadow:0 0 0 2px rgba(35,209,47,.24);
}

.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.promo{
  margin:0 28px;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(180deg,#081010,#030606);
}

.promo h3{
  margin:0;
  padding:11px 20px;
  color:var(--green);
  font-size:22px;
  font-weight:1000;
}

.promo-list{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line2);
}

.promo-list div{
  min-height:72px;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-right:1px solid var(--line2);
}

.promo-list div:last-child{border-right:0}
.promo-list i{font-style:normal;font-size:32px}
.promo-list span{font-size:13px;font-weight:900;line-height:1.15}
.promo small{display:block;padding:8px 18px;color:#8f999b}

.card{
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),#050909;
  box-shadow:var(--shadow);
}

.mid-panel{display:grid;gap:28px}
.price-card{height:368px;padding:24px 27px}
.price-card p{margin:0 0 14px;font-size:17px;font-weight:1000}
.price-card p:first-child{color:var(--green);font-size:20px}
.price-card strong{display:block;font-size:40px;line-height:1;margin-bottom:20px}
.price-card .booking{font-size:35px}
.price-card .salary{font-size:25px;color:var(--green);line-height:1.18}
.price-card hr{border:0;border-top:1px solid var(--line);margin:20px 0}

.color-card{height:340px;padding:22px}
.color-card h3{margin:0 0 18px;font-size:18px}
.color-card small{color:var(--green)}
.color-card button{
  width:100%;
  min-height:39px;
  border:0;
  border-radius:8px;
  display:grid;
  grid-template-columns:30px 1fr auto;
  align-items:center;
  gap:10px;
  color:#fff;
  background:transparent;
  text-align:left;
}
.color-card button:hover,.color-card button.active{background:rgba(255,255,255,.04)}
.color-card i{width:23px;height:23px;border-radius:50%;background:var(--dot);border:2px solid #fff}
.color-card b{color:var(--green);font-size:13px}

.right-panel{display:grid;gap:14px}
.calc-card{padding:23px 24px}
.calc-card h3{
  margin:0 0 18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line2);
  font-size:22px;
  font-weight:1000;
}

.calc-card label{
  display:grid;
  grid-template-columns:1fr 135px;
  gap:13px;
  align-items:center;
  margin-bottom:14px;
  font-size:13px;
  font-weight:1000;
}

.calc-card input,.calc-card select{
  width:100%;
  height:46px;
  border:0;
  border-radius:7px;
  background:linear-gradient(#f7f9fa,#dfe4e4);
  color:#111;
  text-align:center;
  padding:0 12px;
  font-weight:900;
}

.result-box{
  margin-top:16px;
  padding:19px 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(0,0,0,.22);
  text-align:center;
}

.result-box small{display:block;color:var(--green);font-size:16px;font-weight:1000}
.result-box strong{display:block;margin-top:6px;color:var(--green);font-size:40px;line-height:1}
.trade .result-box{margin-top:24px;padding:26px 12px}

.bottom-bar{
  height:78px;
  margin-top:22px;
  display:grid;
  grid-template-columns:1.05fr 1fr 1.1fr 1.05fr 1.25fr 2.35fr;
  border:1px solid var(--line2);
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(180deg,#071011,#040707);
  box-shadow:var(--shadow);
}

.bottom-bar div,.bottom-bar a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  border-right:1px solid var(--line2);
  color:#fff;
  text-decoration:none;
  font-weight:900;
}

.bottom-bar i{
  color:var(--green);
  font-size:32px;
  font-style:normal;
}

.bottom-bar span{
  font-size:14px;
  line-height:1.15;
}

.bottom-bar a{
  border-right:0;
  font-size:17px;
}
.bottom-bar a b{color:var(--green)}
.bottom-bar a strong{
  width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;
  background:#25d366;
  border:4px solid #fff;
  font-size:24px;
}

.toast{
  position:absolute;
  z-index:99;
  left:50%;
  bottom:20px;
  transform:translateX(-50%) translateY(18px);
  opacity:0;
  pointer-events:none;
  max-width:780px;
  padding:13px 18px;
  border-radius:999px;
  background:rgba(0,0,0,.88);
  border:1px solid rgba(35,209,47,.5);
  color:#fff;
  font-weight:800;
  font-size:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  transition:.22s ease;
  text-align:center;
}

.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}