.hc-four-view-shell{
  width:100%;
  margin-top:18px;
  padding:18px;
  border-radius:22px;
  background:rgba(8,16,34,.92);
  border:1px solid rgba(86,120,180,.35);
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}
.hc-four-view-main{
  position:relative;
  min-height:420px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(12,24,48,.95),rgba(5,10,24,.95));
  border:1px solid rgba(80,120,180,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hc-four-view-main img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}
.hc-four-view-empty{
  text-align:center;
  color:rgba(255,255,255,.72);
  font-size:16px;
  line-height:1.8;
}
.hc-four-view-title{
  position:absolute;
  left:18px;
  top:16px;
  z-index:2;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(25,40,70,.8);
  border:1px solid rgba(95,145,220,.35);
  color:#fff;
  font-weight:700;
}
.hc-four-view-thumbs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:14px;
}
.hc-view-thumb{
  min-height:118px;
  border-radius:16px;
  border:1px solid rgba(88,125,190,.42);
  background:rgba(12,22,44,.88);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  transition:.18s ease;
}
.hc-view-thumb:hover{
  transform:translateY(-1px);
  border-color:rgba(80,220,255,.75);
}
.hc-view-thumb.is-active{
  border-color:#25d8ff;
  box-shadow:0 0 0 2px rgba(37,216,255,.18) inset;
}
@media(max-width:768px){
  .hc-four-view-main{min-height:260px;}
  .hc-four-view-thumbs{grid-template-columns:repeat(2,1fr);}
  .hc-view-thumb{min-height:90px;}
}

/* 普通模式强制不显示四视角窗口 */
body[data-hc-four-view-mode="normal"] #hc-four-view-shell{
  display:none !important;
}

/* Alpha3.8-v1832.10.3E Designer Studio Pro 四视角产品包装 */
.hc-four-view-pro-badge,
.hc-four-view-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 10px;
  background: linear-gradient(135deg, rgba(255,214,102,.18), rgba(34,211,238,.12));
  border: 1px solid rgba(255,214,102,.35);
  color: #ffe9a8;
  font-weight: 800;
  letter-spacing: .02em;
}

.hc-four-view-one-scheme-note,
.hc-four-view-subtitle {
  color: rgba(226, 241, 255, .78);
  font-size: 13px;
  line-height: 1.6;
}

.hc-four-view-one-scheme-note strong {
  color: #fff;
}

.hc-four-view-card-title {
  font-weight: 900;
  color: #fff;
}

.hc-four-view-card-title::after {
  content: " · 一个方案四个镜头";
  color: rgba(255, 233, 168, .95);
  font-size: 12px;
  font-weight: 800;
  margin-left: 8px;
}

.hc-four-view-thumb[data-view-id="view_03"]::after,
.hc-four-view-thumb[data-view="view_03"]::after {
  content: "软装细节";
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: rgba(255, 233, 168, .82);
}

.hc-four-view-thumb[data-view-id="view_04"]::after,
.hc-four-view-thumb[data-view="view_04"]::after {
  content: "斜向镜头";
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: rgba(34, 211, 238, .82);
}

/* =========================================================
   HUICHENG FOUR VIEW LOCAL REDRAW PANEL
   Designer Studio Pro 独立局部重绘操作区
   ========================================================= */

.hc-four-view-local-redraw-panel{
    margin-top:18px;
    padding:18px 20px;
    border:1px solid rgba(103,232,249,.22);
    border-radius:18px;
    background:
        linear-gradient(
            135deg,
            rgba(17,30,55,.96),
            rgba(20,24,48,.96)
        );
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.hc-four-view-local-redraw-head{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.hc-four-view-local-redraw-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    background:
        linear-gradient(
            135deg,
            rgba(74,222,128,.22),
            rgba(34,211,238,.18)
        );
    border:1px solid rgba(103,232,249,.28);
    font-size:20px;
}

.hc-four-view-local-redraw-copy{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
}

.hc-four-view-local-redraw-copy strong{
    font-size:16px;
    font-weight:700;
    color:#fff;
}

.hc-four-view-local-redraw-copy span{
    font-size:13px;
    line-height:1.6;
    color:rgba(226,232,240,.68);
}

#hc-four-view-local-redraw{
    min-width:190px;
    padding:12px 18px;
    border:1px solid rgba(103,232,249,.35);
    border-radius:14px;
    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.92),
            rgba(124,58,237,.92)
        );
    color:#fff;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

