:root{
  --bg:#0A0B0C;
  --surface:#161719;
  --surface-2:#1E2023;
  --input:#2A2C30;
  --green:#22CE8B;
  --green-2:#19E39A;
  --green-dim:rgba(34,206,139,.14);
  --text:#FFFFFF;
  --text-2:#C7CAD0;
  --muted:#8B8E95;
  --muted-2:#5F6369;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --amber:#F5A623;
  --cyan:#4CC9F0;
  --violet:#A78BFA;
  --red:#FF5A5F;
  --r-lg:22px;
  --r-md:16px;
  --r-sm:12px;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--font);
  background:
    radial-gradient(1100px 520px at 12% -8%, #EDF1F7 0%, rgba(237,241,247,0) 60%),
    radial-gradient(900px 560px at 92% 108%, #E4F6EF 0%, rgba(228,246,239,0) 55%),
    #F3F5F8;
  color:#111;display:flex;flex-direction:column;height:100vh;overflow:hidden;
}

/* ================= Page chrome ================= */
.topbar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid #E4E7EC;
}
.topbar .brand{display:flex;align-items:center;gap:12px;}
.topbar .brand .logo{color:#111;}
.topbar .brand .logo .mark::after{background:linear-gradient(140deg,#22CE8B,#0E9E6C);}
.topbar .sep{width:1px;height:18px;background:#DEE2E8;}
.topbar .tb-t{font-size:14px;font-weight:700;color:#16181C;letter-spacing:.2px;}
.tb-right{display:flex;align-items:center;gap:12px;}
.pill{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#0E9E6D;
  background:#E4F7EF;border:1px solid #C6EDDD;padding:5px 11px;border-radius:999px;letter-spacing:.3px;
}
.pill i{width:6px;height:6px;border-radius:50%;background:#22CE8B;display:block;}
.tb-btn{
  border:1px solid #DFE3E9;background:#fff;color:#3A4048;font-family:var(--font);
  font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:10px;cursor:pointer;transition:all .18s;
}
.tb-btn:hover{background:#111417;color:#fff;border-color:#111417;}

.layout{flex:1;display:flex;min-height:0;}

/* ================= Requirement map ================= */
.reqmap{
  flex:0 0 306px;display:flex;flex-direction:column;min-height:0;
  background:rgba(255,255,255,.72);border-right:1px solid #E4E7EC;backdrop-filter:blur(10px);
}
.rm-head{padding:16px 16px 12px;border-bottom:1px solid #ECF0F4;}
.rm-title{font-size:14px;font-weight:700;color:#16181C;}
.rm-sub{font-size:11.5px;color:#8A909A;margin-top:3px;}
.rm-search{
  width:100%;margin-top:11px;height:34px;border-radius:9px;border:1px solid #DFE3E9;background:#fff;
  padding:0 11px;font-size:12.5px;font-family:var(--font);color:#111;outline:0;
}
.rm-search:focus{border-color:#22CE8B;box-shadow:0 0 0 3px rgba(34,206,139,.12);}
.rm-body{flex:1;overflow-y:auto;padding:10px 10px 24px;}
.rm-body::-webkit-scrollbar{width:6px;}
.rm-body::-webkit-scrollbar-thumb{background:#D6DAE0;border-radius:6px;}
.rm-group{margin-bottom:8px;}
.rm-g-t{
  display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:#6A707A;
  letter-spacing:.4px;padding:8px 8px 6px;cursor:pointer;user-select:none;
}
.rm-g-t .n{
  font-size:10px;background:#EFF2F6;color:#7A8089;border-radius:5px;padding:1px 6px;font-weight:700;
}
.rm-g-t .ar{margin-left:auto;transition:transform .2s;}
.rm-group.closed .rm-items{display:none;}
.rm-group.closed .ar{transform:rotate(-90deg);}
.rm-items{display:flex;flex-direction:column;gap:2px;}
.rm-item{
  display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;cursor:pointer;
  font-size:12.5px;color:#3D434B;transition:background .16s,color .16s;border:1px solid transparent;
}
.rm-item:hover{background:#F1F4F8;}
.rm-item.on{background:#111417;color:#fff;border-color:#111417;}
.rm-item .d{width:5px;height:5px;border-radius:50%;background:#C6CBD3;flex:0 0 auto;}
.rm-item.on .d{background:#22CE8B;}
.rm-item .tag{
  margin-left:auto;font-size:9.5px;font-weight:700;color:#8A909A;background:#EFF2F6;
  border-radius:4px;padding:1px 5px;letter-spacing:.2px;
}
.rm-item.on .tag{background:rgba(255,255,255,.14);color:#C9CDD3;}

/* ================= Stage / phone ================= */
.stage{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:14px 18px 8px;min-height:0;
}
.device{
  position:relative;width:390px;height:844px;flex:0 0 auto;border-radius:52px;background:#08090A;padding:11px;
  box-shadow:0 0 0 2px #2b2d31,0 0 0 3px #131417,0 40px 80px -22px rgba(16,24,40,.45),0 18px 40px -18px rgba(16,24,40,.28);
}
.phone{position:relative;width:100%;height:100%;border-radius:42px;overflow:hidden;background:var(--bg);isolation:isolate;}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:112px;height:31px;border-radius:20px;background:#050506;z-index:60;}
.statusbar{
  position:absolute;top:0;left:0;right:0;height:54px;z-index:55;display:flex;align-items:center;justify-content:space-between;
  padding:16px 30px 0;pointer-events:none;color:#fff;
}
.statusbar .time{font-size:14.5px;font-weight:600;letter-spacing:.2px;}
.statusbar .sicons{display:flex;align-items:center;gap:6px;}
.statusbar svg{display:block;}
.home-indicator{position:absolute;left:50%;transform:translateX(-50%);bottom:9px;width:134px;height:5px;border-radius:5px;background:rgba(255,255,255,.9);z-index:70;}
.stage-foot{flex:0 0 auto;padding-top:10px;}
.crumb{font-size:11.5px;color:#8A909A;letter-spacing:.2px;}

/* ================= Screens ================= */
#screenRoot{position:absolute;inset:0;}
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);
  opacity:0;transform:translateX(14px);pointer-events:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.22,.7,.3,1);
}
.screen.active{opacity:1;transform:none;pointer-events:auto;}
.screen.static{transform:none;}
/* 兜底：任何直接子项都不允许被 flex 压缩，否则按钮会变矮、内容会被裁切 */
.screen > *{flex-shrink:0;}

.nav{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:56px 14px 10px;background:var(--bg);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.nav .n-b{
  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;flex:0 0 auto;transition:background .16s;
}
.nav .n-b:hover{background:rgba(255,255,255,.08);}
.nav .n-t{flex:1;min-width:0;text-align:center;font-size:16.5px;font-weight:700;color:#fff;letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav .n-r{
  min-width:34px;height:34px;padding:0 8px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--green-2);font-size:13px;font-weight:600;cursor:pointer;flex:0 0 auto;
}
.nav .n-r:hover{background:rgba(255,255,255,.08);}
/* 价格日历弹层 */
.pc-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:4px;text-align:center;}
.pc-week span{font-size:11px;color:#8B8E95;padding:4px 0;}
.pc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.pc-day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 5px;border-radius:9px;
  background:#1A1D20;border:1px solid rgba(255,255,255,.05);cursor:pointer;transition:all .15s;}
.pc-day:hover{background:#22262A;}
.pc-day .dd{font-size:12.5px;font-weight:600;color:#D6DAE0;line-height:1;}
.pc-day .pp{font-size:9.5px;color:#8B8E95;line-height:1;}
.pc-day.neg .dd,.pc-day.neg .pp{color:#22CE8B;}
.pc-day.today{border-color:rgba(34,206,139,.55);background:rgba(34,206,139,.10);}
.pc-day.today .dd{color:#22CE8B;}
.content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-bottom:22px;-webkit-overflow-scrolling:touch;}
.content::-webkit-scrollbar{width:0;}
.content > *:last-child{margin-bottom:6px;}

/* ================= Logo ================= */
.logo{position:relative;display:inline-flex;align-items:flex-start;font-family:'Orbitron',-apple-system,"Segoe UI",sans-serif;font-weight:800;letter-spacing:.055em;line-height:1;color:#fff;}
.logo.sm{font-size:17px;}
.logo.md{font-size:27px;}
.logo.lg{font-size:32px;}
.logo .mark{position:relative;display:inline-block;}
.logo .mark::after{
  content:"";position:absolute;left:50%;top:-.14em;transform:translateX(-50%);
  width:.30em;height:.30em;border-radius:.055em;background:linear-gradient(140deg,#3BF2AE,#12B47A);
  box-shadow:0 0 10px rgba(34,206,139,.75);
}
.tag{font-size:9.5px;font-weight:600;letter-spacing:.30em;color:#9FA6AE;margin-top:7px;text-transform:uppercase;}

/* ================= Splash / Onboarding ================= */
#screen-splash{
  background:radial-gradient(420px 320px at 50% 38%, rgba(34,206,139,.16) 0%, rgba(34,206,139,0) 68%),
             radial-gradient(700px 500px at 50% 120%, rgba(34,206,139,.10) 0%, rgba(34,206,139,0) 60%),#07080A;
  align-items:center;justify-content:center;
}
.glow-ring{position:absolute;top:38%;left:50%;width:300px;height:300px;border-radius:50%;border:1px solid rgba(34,206,139,.16);animation:ring 3.4s ease-out infinite;}
.glow-ring:nth-child(2){animation-delay:1.1s;}
.glow-ring:nth-child(3){animation-delay:2.2s;}
@keyframes ring{0%{transform:translate(-50%,-50%) scale(.62);opacity:0;}28%{opacity:.85;}100%{transform:translate(-50%,-50%) scale(1.28);opacity:0;}}
.splash-core{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;margin-top:-40px;}
.splash-core .logo-big{transform:scale(1.32);animation:logoIn .9s cubic-bezier(.2,.8,.25,1) both;}
.splash-core .tagline{margin-top:26px;font-size:15px;letter-spacing:.34em;color:#9FA6AE;text-transform:uppercase;animation:fadeUp .9s .25s both;}
.splash-sub{position:absolute;bottom:150px;left:0;right:0;text-align:center;color:#676C73;font-size:12.5px;letter-spacing:.24em;animation:fadeUp 1s .5s both;}
.splash-bar{position:absolute;bottom:92px;left:50%;transform:translateX(-50%);width:148px;height:3px;border-radius:3px;background:rgba(255,255,255,.10);overflow:hidden;}
.splash-bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#1ABE80,#3FF0AE);animation:load 2.55s cubic-bezier(.5,.05,.3,1) .1s forwards;}
.splash-tip{position:absolute;bottom:66px;left:0;right:0;text-align:center;color:#4E5359;font-size:11px;letter-spacing:.1em;}
@keyframes load{to{width:100%;}}
@keyframes logoIn{from{opacity:0;transform:scale(1.05) translateY(8px);}to{opacity:1;transform:scale(1.32) translateY(0);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.ob{flex:1;display:flex;flex-direction:column;padding:60px 26px 26px;background:#0A0B0C;}
.ob .ob-skip{align-self:flex-end;font-size:13px;color:var(--muted);cursor:pointer;padding:4px 2px;}
.ob .ob-art{flex:1;display:flex;align-items:center;justify-content:center;}
.ob .ob-t{font-size:24px;font-weight:700;color:#fff;text-align:center;letter-spacing:.4px;line-height:1.35;}
.ob .ob-d{font-size:13.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.7;}
.ob .ob-dots{display:flex;justify-content:center;gap:7px;margin:26px 0 20px;}
.ob .ob-dots i{width:6px;height:6px;border-radius:50%;background:#3A3E43;transition:all .25s;}
.ob .ob-dots i.on{width:20px;border-radius:4px;background:var(--green);}
.ob .btn-primary{margin-top:2px;}
.ob-flag{display:inline-flex;align-items:center;gap:7px;background:#191B1E;border:1px solid rgba(255,255,255,.08);
  padding:7px 12px;border-radius:999px;font-size:12.5px;color:#E4E7EC;font-weight:600;}
.ob-flag svg{width:20px;height:14px;border-radius:2px;}

/* ================= Forms (login / register) ================= */
.auth{padding:64px 28px 26px;overflow-y:auto;}
.auth::-webkit-scrollbar{width:0;}
.auth-head{text-align:center;margin-bottom:26px;}
.auth-title{margin-top:22px;font-size:23px;font-weight:700;color:#fff;letter-spacing:.4px;}
.auth-desc{margin-top:7px;font-size:13px;color:var(--muted);}
.tabs-underline{display:flex;gap:26px;justify-content:center;margin-top:24px;border-bottom:1px solid var(--line);}
.tabs-underline button{
  border:0;background:transparent;color:#7C8189;font-family:var(--font);font-size:15px;font-weight:600;
  padding:0 2px 12px;cursor:pointer;position:relative;
}
.tabs-underline button.on{color:#fff;}
.tabs-underline button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;border-radius:2px;background:var(--green);}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13.5px;font-weight:600;color:#E4E6EA;margin-bottom:8px;letter-spacing:.2px;}
.input-wrap{position:relative;display:flex;align-items:center;background:var(--input);border:1px solid rgba(255,255,255,.05);border-radius:14px;height:54px;transition:border-color .2s,box-shadow .2s;}
.input-wrap:focus-within{border-color:rgba(34,206,139,.55);box-shadow:0 0 0 3px rgba(34,206,139,.10);}
.input-wrap input,.input-wrap select{flex:1;height:100%;background:transparent;border:0;outline:0;color:#fff;font-size:15px;padding:0 16px;font-family:var(--font);}
.input-wrap select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:30px;}
.input-wrap select option{background:#22252A;color:#fff;}
.input-wrap input::placeholder{color:#71757C;}
.input-wrap .prefix{padding-left:16px;display:flex;align-items:center;color:#6E7278;}
.input-wrap .suffix{padding-right:14px;display:flex;align-items:center;color:#7C8189;cursor:pointer;gap:8px;}
.input-wrap .caret{position:absolute;right:16px;color:#6E7278;pointer-events:none;display:flex;}
.code-btn{
  height:34px;padding:0 12px;border-radius:9px;border:1px solid rgba(34,206,139,.5);background:rgba(34,206,139,.12);
  color:#3BE0A2;font-size:12.5px;font-weight:600;font-family:var(--font);cursor:pointer;white-space:nowrap;
}
.code-btn[disabled]{opacity:.5;border-color:var(--line);background:transparent;color:#7C8189;}
.row-between{display:flex;align-items:center;justify-content:space-between;margin:2px 0 18px;}
.link{color:#E9EBEE;font-size:13.5px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px;cursor:pointer;}
.link.green{color:var(--green);border-bottom-color:rgba(34,206,139,.5);}
.agree{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px;cursor:pointer;}
.checkbox{
  flex:0 0 auto;width:19px;height:19px;border-radius:5px;margin-top:1px;
  background:linear-gradient(145deg,#2BDD96,#14B87C);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(34,206,139,.32);transition:background .18s;
}
.checkbox.off{background:#2A2C30;box-shadow:none;}
.checkbox svg{transition:opacity .18s;}
.checkbox.off svg{opacity:0;}
.agree p{margin:0;font-size:12.5px;line-height:1.6;color:#A9ADB4;}
.agree p a{color:var(--green);text-decoration:underline;text-underline-offset:2px;}
.btn-primary{
  width:100%;height:54px;border:0;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,#2BDD96,#18C183);color:#06251A;font-size:16.5px;font-weight:700;
  letter-spacing:2px;font-family:var(--font);box-shadow:0 10px 24px -8px rgba(34,206,139,.55);
  transition:transform .12s,filter .2s,opacity .2s;
}
.btn-primary:active{transform:scale(.985);filter:brightness(.97);}
.btn-primary[disabled]{opacity:.55;box-shadow:none;cursor:not-allowed;}
.btn-line{
  width:100%;height:50px;border:1px solid var(--line-2);border-radius:14px;cursor:pointer;background:transparent;
  color:#fff;font-size:15px;font-weight:600;font-family:var(--font);transition:background .2s;
}
.btn-line:hover{background:rgba(255,255,255,.06);}
.or-line{display:flex;align-items:center;gap:14px;margin:24px 0 18px;color:var(--muted-2);font-size:12.5px;letter-spacing:.4px;}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line);}
.socials{display:flex;justify-content:center;gap:20px;}
.social{width:52px;height:52px;border-radius:50%;background:#1B1D20;border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .12s;}
.social:hover{background:#24272B;}
.social:active{transform:scale(.94);}
.auth-foot{margin-top:22px;text-align:center;font-size:12.5px;color:var(--muted);}
.auth-foot a{color:var(--green);text-decoration:none;font-weight:600;cursor:pointer;}
.picker-row{display:flex;gap:12px;}
.picker-row>*{flex:1;min-width:0;}
.hintline{font-size:11.5px;color:var(--muted-2);margin-top:-8px;margin-bottom:16px;line-height:1.6;}

/* ================= Home ================= */
.home-top{padding:58px 16px 10px;display:flex;align-items:center;gap:8px;justify-content:space-between;background:var(--bg);}
.segment{display:flex;background:#191B1E;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:4px;gap:2px;flex:0 1 auto;}
.segment button{border:0;background:transparent;color:#90969E;font-family:var(--font);font-size:12px;font-weight:600;padding:7px 10px;border-radius:9px;cursor:pointer;transition:all .22s;white-space:nowrap;letter-spacing:.2px;}
.segment button.on{background:linear-gradient(180deg,#2BDD96,#18C183);color:#06251A;box-shadow:0 4px 12px -4px rgba(34,206,139,.6);}
.top-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto;}
.act{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px;border-radius:10px;background:#191B1E;border:1px solid rgba(255,255,255,.07);color:#E6E8EC;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);white-space:nowrap;transition:all .18s;}
.act:hover{border-color:rgba(34,206,139,.4);color:#fff;}
.act:active{transform:scale(.96);}
.act.primary{background:linear-gradient(180deg,rgba(43,221,150,.16),rgba(24,193,131,.10));border-color:rgba(34,206,139,.42);color:#3BE0A2;}
.act .ic{display:flex;}
.plus-fab{width:38px;height:38px;border-radius:50%;border:1px solid rgba(34,206,139,.45);flex:0 0 auto;
  background:linear-gradient(180deg,rgba(43,221,150,.20),rgba(24,193,131,.10));color:#3BE0A2;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;
  box-shadow:0 4px 14px -6px rgba(34,206,139,.55);}
.plus-fab:hover{border-color:rgba(34,206,139,.75);color:#fff;}
.plus-fab:active{transform:scale(.92);}
.plus-fab.amber{border-color:rgba(245,166,35,.5);color:#F5A623;
  background:linear-gradient(180deg,rgba(245,166,35,.20),rgba(245,166,35,.08));
  box-shadow:0 4px 14px -6px rgba(245,166,35,.5);}
.plus-fab.amber:hover{border-color:rgba(245,166,35,.8);color:#fff;}
.greeting{margin:4px 0 13px;padding:0 16px;}
.greeting h2{margin:0;font-size:20px;font-weight:700;color:#fff;letter-spacing:.3px;}
.greeting p{margin:5px 0 0;font-size:12.5px;color:var(--muted);}
.pad{padding-left:16px;padding-right:16px;}

/* station switcher */
.stn-bar{display:flex;align-items:center;gap:10px;padding:0 16px 12px;}
.stn-pill{
  display:inline-flex;align-items:center;gap:8px;background:#191B1E;border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:9px 12px;font-size:13.5px;font-weight:600;color:#fff;cursor:pointer;max-width:230px;
}
.stn-pill .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stn-pill .ic{color:var(--green-2);display:flex;flex:0 0 auto;}
.stn-pill .caret{color:#6E7278;display:flex;flex:0 0 auto;}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(34,206,139,.18);flex:0 0 auto;}
.dot-off{width:7px;height:7px;border-radius:50%;background:#4B4F55;flex:0 0 auto;}

/* energy flow */
.flowcard{margin:0 16px 16px;border-radius:var(--r-lg);background:linear-gradient(180deg,#151719,#101113);border:1px solid rgba(255,255,255,.07);padding:16px 14px 12px;position:relative;overflow:hidden;}
.flowcard::before{content:"";position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(34,206,139,.14),transparent 70%);pointer-events:none;}
/* 场景内四个可点击入口 */
.flowcard .hot{cursor:pointer;}
.flowcard .hot-hit{fill:transparent;stroke:transparent;stroke-width:1;transition:fill .18s,stroke .18s;}
.flowcard .hot:hover .hot-hit{fill:rgba(34,206,139,.08);stroke:rgba(34,206,139,.38);}
.flowcard .hot:active .hot-hit{fill:rgba(34,206,139,.14);}
.flowcard .hot:hover text{filter:brightness(1.25);}
.flow-hint{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;font-size:10.5px;color:#7C8189;margin-top:2px;}
.flow-hint b{color:#3BE0A2;font-weight:600;}
.flow-hint .ar{color:#5F6369;}
.flow-grid{display:grid;grid-template-columns:1fr 92px 1fr;grid-template-rows:auto auto auto;align-items:center;gap:8px 4px;position:relative;z-index:2;}
.fnode{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;}
.fnode .fi{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.08);background:#1B1D20;}
.fnode .fv{font-size:15px;font-weight:700;color:#fff;letter-spacing:.2px;}
.fnode .fk{font-size:10.5px;color:var(--muted);}
.fnode.pv .fi{color:var(--amber);background:rgba(245,166,35,.12);border-color:rgba(245,166,35,.28);}
.fnode.bat .fi{color:var(--green-2);background:rgba(34,206,139,.12);border-color:rgba(34,206,139,.28);}
.fnode.load .fi{color:var(--cyan);background:rgba(76,201,240,.12);border-color:rgba(76,201,240,.26);}
.fnode.gridp .fi{color:#B9C0C8;background:rgba(255,255,255,.06);}
.fnode.hub .fi{width:76px;height:76px;border-radius:22px;background:radial-gradient(circle at 40% 30%,#1F2226,#121416);border-color:rgba(34,206,139,.28);color:var(--green-2);}
.farrow{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--green-2);}
.farrow .v{font-size:10.5px;color:#B9BEC5;font-weight:600;}
.farrow.rev{color:var(--cyan);}
.flow-meta{display:flex;align-items:center;justify-content:space-between;margin-top:14px;position:relative;z-index:2;}
.flow-meta .soc{display:flex;align-items:center;gap:10px;}
.ring{position:relative;width:58px;height:58px;flex:0 0 auto;}
.ring svg{transform:rotate(-90deg);}
.ring .rc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:700;color:#fff;}
.flow-meta .pr{text-align:right;font-size:11.5px;color:var(--muted);line-height:1.6;}
.flow-meta .pr b{display:block;font-size:15px;color:var(--green-2);font-weight:700;}

/* generic stats */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 16px;}
.stat-grid.c3{grid-template-columns:repeat(3,1fr);gap:10px;}
.stat{background:#151719;border:1px solid rgba(255,255,255,.07);border-radius:var(--r-md);padding:13px 14px;}
.stat .sv{font-size:19px;font-weight:700;color:#fff;letter-spacing:.2px;}
.stat .sv small{font-size:11px;color:var(--muted);font-weight:600;margin-left:2px;}
.stat .sk{font-size:11.5px;color:var(--muted);margin-top:5px;}
.stat .sd{font-size:11px;margin-top:6px;color:var(--green-2);}
.stat.hl{background:linear-gradient(150deg,rgba(34,206,139,.14),rgba(34,206,139,.03));border-color:rgba(34,206,139,.28);}

.sec-head{display:flex;align-items:center;justify-content:space-between;margin:20px 16px 11px;}
.sec-head h3{margin:0;font-size:15px;font-weight:700;color:#fff;letter-spacing:.2px;}
.sec-head .cnt{font-size:12px;color:var(--muted);}
.sec-head .more{font-size:12.5px;color:var(--green);cursor:pointer;font-weight:600;}

/* device card */
.dev{display:flex;align-items:center;gap:13px;margin:0 16px 12px;padding:13px 15px;border-radius:var(--r-md);background:linear-gradient(180deg,#17181B,#141517);border:1px solid rgba(255,255,255,.07);cursor:pointer;transition:border-color .2s,transform .12s;}
.dev:hover{border-color:rgba(255,255,255,.16);}
.dev:active{transform:scale(.99);}
.dev .thumb{flex:0 0 auto;width:74px;height:52px;border-radius:10px;background:#0E0F10;border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.dev .meta{flex:1;min-width:0;}
.dev .meta .nm{font-size:15.5px;font-weight:700;color:#fff;letter-spacing:.3px;}
.dev .meta .sub{font-size:12px;color:var(--muted);margin-top:4px;}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;}
.status.on{color:#2BDE97;}
.status.off{color:#7E838A;}
.pulse{animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.45;}}

/* banner */
.banner{position:relative;margin:0 16px 16px;border-radius:var(--r-lg);overflow:hidden;height:158px;background:#101113;border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
.banner .wave{position:absolute;inset:0;width:100%;height:100%;}
.banner .veil{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 55%,rgba(10,11,12,.72) 22%,rgba(10,11,12,.28) 60%,rgba(10,11,12,.55) 100%);}
.banner .c-inner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:14px;}
.banner .cap{font-size:13.5px;letter-spacing:.16em;color:#E9EBEF;font-weight:600;}
.b-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:13px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);backdrop-filter:blur(6px);transition:background .2s;}
.b-btn:hover{background:rgba(255,255,255,.17);}

/* ================= Generic content blocks ================= */
.card{margin:0 16px 14px;background:#151719;border:1px solid rgba(255,255,255,.07);border-radius:var(--r-md);overflow:hidden;}
.card .c-h{padding:13px 15px 11px;font-size:13px;font-weight:700;color:#fff;letter-spacing:.3px;display:flex;align-items:center;gap:7px;}
.card .c-h .ic{color:var(--green-2);display:flex;}
.card .c-b{padding:0 15px 15px;}
.list{background:#151719;border:1px solid rgba(255,255,255,.07);border-radius:var(--r-md);overflow:hidden;margin:0 16px 14px;}
.row{display:flex;align-items:center;gap:12px;padding:14px 15px;cursor:pointer;border-bottom:1px solid var(--line);transition:background .18s;}
.row:last-child{border-bottom:0;}
.row:hover{background:#191B1E;}
.row .ric{width:32px;height:32px;border-radius:9px;background:rgba(34,206,139,.12);color:#2BDE97;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.row .ric.grey{background:rgba(255,255,255,.06);color:#AEB3BA;}
.row .ric.amber{background:rgba(245,166,35,.14);color:var(--amber);}
.row .ric.red{background:rgba(255,90,95,.14);color:var(--red);}
.row .rt{flex:1;min-width:0;font-size:14.5px;color:#E9EBEF;font-weight:500;}
.row .rt small{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.5;}
.row .rv{font-size:12.5px;color:var(--muted);text-align:right;max-width:130px;}
.row .rv.warn{color:var(--amber);}
.row .rv.red{color:var(--red);}
.row .chev{color:#565A60;display:flex;flex:0 0 auto;}
.row.static{cursor:default;}
.row.static:hover{background:transparent;}
.sw{position:relative;width:46px;height:27px;border-radius:14px;background:#33363B;flex:0 0 auto;transition:background .22s;cursor:pointer;}
.sw.on{background:linear-gradient(145deg,#2BDD96,#14B87C);}
.sw i{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform .22s;box-shadow:0 2px 5px rgba(0,0,0,.35);}
.sw.on i{transform:translateX(19px);}
.sw.locked{opacity:.55;cursor:not-allowed;}

.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:13px;border-bottom:1px dashed rgba(255,255,255,.07);}
.kv:last-child{border-bottom:0;}
.kv .k{color:var(--muted);flex:0 0 auto;}
.kv .v{color:#E9EBEF;text-align:right;font-weight:500;}
.kv .v.g{color:var(--green-2);}
.kv .v.a{color:var(--amber);}
.kv .v.r{color:var(--red);}

.note{margin:0 16px 14px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-left:2.5px solid var(--green);border-radius:11px;padding:12px 14px;font-size:12.5px;color:#A9ADB4;line-height:1.7;}
.note.warn{border-left-color:var(--amber);}
.note.red{border-left-color:var(--red);}
.note b{color:#fff;}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 14px;}
.chip{display:inline-flex;align-items:center;gap:6px;background:#191B1E;border:1px solid rgba(255,255,255,.08);color:#D6DAE0;font-size:12.5px;padding:7px 12px;border-radius:999px;cursor:pointer;transition:all .18s;font-weight:500;}
.chip.on{background:rgba(34,206,139,.14);border-color:rgba(34,206,139,.45);color:#3BE0A2;font-weight:600;}
.chip .cd{width:6px;height:6px;border-radius:50%;background:var(--green);}
.pill-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 9px;border-radius:6px;letter-spacing:.3px;}
.pill-tag.g{background:rgba(34,206,139,.14);color:#3BE0A2;}
.pill-tag.a{background:rgba(245,166,35,.14);color:var(--amber);}
.pill-tag.r{background:rgba(255,90,95,.14);color:#FF7A7E;}
.pill-tag.n{background:rgba(255,255,255,.07);color:#AEB3BA;}

.btn-block{margin:6px 16px 4px;height:50px;width:calc(100% - 32px);border-radius:14px;border:0;cursor:pointer;font-family:var(--font);font-size:15.5px;font-weight:700;letter-spacing:1px;}
.btn-block.green{background:linear-gradient(180deg,#2BDD96,#18C183);color:#06251A;box-shadow:0 10px 24px -10px rgba(34,206,139,.5);}
.btn-block.line{border:1px solid var(--line-2);background:transparent;color:#fff;font-weight:600;letter-spacing:0;}
.btn-block.line:hover{background:rgba(255,255,255,.05);}
.btn-block.red{background:transparent;border:1px solid rgba(255,90,95,.32);color:#FF6B70;font-weight:600;letter-spacing:0;}
.btn-block.red:hover{background:rgba(255,90,95,.08);}
.btn-block[disabled]{opacity:.5;cursor:not-allowed;}
.footnote{text-align:center;color:#3F4348;font-size:11px;margin:14px 0 8px;letter-spacing:.3px;}

.segfull{display:flex;margin:0 16px 14px;background:#151719;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:4px;gap:2px;}
.segfull button{flex:1;border:0;background:transparent;color:#90969E;font-family:var(--font);font-size:13px;font-weight:600;padding:9px 4px;border-radius:9px;cursor:pointer;transition:all .2s;white-space:nowrap;}
.segfull button.on{background:#25282C;color:#fff;}

/* charts */
.chartbox{margin:0 16px 14px;background:#151719;border:1px solid rgba(255,255,255,.07);border-radius:var(--r-md);padding:14px 12px 10px;}
.chartbox .ch-t{font-size:13px;font-weight:700;color:#fff;margin-bottom:2px;display:flex;align-items:center;gap:7px;}
.chartbox .ch-s{font-size:11.5px;color:var(--muted);margin-bottom:10px;}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;}
.legend span{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;}
.axis-l{font-size:9.5px;fill:#6B7078;}

/* steps */
.steps{display:flex;flex-direction:column;gap:0;margin:0 16px 14px;}
.step{display:flex;gap:12px;}
.step .s-l{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;width:26px;}
.step .s-d{width:26px;height:26px;border-radius:50%;background:#25282C;color:#AEB3BA;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.step.done .s-d{background:linear-gradient(145deg,#2BDD96,#14B87C);color:#06251A;}
.step.cur .s-d{background:rgba(34,206,139,.2);border:1.5px solid var(--green);color:#3BE0A2;}
.step .s-line{width:1.5px;flex:1;background:#2A2D31;margin:4px 0;min-height:16px;}
.step:last-child .s-line{display:none;}
.step .s-c{padding-bottom:16px;flex:1;min-width:0;}
.step .s-t{font-size:14px;font-weight:600;color:#fff;padding-top:3px;}
.step .s-d2{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.6;}

/* progress */
.prog{height:6px;border-radius:6px;background:#2A2D31;overflow:hidden;margin:6px 0 4px;}
.prog i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#1ABE80,#3FF0AE);}

/* chat (AI 管家) */
.chat-wrap{flex:1;display:flex;flex-direction:column;min-height:0;}
.chat-head{flex:0 0 auto;padding:52px 16px 8px;}
.chat-head .ch-t{font-size:19px;font-weight:700;color:#fff;letter-spacing:.3px;}
.chat-head .ch-s{font-size:11.5px;color:#8B8E95;margin-top:3px;}
.screen.has-tab .chat-input{padding-bottom:104px;}
.chat-body{flex:1;overflow-y:auto;padding:8px 16px 12px;}
.chat-body::-webkit-scrollbar{width:0;}
.bub-row{display:flex;gap:9px;margin-bottom:14px;align-items:flex-start;}
.bub-row.me{flex-direction:row-reverse;}
.bub-av{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:rgba(34,206,139,.14);color:#3BE0A2;}
.bub-av.me{background:#25282C;color:#fff;}
.bub{max-width:262px;background:#1A1C1F;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:11px 13px;font-size:13.5px;color:#E6E9ED;line-height:1.65;}
.bub-row.me .bub{background:linear-gradient(160deg,#1F4640,#17332E);border-color:rgba(34,206,139,.28);}
.bub .b-t{font-weight:700;color:#fff;margin-bottom:5px;font-size:13px;}
.bub .b-src{margin-top:9px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.12);font-size:11px;color:var(--muted);line-height:1.6;}
.bub .b-src b{color:#AEB3BA;font-weight:600;}
.bub .b-act{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
.bub .b-act span{font-size:11.5px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);color:#D6DAE0;padding:5px 10px;border-radius:8px;cursor:pointer;}
.bub .b-act span:hover{background:rgba(34,206,139,.14);border-color:rgba(34,206,139,.35);color:#3BE0A2;}
.bub .cardmini{margin-top:9px;background:#121416;border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:10px 11px;}
.bub .cardmini .cm-t{font-size:11px;color:var(--muted);margin-bottom:6px;}
.bub .cardmini .cm-row{display:flex;justify-content:space-between;font-size:12.5px;color:#E6E9ED;padding:3px 0;}
.bub .cardmini .cm-row b{color:var(--green-2);}
.typing{display:flex;gap:4px;padding:4px 2px;}
.typing i{width:6px;height:6px;border-radius:50%;background:#5B6067;animation:tp 1.1s infinite;}
.typing i:nth-child(2){animation-delay:.18s;}
.typing i:nth-child(3){animation-delay:.36s;}
@keyframes tp{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
.chat-input{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:10px 14px 26px;border-top:1px solid rgba(255,255,255,.07);background:#0D0E10;}
.chat-input .ci{flex:1;height:42px;border-radius:13px;background:#1E2023;border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;padding:0 13px;color:#8B8E95;font-size:13.5px;}
.chat-input .cs{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#2BDD96,#14B87C);color:#06251A;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;}
.sugbar{display:flex;gap:8px;overflow-x:auto;padding:0 16px 10px;}
.sugbar::-webkit-scrollbar{height:0;}
.sug{flex:0 0 auto;background:#191B1E;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 12px;font-size:12.5px;color:#D6DAE0;cursor:pointer;white-space:nowrap;}
.sug:hover{border-color:rgba(34,206,139,.4);color:#3BE0A2;}

/* fab */
/* AI 家庭能源管家 · 悬浮入口 */
.fab{
  position:absolute;right:16px;bottom:106px;z-index:45;
  display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 15px 0 12px;border-radius:23px;
  background:linear-gradient(135deg,#8B7BF7 0%,#2BDD96 100%);
  color:#06251A;font-size:13px;font-weight:800;letter-spacing:.4px;cursor:pointer;
  box-shadow:0 12px 26px -10px rgba(124,108,246,.7),0 0 0 1px rgba(255,255,255,.16) inset;
  animation:fabPulse 2.8s ease-in-out infinite;transition:transform .15s;
}
.fab .ic{display:flex;color:#06251A;}
.fab:active{transform:scale(.95);}
.fab-ring{position:absolute;inset:0;border-radius:inherit;border:1.5px solid rgba(43,221,150,.75);
  animation:fabRing 2.8s ease-out infinite;pointer-events:none;}
@keyframes fabRing{0%{transform:scale(1);opacity:.75;}70%,100%{transform:scale(1.5);opacity:0;}}
@keyframes fabPulse{
  0%,100%{box-shadow:0 12px 26px -10px rgba(124,108,246,.65),0 0 0 1px rgba(255,255,255,.16) inset;}
  50%{box-shadow:0 14px 32px -8px rgba(43,221,150,.85),0 0 0 1px rgba(255,255,255,.26) inset;}
}
/* 有底部 Tab 的页面，内容需为悬浮入口与 Tab 栏留出空间 */
.screen.has-tab .content{padding-bottom:116px;}

/* tabbar */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:92px;z-index:40;
  background:linear-gradient(180deg,rgba(10,11,12,.72) 0%,rgba(10,11,12,.97) 42%,#0A0B0C 100%);
  backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:flex-start;padding-top:12px;}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;color:#6E737A;transition:color .2s;padding-top:4px;}
.tab .ic{display:flex;transition:transform .2s;}
.tab span{font-size:11px;font-weight:600;letter-spacing:.3px;}
.tab.on .ic{color:var(--green-2);transform:translateY(-1px);}
.tab.on span{color:#fff;}
.tab-ai .ic{width:40px;height:26px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(139,123,247,.22),rgba(43,221,150,.22));color:#A99BFA;transition:all .2s;}
.tab-ai.on .ic{background:linear-gradient(135deg,#8B7BF7,#2BDD96);color:#06251A;transform:translateY(-1px);
  box-shadow:0 6px 14px -6px rgba(139,123,247,.65);}
.tab-ai.on span{background:linear-gradient(90deg,#A99BFA,#2BDD96);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* empty */
.empty{margin:0 16px 14px;text-align:center;padding:36px 20px;color:var(--muted-2);font-size:13px;border:1px dashed rgba(255,255,255,.10);border-radius:var(--r-md);}

/* sheet / toast / scrim */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:80;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;backdrop-filter:blur(2px);}
.scrim.show{opacity:1;visibility:visible;}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:90;background:#161719;border-radius:26px 26px 0 0;padding:10px 22px 34px;transform:translateY(105%);transition:transform .38s cubic-bezier(.22,.8,.28,1);border-top:1px solid rgba(255,255,255,.09);box-shadow:0 -20px 50px -20px rgba(0,0,0,.8);max-height:78%;overflow-y:auto;}
.sheet::-webkit-scrollbar{width:0;}
.sheet.show{transform:none;}
.sheet .grab{width:40px;height:4.5px;border-radius:4px;background:#3A3D42;margin:0 auto 16px;}
.sheet h3{margin:0 0 6px;font-size:18px;color:#fff;font-weight:700;letter-spacing:.3px;}
.sheet p.d{margin:0 0 18px;font-size:13px;color:var(--muted);line-height:1.55;}
.opt{display:flex;align-items:center;gap:13px;padding:13px;border-radius:14px;background:#1D1F22;border:1px solid rgba(255,255,255,.06);margin-bottom:10px;cursor:pointer;transition:border-color .2s,background .2s;}
.opt:hover{border-color:rgba(34,206,139,.4);background:#212428;}
.opt.on{border-color:var(--green);background:rgba(34,206,139,.08);}
.opt .oic{width:40px;height:40px;border-radius:12px;background:rgba(34,206,139,.13);color:#2BDE97;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.opt .ot{flex:1;min-width:0;}
.opt .ot .t{font-size:14.5px;color:#fff;font-weight:600;}
.opt .ot .s{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.5;}
.opt .ock{color:var(--green-2);display:flex;flex:0 0 auto;}
.sheet .cancel{width:100%;height:48px;margin-top:6px;border-radius:13px;background:#22252A;border:0;color:#B9BDC4;font-size:15px;font-weight:600;font-family:var(--font);cursor:pointer;}
.toast{position:absolute;left:50%;bottom:120px;transform:translate(-50%,14px);z-index:100;background:rgba(28,30,34,.96);border:1px solid rgba(255,255,255,.10);color:#fff;font-size:13px;padding:11px 18px;border-radius:12px;opacity:0;transition:all .3s;pointer-events:none;backdrop-filter:blur(8px);max-width:300px;text-align:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.7);}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ---------- 补齐：能流动效 / 表单撑满 / 个人中心 ---------- */
.flowline{stroke-dasharray:5 4;animation:flowdash 1.5s linear infinite;}
@keyframes flowdash{to{stroke-dashoffset:-18;}}
.auth{flex:1;}
.home-top{flex:0 0 auto;}
.sug.on{background:rgba(34,206,139,.14);border-color:rgba(34,206,139,.45);color:#3BE0A2;font-weight:600;}
.opt .ock{flex:0 0 auto;display:flex;}
.profile{
  margin:16px 16px 18px;padding:18px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,#191C1F 0%,#141517 60%);
  border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:15px;
}
.avatar{
  width:58px;height:58px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(145deg,#2BDD96,#0E9E6C);
  display:flex;align-items:center;justify-content:center;color:#06251A;font-weight:800;font-size:22px;
  box-shadow:0 8px 20px -8px rgba(34,206,139,.6);
}
.profile .pmeta{flex:1;min-width:0;}
.profile .pmeta .pn{font-size:17px;font-weight:700;color:#fff;}
.profile .pmeta .pe{font-size:12.5px;color:var(--muted);margin-top:4px;}
.profile .vip{
  font-size:11px;font-weight:700;color:#3BE0A2;background:rgba(34,206,139,.14);
  border:1px solid rgba(34,206,139,.35);padding:4px 10px;border-radius:999px;letter-spacing:.4px;flex:0 0 auto;
}
.mine-top{flex:0 0 auto;}
.ring{display:flex;align-items:center;justify-content:center;}

/* responsive */
@media (max-width:1080px){
  .reqmap{flex-basis:250px;}
}
@media (max-width:900px){
  body{overflow:auto;}
  .topbar .tb-right .pill{display:none;}
  .reqmap{display:none;}
  .layout{display:block;}
  .stage{padding:0;}
  .device{width:100vw;height:100vh;border-radius:0;padding:0;box-shadow:none;}
  .phone{border-radius:0;}
  .island{display:none;}
  .statusbar{padding-top:12px;}
  .home-indicator{bottom:7px;}
  .stage-foot{display:none;}
}

/* ---------- 电价设置 / 工作模式 / 数据总览 新增组件 ---------- */
.warnbar{display:flex;align-items:center;gap:10px;margin:12px 16px 0;padding:12px 14px;border-radius:var(--r-md);
  background:linear-gradient(90deg,rgba(245,166,35,.14),rgba(245,166,35,.05));border:1px solid rgba(245,166,35,.35);
  color:#F5C069;font-size:13px;font-weight:600;cursor:pointer;}
.warnbar .chev{margin-left:auto;display:flex;}
.modecard{position:relative;display:flex;gap:13px;padding:15px 15px;border-radius:var(--r-md);cursor:pointer;
  background:#151719;border:1px solid rgba(255,255,255,.07);transition:border-color .2s;}
.modecard+.modecard{margin-top:12px;}
.modecard.on{border-color:rgba(34,206,139,.55);background:linear-gradient(180deg,rgba(34,206,139,.07),rgba(21,23,25,.6));}
.modecard .mic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(34,206,139,.12);color:#2BDE97;}
.modecard .mt{font-size:15px;font-weight:700;color:#fff;}
.modecard .ms{font-size:11.5px;color:#8B8E95;line-height:1.55;margin-top:4px;}
.radio{flex:0 0 auto;width:19px;height:19px;border-radius:50%;border:2px solid #4B4F55;margin-left:auto;align-self:center;position:relative;}
.modecard.on .radio{border-color:#2BDE97;}
.modecard.on .radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#2BDE97;}
.tou-row{display:flex;align-items:center;padding:11px 2px;font-size:13px;color:#C9CDD3;}
.tou-row+.tou-row{border-top:1px solid rgba(255,255,255,.05);}
.tou-row b{color:#fff;font-weight:600;}
.tou-row .tp{margin-left:auto;font-weight:700;}
.tg{flex:0 0 auto;width:44px;height:25px;border-radius:13px;background:#2A2E33;position:relative;cursor:pointer;transition:background .2s;border:1px solid rgba(255,255,255,.06);}
.tg::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#8B8E95;transition:all .2s;}
.tg.on{background:rgba(34,206,139,.85);}
.tg.on::after{left:21px;background:#fff;}
.pager{display:flex;align-items:center;justify-content:center;gap:18px;padding:10px 0 2px;}
.pager .pg-b{width:32px;height:32px;border-radius:10px;background:#1B1E21;border:1px solid rgba(255,255,255,.07);
  color:#C9CDD3;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;}
.pager .pg-b:active{transform:scale(.93);}
.pager .pg-lb{font-size:17px;font-weight:700;color:#fff;letter-spacing:.5px;min-width:130px;text-align:center;}
.chip-sel{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9px;background:#1B1E21;
  border:1px solid rgba(255,255,255,.08);color:#E6E8EC;font-size:12px;font-weight:600;cursor:pointer;}
.chip-sel i{width:8px;height:8px;border-radius:50%;background:#28D190;}
.xlab{display:flex;justify-content:space-between;padding:4px 4px 0;font-size:10px;color:#5F6369;}
.flowrow{display:flex;align-items:center;gap:10px;padding:11px 2px;font-size:13.5px;color:#C9CDD3;}
.flowrow+.flowrow{border-top:1px solid rgba(255,255,255,.05);}
.flowrow i{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
.flowrow .fv{margin-left:auto;font-weight:700;color:#fff;}
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:0 16px;}
.eco{border-radius:var(--r-md);padding:14px 12px;color:#fff;position:relative;overflow:hidden;}
.eco .ev{font-size:19px;font-weight:800;letter-spacing:.2px;}
.eco .ek{font-size:11px;margin-top:5px;opacity:.92;}
.eco svg.wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:34%;opacity:.5;}
.hero-earn{display:flex;align-items:center;gap:13px;}
.hero-earn .hic{width:44px;height:44px;border-radius:13px;background:linear-gradient(145deg,#8B7BF7,#6C5CE7);
  display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto;}