/* ============ 基础：变量 / reset / 舞台 ============ */
:root {
    --blue:#4A9EFF; --green:#35D98C; --yellow:#FFC61A; --red:#FF5252; --orange:#FF9838; --purple:#8E5BFF;
    --t1:#EAF1FB; --t2:#8FA0BC;
    --glass:rgba(120,160,255,.07);
    --gborder:rgba(140,175,255,.16);
    /* 全局统一字号体系 */
    --fs-hero:17px;   /* 大标题 */
    --fs-title:12.5px; /* 卡片标题 */
    --fs-body:11px;    /* 卡片内容/正文 */
    --fs-sub:9.5px;    /* 辅助小字 */
}

html,body { width:100%; height:100%; overflow:hidden; background:#060A14; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; }

#stage {
    width:1200px; height:675px; position:absolute; left:50%; top:50%;
    /* 防右下角闪现：transform 由 CSS 先持有（变量由 <head> 内联脚本渲染前写入），
       fit.js 后续更新同一 transform，用户看到的首次绘制即居中缩放态 */
    transform:translate(-50%,-50%) scale(var(--fit,1));
    transform-origin:center center; color:var(--t1);
    background:
        radial-gradient(340px 300px at 11% 26%, rgba(0,150,255,.30), transparent 65%),
        radial-gradient(320px 280px at 89% 38%, rgba(120,90,255,.26), transparent 65%),
        radial-gradient(900px 400px at 14% -10%, rgba(0,150,255,.15), transparent 60%),
        radial-gradient(700px 360px at 100% -5%, rgba(120,90,255,.12), transparent 55%),
        radial-gradient(760px 460px at 50% 118%, rgba(0,200,190,.08), transparent 60%),
        linear-gradient(158deg,#0A1122 0%,#0B1428 48%,#081020 100%);
    display:flex; flex-direction:column;
    -webkit-font-smoothing:antialiased;
}

/* ============ 顶栏：研究院品牌 ============ */
    .topbar{
        height:50px; flex-shrink:0; display:flex; align-items:center;
        padding:0 22px; margin-bottom:7px;
        background:rgba(10,18,36,.5); backdrop-filter:blur(10px);
        border-bottom:1px solid rgba(120,160,255,.09);
    }
    .brand{display:flex;align-items:center;gap:12px;}
    .logo{height:34px;width:auto;filter:drop-shadow(0 2px 9px rgba(74,158,255,.4));}
    .bn-zh{
        font-size:var(--fs-hero);font-weight:800;letter-spacing:2.5px;
        background:linear-gradient(92deg,#F0F6FF 20%,#9CC6FF 90%);
        -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .bn-en{font-size:var(--fs-sub);letter-spacing:1.5px;color:var(--t2);margin-top:3px;}
    .tb-right{display:flex;gap:16px;align-items:center;margin-left:auto;}
    .tb-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--t2);}
    .tb-item svg{width:13px;height:13px;}
    .ok{color:var(--green);}
    /* 卡片内容层级提到光球之上 */
    .card>*:not(.float-orb):not(::before){position:relative;z-index:1;}
    .card .float-orb ~ *{position:relative;z-index:1;}

/* ============ 主区：三栏 + 模型背景层 ============ */
    .main{
        flex:1; min-height:0; position:relative;
        display:grid; grid-template-columns:280px 1fr 280px; gap:12px;
        padding:12px 14px;
    }
    .col{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden;position:relative;z-index:2;}
    /* 3D：左右面板朝中央模型投出深色投影，营造面板浮在模型之上的层次 */
    .col-l{ box-shadow: 16px 0 36px 8px rgba(4,10,24,.6); }
    .col-r{ box-shadow: -16px 0 36px 8px rgba(4,10,24,.6); }
    .center-col{display:flex;flex-direction:column;min-width:0;position:relative;z-index:2;pointer-events:none;}

/* ============ 毛玻璃卡片（中性暗调 · 无色透明玻璃） ============ */
    .card{
        border:1.2px solid transparent; border-radius:16px;
        background:
            linear-gradient(165deg, rgba(160,185,225,.05) 0%, rgba(8,12,22,.06) 46%, rgba(140,165,205,.04) 100%) padding-box,
            linear-gradient(160deg, rgba(150,200,255,.34) 0%, rgba(100,130,170,.10) 38%, rgba(130,105,200,.26) 100%) border-box;
        backdrop-filter:blur(28px) saturate(150%) brightness(.86);
        -webkit-backdrop-filter:blur(28px) saturate(150%) brightness(.86);
        box-shadow:0 8px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(150,180,220,.06);
        padding:13px 15px;
        min-height:0; overflow:hidden;
        display:flex; flex-direction:column;
        position:relative;
    }
    /* 流光边框动画 */
    @property --sheen{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
    .card::before{
        content:''; position:absolute; inset:0; border-radius:inherit; padding:1.2px;
        background:conic-gradient(from var(--sheen),
            transparent 0deg, transparent 268deg,
            rgba(120,180,255,.10) 300deg,
            rgba(160,210,255,.55) 330deg,
            rgba(210,235,255,.85) 345deg,
            transparent 360deg);
        -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite:xor;
                mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                mask-composite:exclude;
        animation:sheenSpin 7s linear infinite;
        pointer-events:none; z-index:3;
    }
    @keyframes sheenSpin{ to{ --sheen:360deg; } }
    .card:nth-child(2)::before{ animation-delay:-2.4s; }
    .card:nth-child(3)::before{ animation-delay:-4.6s; }
    /* 卡片内浮动脉冲光球（智慧能量体，扫过内容上方） */
    .card .float-orb{
        position:absolute;border-radius:50%;pointer-events:none;z-index:0;
        filter:blur(10px);mix-blend-mode:screen;
        animation:orbFloat var(--dur,12s) ease-in-out var(--dly,0s) infinite alternate;
        will-change:transform,opacity;
    }
    @keyframes orbFloat{
        0%  {transform:translate(0,0) scale(.75);opacity:.7;}
        100%{transform:translate(var(--dx,60px),var(--dy,-40px)) scale(1.35);opacity:1;}
    }
    .card-title{font-size:var(--fs-title);font-weight:700;display:flex;align-items:center;gap:6px;margin-bottom:9px;letter-spacing:.5px;color:var(--t1);}
    .card-title svg{width:14px;height:14px;color:var(--blue);}
    .badge{font-size:9.5px;font-weight:700;color:var(--red);background:rgba(255,82,82,.15);border-radius:8px;padding:1px 7px;margin-left:auto;}
    .room-chip{font-size:9.5px;font-weight:700;color:var(--blue);background:rgba(74,158,255,.14);border:1px solid rgba(74,158,255,.25);border-radius:8px;padding:1px 8px;margin-left:auto;letter-spacing:1px;}

/* ============ 科技底层（智慧家居氛围 · 透出所有卡片） ============ */
    .tech-layer{
        position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
        background-image:
            linear-gradient(rgba(90,140,220,.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(90,140,220,.05) 1px, transparent 1px);
        background-size:46px 46px;
        -webkit-mask-image:radial-gradient(130% 105% at 50% 42%, #000 25%, transparent 92%);
        mask-image:radial-gradient(130% 105% at 50% 42%, #000 25%, transparent 92%);
    }
    .tech-layer .beam{
        position:absolute;height:2px;width:36%;left:-40%;
        background:linear-gradient(90deg,transparent,rgba(90,170,255,.34),transparent);
        filter:blur(1px);animation:beamFlow linear infinite;
    }
    .tech-layer .beam.b1{top:20%;animation-duration:11s;}
    .tech-layer .beam.b2{top:54%;animation-duration:15s;animation-delay:-6s;background:linear-gradient(90deg,transparent,rgba(122,120,255,.30),transparent);}
    .tech-layer .beam.b3{top:82%;animation-duration:19s;animation-delay:-11s;background:linear-gradient(90deg,transparent,rgba(80,220,210,.26),transparent);}
    @keyframes beamFlow{to{transform:translateX(390%);}}
    .tech-layer .mote{
        position:absolute;border-radius:50%;
        background:radial-gradient(circle, rgba(140,200,255,.9), rgba(140,200,255,0) 70%);
        animation:moteFloat linear infinite;
    }
    @keyframes moteFloat{
        from{transform:translateY(26px);opacity:0;}
        12%{opacity:.85;}
        88%{opacity:.5;}
        to{transform:translateY(-680px);opacity:0;}
    }
    .tech-layer .pulse-ring{
        position:absolute;border-radius:50%;border:1.5px solid rgba(90,160,255,.22);
        animation:ringPulse 9s ease-out infinite;
    }
    @keyframes ringPulse{
        from{transform:scale(.22);opacity:.65;}
        to{transform:scale(1.55);opacity:0;}
    }

/* ============ 中央模型背景层（左右栏各盖住20px） ============ */
    .model-layer{
        position:absolute; z-index:1;
        top:calc(12px + 40px + 10px); bottom:12px;
        left:calc(14px + 280px - 44px);
        right:calc(14px + 280px - 44px);
        border-radius:16px; overflow:hidden;
        border:none;
        background:
            radial-gradient(60% 70% at 50% 30%, rgba(60,130,255,.13), transparent 70%),
            radial-gradient(50% 60% at 50% 100%, rgba(0,200,190,.06), transparent 70%),
            linear-gradient(180deg,rgba(16,28,52,.6),rgba(10,18,36,.72));
        box-shadow:none;
    }
    #scenes{position:absolute;inset:0;}
    .scene{
        position:absolute;inset:0;opacity:0;transform:scale(1.045);
        transition:opacity .55s ease, transform .85s cubic-bezier(.22,1,.36,1);
    }
    .scene.active{opacity:1;transform:scale(1);}
    .scene svg{width:100%;height:100%;display:block;}
    .scene img.scene-img{
        width:118%;height:100%;margin-left:-9%;
        object-fit:contain;display:block;
        filter:drop-shadow(0 18px 40px rgba(0,8,26,.55));
        image-rendering:auto;
    }
    .scene svg *{pointer-events:none;}
    [data-glow]{transition:opacity .45s;}
    .model-vig{
        position:absolute;inset:0;pointer-events:none;
        background:
            linear-gradient(90deg, rgba(6,12,24,.78) 0%, rgba(6,12,24,.25) 10%, transparent 26%,
                            transparent 74%, rgba(6,12,24,.25) 90%, rgba(6,12,24,.78) 100%),
            radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(6,12,24,.35) 100%);
    }
    .model-cap{
        position:absolute;left:50%;bottom:13px;transform:translateX(-50%);z-index:3;pointer-events:none;
        display:flex;align-items:center;gap:8px;
        background:rgba(8,14,28,.62);backdrop-filter:blur(8px);
        border:1px solid rgba(140,175,255,.22);border-radius:11px;
        padding:6px 14px;font-size:10.5px;letter-spacing:1px;color:rgba(234,241,251,.85);
        white-space:nowrap;
    }
    .model-cap::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(53,217,140,.8);animation:br 2.4s infinite;}
    @keyframes br{0%,100%{opacity:1}50%{opacity:.55}}

/* ============ 空间 Tabs ============ */
    .tabs{
        height:40px;flex-shrink:0;display:flex;gap:6px;padding:4px;border-radius:12px;
        background:rgba(10,18,36,.62);backdrop-filter:blur(12px);
        border:1px solid var(--gborder);
        pointer-events:auto;
        animation:fadeDown .55s ease both;
        box-shadow:0 6px 18px rgba(0,0,0,.28);
    }
    @keyframes fadeDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
    .tab{
        flex:1;border-radius:9px;display:flex;align-items:center;justify-content:center;
        font-size:var(--fs-title);font-weight:700;letter-spacing:1px;text-indent:1px;color:var(--t2);
        cursor:pointer;transition:all .3s;
    }
    .tab:hover{color:var(--t1);background:rgba(74,158,255,.12);}
    .tab.active{
        background:linear-gradient(135deg,#4A9EFF,#2E63E8);color:#fff;
        box-shadow:0 4px 16px rgba(74,158,255,.4), inset 0 1px 0 rgba(255,255,255,.25);
    }

/* ============ 天气卡（含时间）· 六态增强动画 ============ */
    .weather{
        background:linear-gradient(140deg,rgba(160,185,225,.05),rgba(8,12,22,.06));
        border:1px solid rgba(110,165,255,.26);
        backdrop-filter:blur(28px) saturate(150%) brightness(.86);
        -webkit-backdrop-filter:blur(28px) saturate(150%) brightness(.86);
        position:relative;overflow:hidden;
        height:104px;flex-shrink:0;
        display:flex;flex-direction:column;align-items:stretch;justify-content:center;
        padding:0 !important;
        transition:background .8s;
    }
    .weather .w-row{width:100%;padding:0 16px;box-sizing:border-box;}
    .w-anim{position:absolute;inset:0;pointer-events:none;border-radius:inherit;overflow:hidden;}
    /* —— 云层（多云加厚：c4/c5 仅多云显示，灰调） —— */
    .w-anim .cloud{
        position:absolute;border-radius:50%;
        background:rgba(190,210,240,.34);
        filter:blur(8px);
        animation:cloudDrift linear infinite;
    }
    .w-anim .cloud.c1{width:110px;height:36px;top:8px;left:-112px;animation-duration:12s;}
    .w-anim .cloud.c2{width:76px;height:26px;top:40px;left:-80px;animation-duration:19s;animation-delay:-6s;background:rgba(190,210,240,.24);}
    .w-anim .cloud.c3{width:130px;height:42px;top:54px;left:-134px;animation-duration:27s;animation-delay:-14s;background:rgba(180,202,235,.20);}
    .w-anim .cloud.c4,.w-anim .cloud.c5{display:none;}
    .weather.cloudy .cloud.c4{display:block;width:94px;height:30px;top:66px;left:-98px;animation-duration:16s;animation-delay:-3s;background:rgba(170,190,222,.28);}
    .weather.cloudy .cloud.c5{display:block;width:150px;height:46px;top:58px;left:-152px;animation-duration:23s;animation-delay:-11s;background:rgba(160,182,215,.24);}
    .weather.cloudy{background:linear-gradient(140deg,rgba(100,115,145,.13),rgba(20,26,44,.09));}
    @keyframes cloudDrift{from{transform:translateX(0) scale(1);}50%{transform:translateX(230px) scale(1.08);}to{transform:translateX(470px) scale(1);}}
    /* —— 晴天：大太阳呼吸光晕 + 旋转光芒 —— */
    .weather.sunny{background:linear-gradient(140deg,rgba(180,140,70,.09),rgba(60,45,20,.06));}
    .weather.sunny .sun-glow{
        position:absolute;top:-30px;right:-24px;width:130px;height:130px;border-radius:50%;
        background:radial-gradient(circle, rgba(255,214,110,.55) 0%, rgba(255,214,110,.15) 45%, transparent 68%);
        animation:sunBreath 4.5s ease-in-out infinite;
    }
    .weather.sunny .sun-rays{
        position:absolute;top:-30px;right:-24px;width:130px;height:130px;border-radius:50%;
        background:repeating-conic-gradient(from 0deg, rgba(255,232,155,.18) 0deg 6deg, transparent 6deg 24deg);
        animation:sunSpin 22s linear infinite;
        -webkit-mask:radial-gradient(circle, transparent 32%, #000 36%, #000 62%, transparent 66%);
        mask:radial-gradient(circle, transparent 32%, #000 36%, #000 62%, transparent 66%);
    }
    @keyframes sunBreath{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.22);opacity:1;}}
    @keyframes sunSpin{to{transform:rotate(360deg);}}
    /* —— 雨天：斜向雨丝更密更长 —— */
    .weather.rainy{background:linear-gradient(140deg,rgba(60,90,140,.13),rgba(14,22,44,.09));}
    .w-anim .raindrop{
        position:absolute;top:-14px;width:1.6px;height:17px;border-radius:2px;
        background:linear-gradient(180deg, transparent, rgba(150,200,255,.8));
        animation:rainFall linear infinite;
    }
    @keyframes rainFall{
        from{transform:translate(0,-16px) skewX(-6deg);opacity:0;}
        10%{opacity:1;}
        to{transform:translate(-14px,122px) skewX(-6deg);opacity:.2;}
    }
    /* —— 雷阵雨：乌云雨丝 + 闪电符号 + 全屏频闪 —— */
    .weather.storm{background:linear-gradient(140deg,rgba(70,78,110,.15),rgba(18,22,42,.10));}
    .weather.storm .flash{
        position:absolute;inset:0;background:rgba(225,238,255,.92);opacity:0;
        animation:lightning 6s infinite;
    }
    .weather.storm .bolt{
        position:absolute;top:20px;right:58px;width:22px;height:54px;opacity:0;
        background:linear-gradient(200deg, rgba(255,255,255,.98) 30%, rgba(255,240,150,.98) 60%, transparent 100%);
        clip-path:polygon(55% 0, 15% 52%, 45% 52%, 30% 100%, 90% 42%, 55% 42%, 80% 0);
        filter:drop-shadow(0 0 8px rgba(200,225,255,.9));
        animation:boltFlash 6s infinite;
    }
    @keyframes lightning{
        0%,88.5%,92%,94.5%,100%{opacity:0;}
        89%{opacity:.7;}90%{opacity:.08;}91%{opacity:.45;}92.5%{opacity:.12;}94%{opacity:.55;}
    }
    @keyframes boltFlash{
        0%,88.5%,93%,100%{opacity:0;}
        89%{opacity:1;}90.5%{opacity:.2;}91.5%{opacity:.9;}
    }
    /* —— 雪：小雪稀疏慢飘 / 大雪密集扑面 —— */
    .weather.snowy{background:linear-gradient(140deg,rgba(95,120,160,.11),rgba(26,34,54,.07));}
    .weather.heavysnow{background:linear-gradient(140deg,rgba(110,130,165,.14),rgba(32,42,66,.09));}
    .w-anim .snowflake{
        position:absolute;top:-10px;border-radius:50%;
        background:rgba(245,250,255,.95);
        box-shadow:0 0 4px rgba(220,240,255,.7);
        animation:snowFall linear infinite;
    }
    @keyframes snowFall{
        from{transform:translate(0,-12px) translateX(0);opacity:0;}
        10%{opacity:1;}
        50%{transform:translate(6px,56px);}
        to{transform:translate(-8px,118px);opacity:.25;}
    }
    /* —— 雾：浓白雾团缓慢平移弥漫 —— */
    .weather.foggy{background:linear-gradient(140deg,rgba(150,165,190,.14),rgba(40,50,68,.10));}
    .w-anim .fogbank{
        position:absolute;border-radius:50%;
        background:radial-gradient(ellipse, rgba(220,230,245,.34), transparent 70%);
        filter:blur(13px);
        animation:fogDrift ease-in-out infinite alternate;
    }
    @keyframes fogDrift{
        from{transform:translateX(-26px) scale(1);opacity:.55;}
        to{transform:translateX(30px) scale(1.22);opacity:.95;}
    }
    /* —— 霾：黄灰颗粒横向飘移 + 朦胧底色 —— */
    .weather.haze{background:linear-gradient(140deg,rgba(160,140,90,.16),rgba(60,52,30,.11));}
    .w-anim .hazedust{
        position:absolute;border-radius:50%;
        background:radial-gradient(circle, rgba(200,180,120,.5), transparent 70%);
        filter:blur(.6px);
        animation:hazeDrift linear infinite;
    }
    @keyframes hazeDrift{
        from{transform:translate(-20px,3px);opacity:0;}
        15%{opacity:.85;}
        to{transform:translate(280px,-6px);opacity:.1;}
    }
    /* —— 大风：横向风线快速掠过 + 树摇感偏移 —— */
    .weather.windy{background:linear-gradient(140deg,rgba(88,120,170,.16),rgba(26,38,62,.10));}
    .w-anim .windline{
        position:absolute;height:1.6px;border-radius:2px;
        background:linear-gradient(90deg,transparent,rgba(170,210,255,.6),transparent);
        animation:windRush linear infinite;
    }
    @keyframes windRush{
        from{transform:translateX(-90px) scaleX(.6);opacity:0;}
        18%{opacity:.95;}
        to{transform:translateX(330px) scaleX(1.3);opacity:0;}
    }
    .w-row{display:flex;align-items:center;gap:12px;position:relative;z-index:1;}
    .w-row .t{font-size:29px;font-weight:300;}
    .w-right{margin-left:auto;text-align:right;line-height:1.5;padding-right:2px;}
    .w-time{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.5px;}
    .w-date{font-size:var(--fs-sub);color:var(--t2);letter-spacing:1px;}
    .w-desc{font-size:var(--fs-sub);color:rgba(234,241,251,.68);}
    .w-ic-wrap{position:relative;width:38px;height:36px;flex-shrink:0;}
    .w-ic-wrap .sun-core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;animation:sunSpin 14s linear infinite;}
    @keyframes sunSpin{to{transform:rotate(360deg);}}
    .w-ic-wrap .cloud-core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;animation:cloudBob 4.5s ease-in-out infinite;}
    @keyframes cloudBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
    .w-cycle{
        position:absolute;top:7px;right:9px;z-index:2;width:21px;height:21px;
        border-radius:50%;display:flex;align-items:center;justify-content:center;
        background:rgba(8,14,28,.5);border:1px solid rgba(140,175,255,.25);
        color:rgba(234,241,251,.75);font-size:11px;cursor:pointer;
        transition:all .25s;
    }
    .w-cycle:hover{background:rgba(74,158,255,.3);color:#fff;transform:rotate(180deg);}

/* ============ 家里很舒适（环境/空调/水电/报警） ============ */
    .cf-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:9px;flex:1;min-height:0;}
    .cf{
        border-radius:12px;padding:11px 13px;
        display:flex;flex-direction:column;justify-content:center;gap:4px;
        background:linear-gradient(150deg, rgba(40,74,158,.10), rgba(6,14,34,.26));
        border:1px solid rgba(120,160,255,.10);
        transition:background .25s,border-color .25s;
        animation:envIn .5s ease both;
    }
    .cf:hover{background:linear-gradient(150deg, rgba(66,120,220,.17), rgba(10,22,48,.34));border-color:rgba(74,158,255,.28);}
    .cf:nth-child(1){animation-delay:.05s;}
    .cf:nth-child(2){animation-delay:.12s;}
    .cf:nth-child(3){animation-delay:.19s;}
    .cf:nth-child(4){animation-delay:.26s;}
    @keyframes envIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
    .cf-h{display:flex;align-items:center;gap:6px;font-size:var(--fs-sub);color:var(--t2);letter-spacing:1px;}
    .cf-h .ic{font-size:14px;line-height:1;}
    .cf-v{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15;color:var(--t1);}
    .cf-v small{font-size:var(--fs-sub);font-weight:400;color:var(--t2);margin-left:2px;}
    .cf-s{font-size:var(--fs-sub);color:var(--t2);}
    .cf-s .ic-s{font-size:10px;line-height:1;vertical-align:-1px;margin-right:1px;}
    .cf-nowrap{white-space:nowrap;overflow:visible;}
    .cf.v-env .cf-v{color:#7DB6FF;}
    .cf.v-ac  .cf-v{color:#5FD9F2;}
    .cf.v-en  .cf-v{color:#52E8A0;}
    .cf.v-al  .cf-v{color:#52E8A0;display:flex;align-items:center;}
    .safe-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(53,217,140,.8);display:inline-block;margin-right:7px;animation:br 2.4s infinite;}

/* ============ 消息中心 ============ */
    .msg-list{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;overflow:hidden;}
    .msg{display:flex;gap:9px;align-items:center;background:linear-gradient(150deg, rgba(40,74,158,.09), rgba(6,14,34,.24));border:1px solid rgba(120,160,255,.09);border-radius:10px;padding:8px 10px;cursor:pointer;flex-shrink:0;}
    .msg.unread{border-color:rgba(74,158,255,.3);background:linear-gradient(150deg, rgba(60,108,208,.16), rgba(10,22,48,.3));}
    .msg .ic{font-size:14px;width:24px;text-align:center;flex-shrink:0;}
    .msg .bd{flex:1;min-width:0;}
    .msg .t{font-size:var(--fs-body);font-weight:700;display:flex;align-items:center;gap:5px;color:var(--t1);}
    .msg.unread .t::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--red);}
    .msg .d{font-size:var(--fs-sub);color:var(--t2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .msg .tm{font-size:8.5px;color:var(--t2);flex-shrink:0;}

/* ============ 模式设置（回家/离家/睡眠/观影） ============ */
    .mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
    .mode-btn{
        border:1px solid rgba(140,175,255,.18);border-radius:11px;cursor:pointer;
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
        padding:9px 2px 8px;position:relative;overflow:hidden;
        background:linear-gradient(150deg, rgba(40,74,158,.10), rgba(6,14,34,.26));
        transition:all .22s;
        font-family:inherit;
    }
    .mode-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 55%);opacity:0;transition:opacity .22s;}
    .mode-btn .mic{font-size:17px;line-height:1;transition:transform .22s;}
    .mode-btn .mnm{font-size:var(--fs-body);font-weight:700;color:var(--t2);letter-spacing:1px;transition:color .22s;}
    .mode-btn:hover{border-color:rgba(140,175,255,.4);background:rgba(30,52,94,.5);}
    .mode-btn:hover::after{opacity:1;}
    .mode-btn:active{transform:scale(.94);}
    .mode-btn.active{color:#fff;}
    .mode-btn.active .mnm{color:#fff;}
    .mode-btn.active .mic{transform:scale(1.12);}
    .mode-btn.m-home.active{background:linear-gradient(150deg,rgba(150,205,255,.62),rgba(64,138,242,.48));border:1px solid rgba(180,220,255,.85) !important;box-shadow:0 5px 20px rgba(80,155,250,.55), inset 0 1px 0 rgba(255,255,255,.3);}
    .mode-btn.m-away.active{background:linear-gradient(150deg,rgba(150,205,255,.62),rgba(64,138,242,.48));border:1px solid rgba(180,220,255,.85) !important;box-shadow:0 5px 20px rgba(80,155,250,.55), inset 0 1px 0 rgba(255,255,255,.3);}
    .mode-btn.m-sleep.active{background:linear-gradient(150deg,rgba(150,205,255,.62),rgba(64,138,242,.48));border:1px solid rgba(180,220,255,.85) !important;box-shadow:0 5px 20px rgba(80,155,250,.55), inset 0 1px 0 rgba(255,255,255,.3);}
    .mode-btn.m-movie.active{background:linear-gradient(150deg,rgba(150,205,255,.62),rgba(64,138,242,.48));border:1px solid rgba(180,220,255,.85) !important;box-shadow:0 5px 20px rgba(80,155,250,.55), inset 0 1px 0 rgba(255,255,255,.3);}

/* ============ 设备状态（随空间联动） ============ */
    .dev-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:7px;flex:1;min-height:0;}
    .dev{
        background:linear-gradient(150deg, rgba(52,92,178,.13), rgba(14,26,52,.30));
        border:1px solid rgba(120,160,255,.10);border-radius:10px;
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
        cursor:pointer;transition:background .25s,border-color .25s;position:relative;
        padding:3px 4px;
    }
    .dev:hover{background:linear-gradient(150deg, rgba(74,140,240,.2), rgba(20,36,70,.4));border-color:rgba(74,158,255,.3);}
    .dev .ic{font-size:17px;line-height:1;filter:grayscale(.65);opacity:.65;transition:all .25s;}
    .dev .nm{font-size:var(--fs-body);color:var(--t2);transition:color .25s;line-height:1.15;white-space:nowrap;letter-spacing:.5px;padding:1px 0;}
    .dev.on .ic{filter:none;opacity:1;text-shadow:0 0 10px rgba(255,190,90,.55);}
    .dev.on .nm{color:var(--t1);}
    .dev.on{background:linear-gradient(150deg, rgba(74,158,255,.18), rgba(20,42,88,.34));border-color:rgba(74,158,255,.3);}
    /* 右上角统一状态点：开启=绿(带光晕)，关闭=灰 */
    .dev .dot{
        position:absolute;top:5.5px;right:5.5px;width:6.5px;height:6.5px;border-radius:50%;
        background:#5A6B8C;transition:all .3s;
    }
    .dev.on .dot{background:var(--green);box-shadow:0 0 8px rgba(53,217,140,.92), 0 0 2px rgba(53,217,140,1);}

/* ============ 门口 ============ */
    .door-standby{
        flex:1;min-height:0;border-radius:10px;cursor:pointer;
        background:linear-gradient(160deg,rgba(30,52,108,.22),rgba(6,12,28,.5));
        border:1px solid rgba(120,160,255,.12);
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
        position:relative;transition:border-color .25s;overflow:hidden;
    }
    .door-standby .door-quiet{animation:doorBreath 4s ease-in-out infinite;}
    @keyframes doorBreath{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.1);opacity:1;}}
    .door-standby .tx{font-size:var(--fs-body);color:var(--t2);}
    .door-standby:hover{border-color:rgba(74,158,255,.4);}

/* ============ 场景轻反馈 ============ */
    .scene-fb{
        position:absolute;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);
        display:flex;align-items:center;gap:11px;
        background:rgba(12,22,42,.9);backdrop-filter:blur(12px);
        border:1px solid rgba(74,158,255,.35);border-radius:14px;
        padding:13px 26px;opacity:0;pointer-events:none;
        transition:all .4s cubic-bezier(.22,1,.36,1); z-index:50;
        box-shadow:0 14px 40px rgba(0,0,0,.5);
    }
    .scene-fb.show{opacity:1;transform:translateX(-50%) translateY(0);}
    .scene-fb .ic{font-size:26px;}
    .scene-fb .t{font-size:15px;font-weight:800;}
    .scene-fb .d{font-size:11px;color:var(--t2);margin-top:2px;}

/* ============ ST-B2 对讲接管态 ============ */
    .stb2{
        position:absolute;inset:0;z-index:100;display:none;
        background:linear-gradient(165deg,#101828,#0A101C);
        flex-direction:column;
    }
    .stb2.show{display:flex;}
    .stb2-video{flex:1;position:relative;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.3);}
    .stb2-badge{
        position:absolute;top:16px;left:18px;display:flex;align-items:center;gap:8px;
        background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
        border:1px solid rgba(255,82,82,.4);border-radius:20px;padding:6px 14px;
        font-size:11.5px;color:#FF9B9B;letter-spacing:1px;
    }
    .stb2-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:br 1.2s infinite;}
    .stb2-caller{
        position:absolute;left:18px;bottom:18px;
        background:rgba(0,0,0,.55);backdrop-filter:blur(10px);
        border:1px solid rgba(140,175,255,.2);border-radius:12px;padding:11px 16px;color:#fff;
    }
    .stb2-caller .nm{font-size:16px;font-weight:800;}
    .stb2-caller .mt{font-size:10.5px;color:var(--t2);margin-top:2px;}
    .stb2-actions{
        height:112px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:26px;
        background:rgba(10,16,30,.8);backdrop-filter:blur(14px);
        border-top:1px solid rgba(120,160,255,.12);
    }
    .big-btn{
        width:66px;height:66px;border-radius:50%;border:none;cursor:pointer;
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
        color:#fff;position:relative;font-size:9.5px;font-weight:700;
        box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .15s;
    }
    .big-btn:active{transform:scale(.93);}
    .big-btn svg{width:22px;height:22px;}
    .big-btn.hang{background:linear-gradient(135deg,#F0565A,#D93A3E);}
    .big-btn.msg{background:linear-gradient(135deg,#8E5BFF,#5C37D6);}
    .big-btn.open{background:linear-gradient(135deg,#2FBF5E,#1F9F49);}
    .big-btn .prog{position:absolute;inset:-5px;border-radius:50%;display:none;}
    .big-btn.open.holding .prog{
        display:block;border:3px solid transparent;border-top-color:#fff;border-right-color:#fff;
        animation:spin 1.5s linear;
    }
    @keyframes spin{to{transform:rotate(360deg)}}

/* ============ 更多活动面板 ============ */
    .menu-pop{
        position:absolute;right:14px;top:60px;z-index:90;display:none;
        background:rgba(14,24,46,.95);backdrop-filter:blur(16px);
        border:1px solid rgba(140,175,255,.22);border-radius:16px;
        box-shadow:0 18px 50px rgba(0,0,0,.55);
        padding:12px;width:330px;
    }
    .menu-pop.show{display:block;}
    .menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
    .menu-item{
        background:rgba(120,160,255,.08);border:1px solid rgba(140,175,255,.14);
        border-radius:12px;padding:13px 6px;text-align:center;cursor:pointer;transition:background .2s;
    }
    .menu-item:hover{background:rgba(74,158,255,.18);}
    .menu-item .ic{font-size:21px;}
    .menu-item .nm{font-size:10px;margin-top:6px;color:var(--t1);}

/* ============ 科技底层（智慧家居氛围 · 透出所有卡片） ============ */
    .tech-layer{
        position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
        background-image:
            linear-gradient(rgba(90,140,220,.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(90,140,220,.05) 1px, transparent 1px);
        background-size:46px 46px;
        -webkit-mask-image:radial-gradient(130% 105% at 50% 42%, #000 25%, transparent 92%);
        mask-image:radial-gradient(130% 105% at 50% 42%, #000 25%, transparent 92%);
    }
    .tech-layer .beam{
        position:absolute;height:2px;width:36%;left:-40%;
        background:linear-gradient(90deg,transparent,rgba(90,170,255,.34),transparent);
        filter:blur(1px);animation:beamFlow linear infinite;
    }
    .tech-layer .beam.b1{top:20%;animation-duration:11s;}
    .tech-layer .beam.b2{top:54%;animation-duration:15s;animation-delay:-6s;background:linear-gradient(90deg,transparent,rgba(122,120,255,.30),transparent);}
    .tech-layer .beam.b3{top:82%;animation-duration:19s;animation-delay:-11s;background:linear-gradient(90deg,transparent,rgba(80,220,210,.26),transparent);}
    @keyframes beamFlow{to{transform:translateX(390%);}}
    .tech-layer .mote{
        position:absolute;border-radius:50%;
        background:radial-gradient(circle, rgba(140,200,255,.9), rgba(140,200,255,0) 70%);
        animation:moteFloat linear infinite;
    }
    @keyframes moteFloat{
        from{transform:translateY(26px);opacity:0;}
        12%{opacity:.85;}
        88%{opacity:.5;}
        to{transform:translateY(-680px);opacity:0;}
    }
    .tech-layer .pulse-ring{
        position:absolute;border-radius:50%;border:1.5px solid rgba(90,160,255,.22);
        animation:ringPulse 9s ease-out infinite;
    }
    @keyframes ringPulse{
        from{transform:scale(.22);opacity:.65;}
        to{transform:scale(1.55);opacity:0;}
    }

/* ============ 中央模型背景层（3D iframe/场景视图，左右面板压边收窄） ============ */
    .model-layer{
        position:absolute; z-index:1;
        top:calc(12px + 40px + 10px); bottom:12px;
        left:calc(14px + 280px + 6px);
        right:calc(14px + 280px + 6px);
        border-radius:16px; overflow:hidden;
        border:none;
        background:
            radial-gradient(60% 70% at 50% 30%, rgba(60,130,255,.13), transparent 70%),
            radial-gradient(50% 60% at 50% 100%, rgba(0,200,190,.06), transparent 70%),
            linear-gradient(180deg,rgba(16,28,52,.6),rgba(10,18,36,.72));
        box-shadow:none;
    }
    #scenes{position:absolute;inset:0;}
    /* 3D iframe：视口放大 1.35 倍再整体缩回 —— 模型等效缩小，与两侧卡片不压边留缝 */
    #model3dFrame{
        position:absolute;left:50%;top:50%;
        width:135%;height:135%;
        transform:translate(-50%,-50%) scale(0.741);
        /* 0.741 ≈ 1/1.35：最终视觉尺寸与容器一致，但内部按 135% 视口渲染 */
        transform-origin:center center;
        pointer-events:auto;
    }
    .scene{
        position:absolute;inset:0;opacity:0;transform:scale(1.045);
        transition:opacity .55s ease, transform .85s cubic-bezier(.22,1,.36,1);
    }
    .scene.active{opacity:1;transform:scale(1);}
    .scene svg{width:100%;height:100%;display:block;}
    .scene img.scene-img{
        width:118%;height:100%;margin-left:-9%;
        object-fit:contain;display:block;
        filter:drop-shadow(0 18px 40px rgba(0,8,26,.55));
        image-rendering:auto;
    }
    .scene svg *{pointer-events:none;}
    [data-glow]{transition:opacity .45s;}
    .model-vig{
        position:absolute;inset:0;pointer-events:none;
        background:
            linear-gradient(90deg, rgba(6,12,24,.78) 0%, rgba(6,12,24,.25) 10%, transparent 26%,
                            transparent 74%, rgba(6,12,24,.25) 90%, rgba(6,12,24,.78) 100%),
            radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(6,12,24,.35) 100%);
    }
    .model-cap{
        position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:3;pointer-events:none;
        display:flex;align-items:center;gap:8px;
        background:rgba(8,14,28,.62);backdrop-filter:blur(8px);
        border:1px solid rgba(140,175,255,.22);border-radius:11px;
        padding:6px 14px;font-size:10.5px;letter-spacing:1px;color:rgba(234,241,251,.85);
        white-space:nowrap;
    }
    .model-cap::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(53,217,140,.8);animation:br 2.4s infinite;}
    @keyframes br{0%,100%{opacity:1}50%{opacity:.55}}

/* ============ 空间 Tabs ============ */
    .tabs{
        height:40px;flex-shrink:0;display:flex;gap:6px;padding:4px;border-radius:12px;
        background:rgba(10,18,36,.62);backdrop-filter:blur(12px);
        border:1px solid var(--gborder);
        pointer-events:auto;
        animation:fadeDown .55s ease both;
        box-shadow:0 6px 18px rgba(0,0,0,.28);
    }
    @keyframes fadeDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
    .tab{
        flex:1;border-radius:9px;display:flex;align-items:center;justify-content:center;
        font-size:var(--fs-title);font-weight:700;letter-spacing:1px;text-indent:1px;color:var(--t2);
        cursor:pointer;transition:all .3s;
    }
    .tab:hover{color:var(--t1);background:rgba(74,158,255,.12);}
    .tab.active{
        background:linear-gradient(135deg,#4A9EFF,#2E63E8);color:#fff;
        box-shadow:0 4px 16px rgba(74,158,255,.4), inset 0 1px 0 rgba(255,255,255,.25);
    }

/* ============ 场景轻反馈 ============ */
    .scene-fb{
        position:absolute;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);
        display:flex;align-items:center;gap:11px;
        background:rgba(12,22,42,.9);backdrop-filter:blur(12px);
        border:1px solid rgba(74,158,255,.35);border-radius:14px;
        padding:13px 26px;opacity:0;pointer-events:none;
        transition:all .4s cubic-bezier(.22,1,.36,1); z-index:50;
        box-shadow:0 14px 40px rgba(0,0,0,.5);
    }
    .scene-fb.show{opacity:1;transform:translateX(-50%) translateY(0);}
    .scene-fb .ic{font-size:26px;}
    .scene-fb .t{font-size:15px;font-weight:800;}
    .scene-fb .d{font-size:11px;color:var(--t2);margin-top:2px;}

/* ============ ST-B2 对讲接管态 ============ */
    .stb2{
        position:absolute;inset:0;z-index:100;display:none;
        background:linear-gradient(165deg,#101828,#0A101C);
        flex-direction:column;
    }
    .stb2.show{display:flex;}
    .stb2-video{flex:1;position:relative;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.3);}
    .stb2-badge{
        position:absolute;top:16px;left:18px;display:flex;align-items:center;gap:8px;
        background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
        border:1px solid rgba(255,82,82,.4);border-radius:20px;padding:6px 14px;
        font-size:11.5px;color:#FF9B9B;letter-spacing:1px;
    }
    .stb2-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:br 1.2s infinite;}
    .stb2-caller{
        position:absolute;left:18px;bottom:18px;
        background:rgba(0,0,0,.55);backdrop-filter:blur(10px);
        border:1px solid rgba(140,175,255,.2);border-radius:12px;padding:11px 16px;color:#fff;
    }
    .stb2-caller .nm{font-size:16px;font-weight:800;}
    .stb2-caller .mt{font-size:10.5px;color:var(--t2);margin-top:2px;}
    .stb2-actions{
        height:112px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:26px;
        background:rgba(10,16,30,.8);backdrop-filter:blur(14px);
        border-top:1px solid rgba(120,160,255,.12);
    }
    .big-btn{
        width:66px;height:66px;border-radius:50%;border:none;cursor:pointer;
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
        color:#fff;position:relative;font-size:9.5px;font-weight:700;
        box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .15s;
    }
    .big-btn:active{transform:scale(.93);}
    .big-btn svg{width:22px;height:22px;}
    .big-btn.hang{background:linear-gradient(135deg,#F0565A,#D93A3E);}
    .big-btn.msg{background:linear-gradient(135deg,#8E5BFF,#5C37D6);}
    .big-btn.open{background:linear-gradient(135deg,#2FBF5E,#1F9F49);}
    .big-btn .prog{position:absolute;inset:-5px;border-radius:50%;display:none;}
    .big-btn.open.holding .prog{
        display:block;border:3px solid transparent;border-top-color:#fff;border-right-color:#fff;
        animation:spin 1.5s linear;
    }
    @keyframes spin{to{transform:rotate(360deg)}}

/* ============ 更多活动面板 ============ */
    .menu-pop{
        position:absolute;right:14px;top:60px;z-index:90;display:none;
        background:rgba(14,24,46,.95);backdrop-filter:blur(16px);
        border:1px solid rgba(140,175,255,.22);border-radius:16px;
        box-shadow:0 18px 50px rgba(0,0,0,.55);
        padding:12px;width:330px;
    }
    .menu-pop.show{display:block;}
    .menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
    .menu-item{
        background:rgba(120,160,255,.08);border:1px solid rgba(140,175,255,.14);
        border-radius:12px;padding:13px 6px;text-align:center;cursor:pointer;transition:background .2s;
    }
    .menu-item:hover{background:rgba(74,158,255,.18);}
    .menu-item .ic{font-size:21px;}
    .menu-item .nm{font-size:10px;margin-top:6px;color:var(--t1);}

/* ============ 天气卡（含时间）· 六态增强动画 ============ */
    .weather{
        background:linear-gradient(140deg,rgba(160,185,225,.05),rgba(8,12,22,.06));
        border:1px solid rgba(110,165,255,.26);
        backdrop-filter:blur(28px) saturate(150%) brightness(.86);
        -webkit-backdrop-filter:blur(28px) saturate(150%) brightness(.86);
        position:relative;overflow:hidden;
        height:104px;flex-shrink:0;
        display:flex;flex-direction:column;align-items:stretch;justify-content:center;
        padding:0 !important;
        transition:background .8s;
    }
    .weather .w-row{width:100%;padding:0 16px;box-sizing:border-box;}
    .w-anim{position:absolute;inset:0;pointer-events:none;border-radius:inherit;overflow:hidden;}
    /* —— 云层（多云加厚：c4/c5 仅多云显示，灰调） —— */
    .w-anim .cloud{
        position:absolute;border-radius:50%;
        background:rgba(190,210,240,.34);
        filter:blur(8px);
        animation:cloudDrift linear infinite;
    }
    .w-anim .cloud.c1{width:110px;height:36px;top:8px;left:-112px;animation-duration:12s;}
    .w-anim .cloud.c2{width:76px;height:26px;top:40px;left:-80px;animation-duration:19s;animation-delay:-6s;background:rgba(190,210,240,.24);}
    .w-anim .cloud.c3{width:130px;height:42px;top:54px;left:-134px;animation-duration:27s;animation-delay:-14s;background:rgba(180,202,235,.20);}
    .w-anim .cloud.c4,.w-anim .cloud.c5{display:none;}
    .weather.cloudy .cloud.c4{display:block;width:94px;height:30px;top:66px;left:-98px;animation-duration:16s;animation-delay:-3s;background:rgba(170,190,222,.28);}
    .weather.cloudy .cloud.c5{display:block;width:150px;height:46px;top:58px;left:-152px;animation-duration:23s;animation-delay:-11s;background:rgba(160,182,215,.24);}
    .weather.cloudy{background:linear-gradient(140deg,rgba(100,115,145,.13),rgba(20,26,44,.09));}
    @keyframes cloudDrift{from{transform:translateX(0) scale(1);}50%{transform:translateX(230px) scale(1.08);}to{transform:translateX(470px) scale(1);}}
    /* —— 晴天：大太阳呼吸光晕 + 旋转光芒 —— */
    .weather.sunny{background:linear-gradient(140deg,rgba(180,140,70,.09),rgba(60,45,20,.06));}
    .weather.sunny .sun-glow{
        position:absolute;top:-30px;right:-24px;width:130px;height:130px;border-radius:50%;
        background:radial-gradient(circle, rgba(255,214,110,.55) 0%, rgba(255,214,110,.15) 45%, transparent 68%);
        animation:sunBreath 4.5s ease-in-out infinite;
    }
    .weather.sunny .sun-rays{
        position:absolute;top:-30px;right:-24px;width:130px;height:130px;border-radius:50%;
        background:repeating-conic-gradient(from 0deg, rgba(255,232,155,.18) 0deg 6deg, transparent 6deg 24deg);
        animation:sunSpin 22s linear infinite;
        -webkit-mask:radial-gradient(circle, transparent 32%, #000 36%, #000 62%, transparent 66%);
        mask:radial-gradient(circle, transparent 32%, #000 36%, #000 62%, transparent 66%);
    }
    @keyframes sunBreath{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.22);opacity:1;}}
    @keyframes sunSpin{to{transform:rotate(360deg);}}
    /* —— 雨天：斜向雨丝更密更长 —— */
    .weather.rainy{background:linear-gradient(140deg,rgba(60,90,140,.13),rgba(14,22,44,.09));}
    .w-anim .raindrop{
        position:absolute;top:-14px;width:1.6px;height:17px;border-radius:2px;
        background:linear-gradient(180deg, transparent, rgba(150,200,255,.8));
        animation:rainFall linear infinite;
    }
    @keyframes rainFall{
        from{transform:translate(0,-16px) skewX(-6deg);opacity:0;}
        10%{opacity:1;}
        to{transform:translate(-14px,122px) skewX(-6deg);opacity:.2;}
    }
    /* —— 雷阵雨：乌云雨丝 + 闪电符号 + 全屏频闪 —— */
    .weather.storm{background:linear-gradient(140deg,rgba(70,78,110,.15),rgba(18,22,42,.10));}
    .weather.storm .flash{
        position:absolute;inset:0;background:rgba(225,238,255,.92);opacity:0;
        animation:lightning 6s infinite;
    }
    .weather.storm .bolt{
        position:absolute;top:20px;right:58px;width:22px;height:54px;opacity:0;
        background:linear-gradient(200deg, rgba(255,255,255,.98) 30%, rgba(255,240,150,.98) 60%, transparent 100%);
        clip-path:polygon(55% 0, 15% 52%, 45% 52%, 30% 100%, 90% 42%, 55% 42%, 80% 0);
        filter:drop-shadow(0 0 8px rgba(200,225,255,.9));
        animation:boltFlash 6s infinite;
    }
    @keyframes lightning{
        0%,88.5%,92%,94.5%,100%{opacity:0;}
        89%{opacity:.7;}90%{opacity:.08;}91%{opacity:.45;}92.5%{opacity:.12;}94%{opacity:.55;}
    }
    @keyframes boltFlash{
        0%,88.5%,93%,100%{opacity:0;}
        89%{opacity:1;}90.5%{opacity:.2;}91.5%{opacity:.9;}
    }
    /* —— 雪：小雪稀疏慢飘 / 大雪密集扑面 —— */
    .weather.snowy{background:linear-gradient(140deg,rgba(95,120,160,.11),rgba(26,34,54,.07));}
    .weather.heavysnow{background:linear-gradient(140deg,rgba(110,130,165,.14),rgba(32,42,66,.09));}
    .w-anim .snowflake{
        position:absolute;top:-10px;border-radius:50%;
        background:rgba(245,250,255,.95);
        box-shadow:0 0 4px rgba(220,240,255,.7);
        animation:snowFall linear infinite;
    }
    @keyframes snowFall{
        from{transform:translate(0,-12px) translateX(0);opacity:0;}
        10%{opacity:1;}
        50%{transform:translate(6px,56px);}
        to{transform:translate(-8px,118px);opacity:.25;}
    }
    /* —— 雾：浓白雾团缓慢平移弥漫 —— */
    .weather.foggy{background:linear-gradient(140deg,rgba(150,165,190,.14),rgba(40,50,68,.10));}
    .w-anim .fogbank{
        position:absolute;border-radius:50%;
        background:radial-gradient(ellipse, rgba(220,230,245,.34), transparent 70%);
        filter:blur(13px);
        animation:fogDrift ease-in-out infinite alternate;
    }
    @keyframes fogDrift{
        from{transform:translateX(-26px) scale(1);opacity:.55;}
        to{transform:translateX(30px) scale(1.22);opacity:.95;}
    }
    /* —— 霾：黄灰颗粒横向飘移 + 朦胧底色 —— */
    .weather.haze{background:linear-gradient(140deg,rgba(160,140,90,.16),rgba(60,52,30,.11));}
    .w-anim .hazedust{
        position:absolute;border-radius:50%;
        background:radial-gradient(circle, rgba(200,180,120,.5), transparent 70%);
        filter:blur(.6px);
        animation:hazeDrift linear infinite;
    }
    @keyframes hazeDrift{
        from{transform:translate(-20px,3px);opacity:0;}
        15%{opacity:.85;}
        to{transform:translate(280px,-6px);opacity:.1;}
    }
    /* —— 大风：横向风线快速掠过 + 树摇感偏移 —— */
    .weather.windy{background:linear-gradient(140deg,rgba(88,120,170,.16),rgba(26,38,62,.10));}
    .w-anim .windline{
        position:absolute;height:1.6px;border-radius:2px;
        background:linear-gradient(90deg,transparent,rgba(170,210,255,.6),transparent);
        animation:windRush linear infinite;
    }
    @keyframes windRush{
        from{transform:translateX(-90px) scaleX(.6);opacity:0;}
        18%{opacity:.95;}
        to{transform:translateX(330px) scaleX(1.3);opacity:0;}
    }
    .w-row{display:flex;align-items:center;gap:12px;position:relative;z-index:1;}
    .w-row .t{font-size:29px;font-weight:300;}
    .w-right{margin-left:auto;text-align:right;line-height:1.5;padding-right:2px;}
    .w-time{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.5px;}
    .w-date{font-size:var(--fs-sub);color:var(--t2);letter-spacing:1px;}
    .w-desc{font-size:var(--fs-sub);color:rgba(234,241,251,.68);}
    /* 城市行：定位图标 + 城市名，与 w-desc 同级淡雅风格 */
    .w-city{display:flex;align-items:center;gap:3px;font-size:var(--fs-sub);color:rgba(160,190,235,.82);margin-top:1px;letter-spacing:1px;}
    .w-city svg{width:9px;height:9px;flex-shrink:0;opacity:.85;}
    .w-ic-wrap{position:relative;width:38px;height:36px;flex-shrink:0;}
    .w-ic-wrap .sun-core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;animation:sunSpin 14s linear infinite;}
    @keyframes sunSpin{to{transform:rotate(360deg);}}
    .w-ic-wrap .cloud-core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;animation:cloudBob 4.5s ease-in-out infinite;}
    @keyframes cloudBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
    /* .w-cycle 已随演示模式移除（天气由接口真实数据驱动） */

/* ============ 家里很舒适（环境/空调/水电/报警） ============ */
    .cf-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:9px;flex:1;min-height:0;}
    .cf{
        border-radius:12px;padding:10px 12px;
        display:flex;flex-direction:column;justify-content:center;gap:4px;
        background:linear-gradient(150deg, rgba(40,74,158,.10), rgba(6,14,34,.26));
        border:1px solid rgba(120,160,255,.10);
        transition:background .25s,border-color .25s;
        animation:envIn .5s ease both;
        /* 四格严格等尺寸 + 内容不撑破 */
        min-width:0;min-height:0;overflow:hidden;
    }
    .cf:hover{background:linear-gradient(150deg, rgba(66,120,220,.17), rgba(10,22,48,.34));border-color:rgba(74,158,255,.28);}
    .cf:nth-child(1){animation-delay:.05s;}
    .cf:nth-child(2){animation-delay:.12s;}
    .cf:nth-child(3){animation-delay:.19s;}
    .cf:nth-child(4){animation-delay:.26s;}
    @keyframes envIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
    .cf-h{display:flex;align-items:center;gap:6px;font-size:var(--fs-sub);color:var(--t2);letter-spacing:1px;flex-shrink:0;}
    .cf-h .ic{font-size:14px;line-height:1;}
    .cf-v{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15;color:var(--t1);flex-shrink:0;white-space:nowrap;}
    .cf-v small{font-size:var(--fs-sub);font-weight:400;color:var(--t2);margin-left:2px;}
    /* 副行：允许换行（长文案折两行），行高紧凑，保证四格视觉一致 */
    .cf-s{font-size:var(--fs-sub);color:var(--t2);line-height:1.5;word-break:break-all;overflow:hidden;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
    .cf-s .ic-s{font-size:10px;line-height:1;vertical-align:-1px;margin-right:1px;}
    /* 能耗水电双行：图标左置，用量靠左、费用靠右（两端对齐） */
    .cf-en-line{display:flex;align-items:center;white-space:nowrap;letter-spacing:.5px;}
    .cf-en-line .en-ic{font-size:12px;line-height:1;margin-right:4px;}
    .cf-en-line .en-cost{margin-left:auto;}
    .cf-en-line:first-of-type{color:rgba(234,241,251,.85);font-weight:600;}
    .cf.v-env .cf-v{color:#7DB6FF;}
    .cf.v-ac  .cf-v{color:#5FD9F2;}
    .cf.v-en  .cf-v{color:#52E8A0;}
    .cf.v-al  .cf-v{color:#52E8A0;display:flex;align-items:center;}
    .safe-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(53,217,140,.8);display:inline-block;margin-right:7px;animation:br 2.4s infinite;}

/* ============ 消息中心 ============ */
    .msg-list{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;overflow:hidden;
        /* 按条数裁切：容器高度不足时末尾半条被裁 -> 改用 mask 渐隐，视觉上自然收尾 */
        -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
        mask-image:linear-gradient(180deg,#000 82%,transparent 100%);}
    .msg{display:flex;gap:9px;align-items:center;background:linear-gradient(150deg, rgba(40,74,158,.09), rgba(6,14,34,.24));border:1px solid rgba(120,160,255,.09);border-radius:10px;padding:8px 10px;cursor:pointer;flex-shrink:0;}
    .msg.unread{border-color:rgba(74,158,255,.3);background:linear-gradient(150deg, rgba(60,108,208,.16), rgba(10,22,48,.3));}
    .msg .ic{font-size:14px;width:24px;text-align:center;flex-shrink:0;}
    .msg .bd{flex:1;min-width:0;}
    .msg .t{font-size:var(--fs-body);font-weight:700;display:flex;align-items:center;gap:5px;color:var(--t1);}
    .msg.unread .t::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--red);}
    .msg .d{font-size:var(--fs-sub);color:var(--t2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .msg .tm{font-size:8.5px;color:var(--t2);flex-shrink:0;}

/* ============ 模式设置（回家/离家/睡眠/观影） ============ */
    .mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
    .mode-btn{
        border:1px solid rgba(140,175,255,.18);border-radius:11px;cursor:pointer;
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
        padding:9px 2px 8px;position:relative;overflow:hidden;
        background:linear-gradient(150deg, rgba(40,74,158,.10), rgba(6,14,34,.26));
        transition:all .22s;
        font-family:inherit;
    }
    .mode-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 55%);opacity:0;transition:opacity .22s;}
    .mode-btn .mic{font-size:17px;line-height:1;transition:transform .22s;}
    .mode-btn .mnm{font-size:var(--fs-body);font-weight:700;color:var(--t2);letter-spacing:1px;transition:color .22s;}
    .mode-btn:hover{border-color:rgba(140,175,255,.4);background:rgba(30,52,94,.5);}
    .mode-btn:hover::after{opacity:1;}
    .mode-btn:active{transform:scale(.94);}
    .mode-btn.active{color:#fff;}
    .mode-btn.active .mnm{color:#fff;}
    .mode-btn.active .mic{transform:scale(1.12);}
    .mode-btn.m-home.active{background:linear-gradient(150deg,rgba(150,205,255,.62),rgba(64,138,242,.48));border:1px solid rgba(180,220,255,.85) !important;box-shadow:0 5px 20px rgba(80,155,250,.55), inset 0 1px 0 rgba(255,255,255,.3);}
    .mode-btn.m-away.active{background:linear-gradient(150deg,rgba(150,205,255,.62),rgba(64,138,242,.48));border:1px solid rgba(180,220,255,.85) !important;box-shadow:0 5px 20px rgba(80,155,250,.55), inset 0 1px 0 rgba(255,255,255,.3);}
    .mode-btn.m-sleep.active{background:linear-gradient(150deg,rgba(150,205,255,.62),rgba(64,138,242,.48));border:1px solid rgba(180,220,255,.85) !important;box-shadow:0 5px 20px rgba(80,155,250,.55), inset 0 1px 0 rgba(255,255,255,.3);}
    .mode-btn.m-movie.active{background:linear-gradient(150deg,rgba(150,205,255,.62),rgba(64,138,242,.48));border:1px solid rgba(180,220,255,.85) !important;box-shadow:0 5px 20px rgba(80,155,250,.55), inset 0 1px 0 rgba(255,255,255,.3);}

/* ============ 设备状态（随空间联动） ============ */
    .dev-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:7px;flex:1;min-height:0;}
    .dev{
        background:linear-gradient(150deg, rgba(52,92,178,.13), rgba(14,26,52,.30));
        border:1px solid rgba(120,160,255,.10);border-radius:10px;
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
        cursor:pointer;transition:background .25s,border-color .25s;position:relative;
        padding:3px 4px;
    }
    .dev:hover{background:linear-gradient(150deg, rgba(74,140,240,.2), rgba(20,36,70,.4));border-color:rgba(74,158,255,.3);}
    .dev .ic{font-size:17px;line-height:1;filter:grayscale(.65);opacity:.65;transition:all .25s;}
    .dev{overflow:hidden;}
    .dev .nm{font-size:var(--fs-body);color:var(--t2);transition:color .25s;line-height:1.15;letter-spacing:.5px;padding:1px 0;
        /* 长设备名单行省略（真实设备名如"ASCB1LE智能微型断路器#1"），完整名靠 title 提示 */
        max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
    .dev.on .ic{filter:none;opacity:1;text-shadow:0 0 10px rgba(255,190,90,.55);}
    .dev.on .nm{color:var(--t1);}
    .dev.on{background:linear-gradient(150deg, rgba(74,158,255,.18), rgba(20,42,88,.34));border-color:rgba(74,158,255,.3);}
    /* 右上角统一状态点：开启=绿(带光晕)，关闭=灰 */
    .dev .dot{
        position:absolute;top:5.5px;right:5.5px;width:6.5px;height:6.5px;border-radius:50%;
        background:#5A6B8C;transition:all .3s;
    }
    .dev.on .dot{background:var(--green);box-shadow:0 0 8px rgba(53,217,140,.92), 0 0 2px rgba(53,217,140,1);}
    /* 离线态：整体半透明+灰阶（区别于正常关闭的暗蓝），状态点橙色示警 */
    .dev.offline{opacity:.42;filter:grayscale(.9);cursor:not-allowed;}
    .dev.offline .dot{background:#E8A33D;box-shadow:0 0 6px rgba(232,163,61,.8);}

/* ============ 门口 ============ */
    .door-standby{
        flex:1;min-height:0;border-radius:10px;cursor:pointer;
        background:linear-gradient(160deg,rgba(30,52,108,.22),rgba(6,12,28,.5));
        border:1px solid rgba(120,160,255,.12);
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
        position:relative;transition:border-color .25s;overflow:hidden;
    }
    .door-standby .door-quiet{animation:doorBreath 4s ease-in-out infinite;}
    @keyframes doorBreath{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.1);opacity:1;}}
    .door-standby .tx{font-size:var(--fs-body);color:var(--t2);}
    .door-standby:hover{border-color:rgba(74,158,255,.4);}