#hc-four-view-local-redraw:hover{
    transform:translateY(-1px);
    border-color:rgba(165,243,252,.72);
    box-shadow:0 10px 28px rgba(37,99,235,.22);
}

#hc-four-view-local-redraw span{
    font-size:14px;
    font-weight:700;
}

#hc-four-view-local-redraw small{
    font-size:11px;
    font-weight:400;
    color:rgba(255,255,255,.72);
}

@media (max-width:768px){
    .hc-four-view-local-redraw-panel{
        flex-direction:column;
        align-items:stretch;
    }

    #hc-four-view-local-redraw{
        width:100%;
        min-width:0;
    }
}



/* =========================================================
   HUICHENG FOUR VIEW LIGHTBOX
   Designer Studio Pro 四视角大图查看
   点击放大 / 滚轮缩放 / 拖动 / 右键保存原图
   ========================================================= */

.hc-four-view-lightbox{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    flex-direction:column;
    background:rgba(2,6,23,.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.hc-four-view-lightbox-toolbar{
    position:relative;
    z-index:2;
    min-height:68px;
    padding:12px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-bottom:1px solid rgba(148,163,184,.16);
    background:rgba(15,23,42,.88);
}

.hc-four-view-lightbox-title{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    font-size:16px;
    font-weight:700;
}

.hc-four-view-lightbox-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
}

.hc-four-view-lightbox-actions button{
    appearance:none;
    -webkit-appearance:none;
    min-width:76px;
    height:40px;
    padding:0 16px;
    border:1px solid rgba(148,163,184,.26);
    border-radius:10px;
    background:rgba(30,41,59,.88);
    color:#e2e8f0;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.hc-four-view-lightbox-actions button:hover{
    background:rgba(51,65,85,.96);
    border-color:rgba(103,232,249,.48);
    transform:translateY(-1px);
}

.hc-four-view-lightbox-stage{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    user-select:none;
    -webkit-user-select:none;
}

.hc-four-view-lightbox-stage img{
    display:block;
    width:auto;
    height:auto;
    max-width:96%;
    max-height:88vh;
    object-fit:contain;
    transform-origin:center center;
    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
    transition:box-shadow .18s ease;
    box-shadow:
        0 24px 80px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.08);
}

.hc-four-view-lightbox-stage img:active{
    cursor:grabbing;
}

.hc-four-view-lightbox-hint{
    position:absolute;
    left:50%;
    bottom:22px;
    z-index:3;
    transform:translateX(-50%);
    max-width:calc(100vw - 40px);
    padding:9px 16px;
    border:1px solid rgba(148,163,184,.18);
    border-radius:999px;
    background:rgba(15,23,42,.82);
    color:rgba(226,232,240,.72);
    font-size:12px;
    line-height:1.4;
    white-space:nowrap;
    pointer-events:none;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}


/* 主视角完成图增加可点击提示 */

#hc-four-view-main-img{
    cursor:zoom-in;
}

#hc-four-view-main-img:hover{
    filter:brightness(1.02);
}


/* 手机和平板 */

@media (max-width:768px){

    .hc-four-view-lightbox-toolbar{
        min-height:auto;
        padding:10px 12px;
        gap:10px;
        flex-wrap:wrap;
    }

    .hc-four-view-lightbox-title{
        width:100%;
        font-size:14px;
    }

    .hc-four-view-lightbox-actions{
        width:100%;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:8px;
    }

    .hc-four-view-lightbox-actions button{
        width:100%;
        min-width:0;
        height:38px;
        padding:0 8px;
        font-size:12px;
    }

    .hc-four-view-lightbox-stage{
        padding:12px;
    }

    .hc-four-view-lightbox-stage img{
        max-width:100%;
        max-height:78vh;
    }

    .hc-four-view-lightbox-hint{
        bottom:12px;
        font-size:11px;
        white-space:normal;
        text-align:center;
    }
}