:root{
  --bg:#f4f7fb; --card:#ffffff; --ink:#152238; --muted:#6b7a90; --line:#e7edf5;
  --sun:#ff9f1c; --sun2:#ffcf3f; --pv:#f59e0b; --bat:#16a34a; --grid:#2563eb; --load:#db2777; --inv:#0ea5a4;
  --ok:#16a34a; --off:#94a3b8; --bad:#ef4444; --warn:#f59e0b;
  --r:20px; --shadow:0 6px 22px rgba(21,34,56,.07),0 1px 3px rgba(21,34,56,.05);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;font-size:15px}
body{min-height:100vh;background:
  radial-gradient(120% 60% at 100% 0%,#fff3c4 0%,rgba(255,243,196,0) 55%),
  radial-gradient(90% 50% at 0% 0%,#dff3ff 0%,rgba(223,243,255,0) 60%), var(--bg) ; background-repeat:no-repeat}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.top{position:sticky;top:0;z-index:5;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(231,237,245,.8)}
.top-row{display:flex;align-items:center;gap:10px;max-width:760px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.brand h1{margin:0;font-size:18px;font-weight:800;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand p{margin:1px 0 0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand>div:last-child{min-width:0}
.logo{width:38px;height:38px;border-radius:12px;flex:none;background:
  radial-gradient(circle at 50% 50%,#fff7d1 0 22%,var(--sun2) 23% 38%,var(--sun) 39% 100%);box-shadow:0 4px 12px rgba(255,159,28,.4)}
.back{width:38px;height:38px;border-radius:12px;background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;flex:none}
.refresh{position:relative;width:40px;height:40px;flex:none;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--muted)}
.ring{position:absolute;inset:0;width:40px;height:40px;transform:rotate(-90deg)}
.ring-bg{fill:#fff;stroke:var(--line);stroke-width:3}
.ring-fg{fill:none;stroke:var(--sun);stroke-width:3;stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}
.refresh span{position:relative}
.refresh.busy .ring{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(270deg)}}
main{max-width:760px;margin:0 auto;padding:14px 16px 24px}
.foot{text-align:center;color:var(--muted);font-size:12px;margin:0 0 calc(env(safe-area-inset-bottom) + 18px)}

.loading{display:grid;place-items:center;gap:12px;padding:80px 0;color:var(--muted)}
.sun-spin{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle,var(--sun2) 0 45%,transparent 46%);
  box-shadow:0 0 0 8px rgba(255,207,63,.25),0 0 0 16px rgba(255,207,63,.12);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.88)}}

/* Hero */
.hero{border-radius:24px;padding:18px;color:#3b2500;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#ffd55a 0%,#ffb340 55%,#ff9a3c 100%);box-shadow:0 12px 30px rgba(255,159,28,.33)}
.hero:after{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}
.hero .lbl{font-size:13px;font-weight:600;opacity:.85}
.hero .big{font-size:38px;font-weight:800;letter-spacing:-1px;line-height:1.1;margin:4px 0 12px}
.hero .big small{font-size:18px;font-weight:700;margin-left:4px}
.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative;z-index:1}
.hero-grid div{background:rgba(255,255,255,.42);border-radius:14px;padding:9px 10px}
.hero-grid b{display:block;font-size:16px;font-weight:800}
.hero-grid span{font-size:11.5px;font-weight:600;opacity:.8}

.chips{display:flex;gap:8px;overflow-x:auto;padding:14px 0 4px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:8px 14px;border-radius:999px;background:#fff;box-shadow:var(--shadow);font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.chip.on{background:var(--ink);color:#fff}
.chip .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
.search{width:100%;margin-top:10px;padding:12px 14px 12px 40px;border-radius:14px;border:1px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236b7a90' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M13 13l4 4'/%3E%3C/svg%3E") no-repeat 14px 50%;font:inherit;font-size:16px;color:var(--ink);outline:none}
.search:focus{border-color:var(--sun)}

.srv-warn{margin-top:12px;padding:10px 12px;border-radius:14px;background:#fff4f2;color:#9f2d20;font-size:13px;line-height:1.45;border:1px solid #ffd9d2}

.list{display:grid;gap:12px;margin-top:14px}
@media(min-width:640px){.list{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px}
.plant{display:block;text-align:left;width:100%;transition:transform .12s}
.plant:active{transform:scale(.985)}
.plant-head{display:flex;align-items:flex-start;gap:10px}
.plant-name{flex:1;min-width:0}
.plant-name b{display:block;font-size:15.5px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plant-name span{font-size:12px;color:var(--muted)}
.tag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px;background:#eef3fb;color:#43577a;white-space:nowrap}
.status{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;white-space:nowrap}
.status i{width:8px;height:8px;border-radius:50%;background:currentColor}
.st-normal{color:var(--ok)} .st-offline{color:var(--off)} .st-fault{color:var(--bad)} .st-warning{color:var(--warn)} .st-unknown{color:var(--off)}
.st-normal i{box-shadow:0 0 0 3px rgba(22,163,74,.18);animation:blink 2s infinite}
@keyframes blink{50%{box-shadow:0 0 0 6px rgba(22,163,74,0)}}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.m{border-radius:12px;padding:8px 6px;text-align:center}
.m b{display:block;font-size:14.5px;font-weight:800;white-space:nowrap}
.m span{font-size:10.5px;font-weight:600;opacity:.8}
.m-pv{background:#fff6e0;color:#a15c00} .m-bat{background:#e6f7ec;color:#0f6b33} .m-grid{background:#e8f0ff;color:#1d4fb8} .m-load{background:#fdeaf3;color:#a3195b} .m-yield{background:#fff1e6;color:#b44d00}
.socbar{height:6px;border-radius:6px;background:#eef2f7;margin-top:10px;overflow:hidden}
.socbar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#4ade80,#16a34a)}
.empty{text-align:center;color:var(--muted);padding:40px 10px}

.section-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:22px 4px 10px}

/* Flow */
.flow{padding:6px 4px 2px}
.flow svg{width:100%;height:auto;display:block}
.flow .node-l{font-size:11px;font-weight:600;fill:var(--muted)}
.flow .node-v{font-size:15px;font-weight:800;fill:var(--ink)}
.flow .wire{fill:none;stroke:#e5ebf3;stroke-width:4;stroke-linecap:round}
.flow .dash{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:3 13;animation:flow 1.1s linear infinite}
.flow .dash.rev{animation-direction:reverse}
@keyframes flow{to{stroke-dashoffset:-16}}

.kv{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kv div{background:#f7f9fc;border-radius:12px;padding:9px 11px}
.kv span{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.kv b{font-size:15px;font-weight:700}
.card h3{margin:0 0 10px;font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px}
.card h3 .ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:15px}
.stack{display:grid;gap:12px}
.inv-btn{display:block;width:100%;text-align:left}
.mod{border-top:1px dashed var(--line);padding-top:10px;margin-top:10px}
.mod:first-of-type{border-top:0;margin-top:0;padding-top:0}
.mod-h{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:6px}
.err{background:#fff4f2;color:#9f2d20;border-radius:14px;padding:12px;font-size:13.5px;line-height:1.5}
.setup h2{margin:0 0 8px;font-size:18px}
.setup ol{padding-left:20px;line-height:1.65;margin:8px 0}
.setup b{font-weight:700}
.pw input{width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--line);font:inherit;font-size:16px;margin:10px 0}
.btn{display:block;width:100%;padding:13px;border-radius:14px;background:linear-gradient(135deg,#ffc53d,#ff9f1c);color:#3b2500;font-weight:800;font-size:15.5px}
.updated{font-size:12px;color:var(--muted);text-align:center;margin-top:14px}
.back[hidden]{display:none}
.m b small{font-size:10px;font-weight:700;margin-left:2px}
.kv b .status{display:inline-flex;font-size:14px;font-weight:700}
.kv b .status i{display:inline-block;width:8px;height:8px;border-radius:50%}
.kv b .st-normal{color:var(--ok)} .kv b .st-offline,.kv b .st-unknown{color:var(--off)} .kv b .st-fault{color:var(--bad)} .kv b .st-warning{color:var(--warn)}

.seg{display:flex;background:#eef2f7;border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;padding:8px;border-radius:10px;font-weight:700;font-size:14px;color:var(--muted)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.cnav{display:flex;align-items:center;justify-content:space-between;margin:10px 0 4px}
.cnav b{font-size:15px}
.cnav button{width:38px;height:36px;border-radius:10px;background:#f7f9fc;font-size:22px;font-weight:700;line-height:1}
.cnav button:disabled{opacity:.3}
.cread{min-height:46px;align-content:flex-start;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:12.5px;font-weight:600;color:var(--muted)}
.cread b{color:var(--ink);font-size:13.5px}
.csvg{touch-action:pan-y;min-height:120px}
.csvg svg{width:100%;height:auto;display:block;user-select:none;-webkit-user-select:none}
.legend{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:6px 2px 4px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.cnote{font-size:11.5px;color:var(--muted);margin:8px 2px 0;line-height:1.45}

.bill-big{background:linear-gradient(135deg,#e8f0ff,#f3e8ff);border-radius:16px;padding:14px 16px;margin-bottom:10px}
.bill-big span{display:block;font-size:12px;font-weight:600;color:#4b5b7a}
.bill-big b{display:block;font-size:30px;font-weight:800;letter-spacing:-.5px;color:#1d3a8a;margin-top:2px}
.bill-set{margin-top:12px;display:grid;gap:8px}
.bill-set label{display:block;font-size:11.5px;font-weight:600;color:var(--muted)}
.bill-set select,.bill-set input{display:block;width:100%;margin-top:4px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;font:inherit;font-size:16px;color:var(--ink)}
.bill-row{display:grid;grid-template-columns:2fr 1fr;gap:8px}
.bill-row label:only-child{grid-column:1/-1}