:root{
  --nc-accent:#f57c00;
  --nc-border: rgba(0,0,0,.10);
  --nc-shadow: 0 18px 45px rgba(0,0,0,.25);
}

.nc-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:9998;
}

.nc-modal{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(860px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  overflow:auto;
  background:#fff;
  border-radius:18px;
  box-shadow:var(--nc-shadow);
  z-index:9999;
  border:1px solid var(--nc-border);
}

.nc-header{
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  border-bottom:1px solid var(--nc-border);
  background:
    linear-gradient(135deg, rgba(245,124,0,.18), rgba(245,124,0,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0));
}
.nc-header-left{ display:flex; flex-direction:column; gap:6px; }
.nc-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:950;
  letter-spacing:.2px;
  padding:12px 10px;
  border-radius:14px;
  font-size:14px;
}

.nc-close{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(245,124,0,.25);
  background:#fff;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.nc-close:hover{ box-shadow:0 10px 24px rgba(245,124,0,.18); }

.nc-body{ padding:16px; }

.nc-layout{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:70px;
  align-items:stretch;
}
@media (max-width: 980px){
  .nc-layout{ grid-template-columns: 1fr; }
}

.nc-op-float{
  position:absolute;
  left: calc(50% - 5px);
  transform:translateX(-50%);
  top: calc(160px + 22px);
  z-index:5;
  pointer-events:none;
}
@media (max-width: 980px){
  .nc-op-float{ display:none; }
}

.nc-left, .nc-right{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.nc-card{
  border:1px solid var(--nc-border);
  border-radius:18px;
  padding:20px 14px;
  background:#fff;
}
.nc-card-soft{
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0));
}
.nc-card-result{
  border-color: rgba(245,124,0,.22);
  background: linear-gradient(180deg, rgba(245,124,0,.06), rgba(0,0,0,0));
  padding:12px;
}

.nc-card-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.nc-ico{
  width:38px;
  height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:#111;
}
.nc-card-kicker{
  font-size:12px;
  opacity:.75;
  font-weight:850;
}
.nc-kicker-accent{ color: rgba(0,0,0,.85); }
.nc-card-head{
  font-size:16px;
  font-weight:980;
  letter-spacing:.2px;
  margin-top:2px;
}

.nc-op{
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 11px 0;
}
.nc-op-circle{
  width:46px;
  height:46px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:980;
  font-size:20px;
  color:#111;
  border:1px solid rgba(245,124,0,.45);
  background: rgba(245,124,0,.12);
  box-shadow: 0 10px 20px rgba(245,124,0,.12);
}
.nc-op-eq{ border-color: rgba(245,124,0,.55); }

.nc-field{ margin-top:4px; }
.nc-label{ font-size:13px; margin-bottom:8px; opacity:.9; }

.nc-stepper{ display:flex; gap:10px; align-items:center; }
.nc-stepper-compact{ gap:8px; }

.nc-btn{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  background:#f7f7f7;
  cursor:pointer;
  font-size:20px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.nc-btn:active{ transform: scale(.96); }
.nc-btn.nc-pop{ animation: ncPop .18s ease; }
@keyframes ncPop{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
  100%{ transform:scale(1); }
}

.nc-btn-sm{
  width:38px;
  height:38px;
  border-radius:12px;
  font-size:18px;
}

.nc-input{
  flex:1;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  padding:0 12px;
  font-size:15px;
  background:#fff;
}
.nc-input-sm{
  height:38px;
  border-radius:12px;
  font-size:14px;
  width:90px;
}

.nc-hint{
  margin-top:8px;
  font-size:12px;
  opacity:.7;
}

.nc-result-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}

.nc-bottle{
  position:relative;
  width:200px;
  display:flex;
  justify-content:center;
}
.nc-bottle svg{ width:150px; height:220px; }

.nc-bottle-outline{
  fill:none;
  stroke:rgba(0,0,0,.28);
  stroke-width:3;
}
.nc-bottle-cap{ fill: rgba(0,0,0,.12); }
.nc-cap-lines line{
  stroke: rgba(0,0,0,.22);
  stroke-width:2;
}
.nc-bottle-neck{ fill: rgba(0,0,0,.08); }

.nc-liquid{ transition: y .55s ease; }

.nc-wave{
  fill: rgba(255,255,255,.10);
  opacity:.85;
  animation: ncWave 2.2s ease-in-out infinite;
}
@keyframes ncWave{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(6px); }
}

.nc-label-outline{
  fill:none;
  stroke: rgba(0,0,0,.18);
  stroke-width:2;
}
.nc-label-inner{
  fill: rgba(255,255,255,.06);
  stroke: rgba(0,0,0,.08);
  stroke-width:1;
}

.nc-bottle-label{
  position:absolute;
  bottom:18px;
  width:160px;
  text-align:center;
  pointer-events:none;
  color:#fff;
  text-shadow:
    0 1px 2px rgba(0,0,0,.65),
    0 0 8px rgba(0,0,0,.45);
}
.nc-bottle-label .big{ font-size:22px; font-weight:980; }
.nc-bottle-label .sub{ font-size:8px; opacity:.7; margin-top:2px; }

.nc-bubble{
  fill: rgba(255,255,255,.55);
  opacity:0;
  animation-name: ncBubbleUp;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes ncBubbleUp{
  0%{ transform: translateY(0); opacity:0; }
  15%{ opacity:.85; }
  100%{ transform: translateY(-130px); opacity:0; }
}

.nc-cap-row{
  width:100%;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  padding:8px 10px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.nc-cap-row-left{ display:flex; flex-direction:column; gap:6px; }
.nc-cap-title{ font-weight:950; letter-spacing:.2px; font-size:13px; }
.nc-cap-foot{
  display:flex;
  gap:10px;
  font-size:12px;
  opacity:.75;
  white-space:nowrap;
}
.nc-cap-over{
  color:#b45309;
  opacity:1;
  font-weight:750;
}

.nc-kpi-row{
  width:100%;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.nc-kpi{
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  padding:10px;
  background:#fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.nc-kpi.is-pulse{ animation: ncKpiPulse .22s ease; }
@keyframes ncKpiPulse{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(245,124,0,.12); }
  100%{ transform: translateY(0); }
}
.nc-kpi .t{ font-size:12px; opacity:.65; }
.nc-kpi .v{ font-size:18px; font-weight:980; margin-top:6px; }

.nc-warning{
  width:100%;
  color:#b45309;
  font-size:13px;
}

.nc-booster-title{
  margin-top:14px;
  font-weight:980;
  letter-spacing:.2px;
  font-size:13px;
  opacity:.85;
}

.nc-booster-list{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width:680px){
  .nc-booster-list{ grid-template-columns:1fr; }
}

.nc-booster-card{
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:center;
  cursor:pointer;
  background:#fff;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, border-color .12s ease;
}
.nc-booster-card:hover{
  transform: translateY(-1px);
  box-shadow:0 12px 26px rgba(0,0,0,.10);
  border-color: rgba(245,124,0,.28);
}
.nc-booster-card.disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.nc-booster-img{
  width:54px;
  height:54px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:#fafafa;
  object-fit:cover;
}
.nc-booster-meta{ display:flex; flex-direction:column; gap:4px; }
.nc-booster-name{ font-weight:950; font-size:13px; line-height:1.2; }
.nc-booster-price{ font-size:12px; opacity:.7; }
.nc-booster-cta{
  margin-left:auto;
  font-size:12px;
  opacity:.7;
  max-width: 180px;
  text-align:right;
}

.nc-op-pulse{ animation: ncOpPulse .26s ease; }
@keyframes ncOpPulse{
  0%{ transform: scale(1); }
  55%{ transform: scale(1.08); box-shadow:0 16px 30px rgba(245,124,0,.22); }
  100%{ transform: scale(1); }
}

@keyframes ncPulse {
  0%, 100% { transform: translateZ(0) scale(1); }
  50% { transform: translateZ(0) scale(1.02); }
}
.nc-bottle.is-overflow svg{ animation: ncPulse .9s ease-in-out infinite; }


.nc-btn-open{
  border: 1.5px solid #f57c00;
  color: #333;
  background: #fff;
  font-weight: 600;
  transition: all .2s ease;
}

.nc-btn-open i{
  color: #f57c00;
}

.nc-btn-open:hover{
  background: rgba(245,124,0,.08);
}



@media (max-width: 680px){
  .nc-modal{
    width: calc(100% - 16px);
    border-radius: 14px;
    max-height: calc(100dvh - 18px);
  }
    .nc-card{
    padding: 12px;
  }

  .nc-body{
    padding: 12px;
  }

  .nc-card,
  .nc-cap-row,
  .nc-kpi{
    border-radius: 12px;
  }

  .nc-left > .nc-card,
  .nc-right > .nc-card{
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .nc-cap-row,
  .nc-kpi-row{
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .nc-op{
    display: none;
  }

  .nc-layout {
    gap:12px;
  }

}