/* GBSOLAR Live — stile "vetro" iOS (chiaro/scuro automatico) */
:root {
  --bg1:#eef3fa; --bg2:#dfe8f5; --txt:#0b1220; --txt2:#4b5668; --txt3:#7a8597;
  --glass:rgba(255,255,255,.62); --glass2:rgba(255,255,255,.45); --stroke:rgba(255,255,255,.75); --stroke2:rgba(15,25,45,.08);
  --shadow:0 10px 30px rgba(20,35,70,.12), 0 1px 0 rgba(255,255,255,.6) inset;
  --pv:#ff9f0a; --batt:#30d158; --grid:#0a84ff; --home:#bf5af2; --red:#ff453a; --amber:#ffb340; --ok:#34c759;
  --tabh:84px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
@media (prefers-color-scheme: dark) { :root {
  --bg1:#0b1220; --bg2:#151f33; --txt:#f2f5fa; --txt2:#aab4c5; --txt3:#7c879b;
  --glass:rgba(24,32,50,.62); --glass2:rgba(24,32,50,.45); --stroke:rgba(255,255,255,.14); --stroke2:rgba(255,255,255,.08);
  --shadow:0 14px 40px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.06) inset;
}}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
html, body { margin:0; height:100%; }
body { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", sans-serif; color:var(--txt); background:radial-gradient(1200px 700px at 10% -10%, var(--bg2), transparent 60%), radial-gradient(900px 600px at 110% 110%, var(--bg2), transparent 60%), var(--bg1); -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; }
a { color:var(--grid); text-decoration:none; }
button { font-family:inherit; }
.num { font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.glass { background:var(--glass); -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%); border:1px solid var(--stroke); box-shadow:var(--shadow); }
.card { background:var(--glass); -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%); border:1px solid var(--stroke); box-shadow:var(--shadow); border-radius:26px; padding:18px; }
.card h3 { margin:0 0 10px; font-size:15px; font-weight:700; letter-spacing:-.01em; }
.muted { color:var(--txt2); } .small { font-size:12.5px; } .tiny { font-size:11px; color:var(--txt3); }
.app { min-height:100%; }
.view { padding:calc(12px + var(--safe-t)) 16px calc(var(--tabh) + var(--safe-b) + 16px); max-width:1180px; margin:0 auto; }
.topbar { position:sticky; top:calc(8px + var(--safe-t)); z-index:20; margin:0 16px; border-radius:22px; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; }
.topbar-left { display:flex; align-items:center; gap:10px; }
.logo-dot { width:34px; height:34px; border-radius:12px; background:radial-gradient(circle at 35% 35%, #ffd27a, #ff9f0a 60%, #ff6a00); box-shadow:0 0 18px rgba(255,159,10,.55); }
.brand { font-weight:800; font-size:15px; letter-spacing:-.01em; } .brand span { color:var(--pv); }
.top-sub { font-size:11.5px; color:var(--txt2); }
.icon-btn { position:relative; width:42px; height:42px; border-radius:14px; border:1px solid var(--stroke2); background:var(--glass2); color:var(--txt); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.badge { position:absolute; top:6px; right:6px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--red); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 10px rgba(255,69,58,.7); }
/* tab bar flottante (telefono) */
.tabbar { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(10px + var(--safe-b)); width:min(560px, calc(100% - 20px)); height:66px; border-radius:33px; display:flex; align-items:center; justify-content:space-around; padding:0 8px; z-index:30; }
.tab { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:48px; padding:8px 4px; border-radius:20px; color:var(--txt3); font-size:10.5px; font-weight:700; border:0; background:transparent; cursor:pointer; position:relative; }
.tab.on { color:var(--pv); } .tab.on::before { content:""; position:absolute; inset:2px 4px; border-radius:18px; background:rgba(255,159,10,.14); box-shadow:0 0 22px rgba(255,159,10,.35); z-index:-1; }
.tab svg { width:22px; height:22px; }
/* sidebar (desktop) */
.sidebar { display:none; }
@media (min-width: 980px) {
  .tabbar { display:none !important; }
  .sidebar { display:flex; flex-direction:column; gap:6px; position:fixed; left:16px; top:calc(16px + var(--safe-t)); bottom:16px; width:230px; border-radius:26px; padding:18px 12px; z-index:25; }
  .sidebar .tab { flex-direction:row; justify-content:flex-start; gap:12px; font-size:14px; padding:12px 14px; width:100%; }
  .sidebar .tab.on::before { inset:0; border-radius:16px; }
  .sidebar .side-foot { margin-top:auto; padding:12px 14px; font-size:12px; color:var(--txt2); }
  .view { margin-left:262px; max-width:none; padding-bottom:24px; }
  .topbar { margin-left:262px; }
}
/* griglie */
.grid2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.grid3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.grid4 { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
@media (max-width:640px) { .grid4 { grid-template-columns:repeat(2, minmax(0,1fr)); } .grid3 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.stack { display:flex; flex-direction:column; gap:14px; }
.row { display:flex; align-items:center; gap:10px; }
.spread { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dash { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr); gap:14px; align-items:start; }
@media (max-width:980px) { .dash { grid-template-columns:1fr; } }
/* tile KPI */
.tile { border-radius:22px; padding:14px 14px 12px; background:var(--glass2); border:1px solid var(--stroke2); display:flex; flex-direction:column; gap:3px; min-height:92px; }
.tile .lbl { font-size:11.5px; font-weight:700; color:var(--txt2); display:flex; align-items:center; gap:6px; }
.tile .val { font-size:24px; font-weight:800; letter-spacing:-.03em; } .tile .val small { font-size:12px; color:var(--txt2); font-weight:600; margin-left:3px; }
.tile .sub { font-size:11px; color:var(--txt3); }
.tile.pv .lbl { color:var(--pv);} .tile.batt .lbl { color:var(--batt);} .tile.grid .lbl { color:var(--grid);} .tile.home .lbl { color:var(--home);} .tile.red .lbl { color:var(--red);}
.dot { width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(52,199,89,.6); animation:pulse 2s infinite; display:inline-block; }
.dot.red { background:var(--red); box-shadow:0 0 0 0 rgba(255,69,58,.6); animation-name:pulsered; }
.dot.grey { background:#9aa3b2; animation:none; box-shadow:none; }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(52,199,89,.55);} 70% { box-shadow:0 0 0 9px rgba(52,199,89,0);} }
@keyframes pulsered { 0%,100% { box-shadow:0 0 0 0 rgba(255,69,58,.6);} 70% { box-shadow:0 0 0 9px rgba(255,69,58,0);} }
/* pill di stato */
.pill { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; font-size:12.5px; font-weight:700; background:var(--glass2); border:1px solid var(--stroke2); white-space:nowrap; }
.pill.ok { background:rgba(52,199,89,.14); border-color:rgba(52,199,89,.35); color:#1f9d4a; }
.pill.bad { background:rgba(255,69,58,.14); border-color:rgba(255,69,58,.4); color:#e03a30; box-shadow:0 0 22px rgba(255,69,58,.3); animation:glowred 1.6s ease-in-out infinite; }
.pill.warn { background:rgba(255,179,64,.16); border-color:rgba(255,179,64,.4); color:#b46a00; }
@media (prefers-color-scheme: dark) { .pill.ok { color:#6cf0a0; } .pill.bad { color:#ff8a80; } .pill.warn { color:#ffcf7a; } }
@keyframes glowred { 0%,100% { box-shadow:0 0 16px rgba(255,69,58,.25);} 50% { box-shadow:0 0 34px rgba(255,69,58,.6);} }
/* bottoni */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:50px; padding:0 20px; border-radius:16px; border:1px solid var(--stroke2); background:var(--glass2); color:var(--txt); font-weight:800; font-size:15px; cursor:pointer; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.btn.primary { background:linear-gradient(180deg,#ffb340,#ff9500); color:#1a1200; border-color:rgba(255,255,255,.4); box-shadow:0 8px 26px rgba(255,149,0,.45), 0 1px 0 rgba(255,255,255,.5) inset; }
.btn.danger { color:var(--red); }
.btn.full { width:100%; }
.btn:disabled { opacity:.55; cursor:default; }
.seg { display:flex; gap:4px; padding:4px; border-radius:16px; background:var(--glass2); border:1px solid var(--stroke2); }
.seg button { flex:1 1 0; height:38px; border:0; border-radius:12px; background:transparent; color:var(--txt2); font-weight:800; font-size:13px; cursor:pointer; }
.seg button.on { background:var(--glass); color:var(--txt); box-shadow:0 4px 14px rgba(0,0,0,.12); }
/* form */
.field { width:100%; height:50px; border-radius:14px; border:1px solid var(--stroke2); background:var(--glass2); color:var(--txt); font-size:16px; padding:0 14px; outline:none; font-family:inherit; }
.field:focus { border-color:var(--pv); box-shadow:0 0 0 4px rgba(255,159,10,.18); }
label.lbl { display:block; font-size:12.5px; font-weight:700; color:var(--txt2); margin:0 0 6px 4px; }
.switch { appearance:none; -webkit-appearance:none; width:50px; height:30px; border-radius:999px; background:rgba(120,130,150,.35); position:relative; cursor:pointer; flex-shrink:0; margin:0; border:0; transition:background .2s; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:left .2s; }
.switch:checked { background:var(--ok); } .switch:checked::after { left:23px; }
.list { display:flex; flex-direction:column; }
.list .item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--stroke2); min-height:52px; }
.list .item:last-child { border-bottom:0; }
.ico { width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ico.pv { background:rgba(255,159,10,.16); color:var(--pv);} .ico.batt { background:rgba(48,209,88,.16); color:var(--batt);} .ico.grid { background:rgba(10,132,255,.16); color:var(--grid);} .ico.home { background:rgba(191,90,242,.16); color:var(--home);} .ico.red { background:rgba(255,69,58,.16); color:var(--red);} .ico.grey { background:rgba(120,130,150,.18); color:var(--txt2);}
/* scena casa */
.scene { position:relative; border-radius:28px; overflow:hidden; aspect-ratio:16/10; width:100%; max-width:100%; box-shadow:var(--shadow); border:1px solid var(--stroke); }
.scene.tall { aspect-ratio:16/9; max-height:560px; }
@media (max-width:640px) { .scene, .scene.tall { aspect-ratio:5/4; max-height:none; } .scene .tag { font-size:11.5px; padding:4px 8px; border-radius:11px; } .scene .tag .cap { font-size:8.5px; } .scene .chip { font-size:11px; padding:6px 9px; top:8px; } .scene .chip.l { left:8px; } .scene .chip.r { right:8px; } }
.dash > * { min-width:0; } .card { min-width:0; max-width:100%; } .view { overflow-x:hidden; }
.scene canvas { position:absolute; inset:0; width:100%; height:100%; }
.scene canvas.fx { z-index:3; pointer-events:none; }
.scene img.house { position:absolute; z-index:1; object-fit:fill; user-select:none; -webkit-user-drag:none; }
.scene .tint { position:absolute; z-index:2; -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; transition:background 2s; pointer-events:none; }
.scene svg.flow { position:absolute; z-index:4; overflow:visible; pointer-events:none; }
.scene .tag { z-index:5; } .scene .chip { z-index:6; } .scene .overlay { z-index:7; } .scene .flash { z-index:8; }
.scene .tag { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 11px; border-radius:14px; background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.8); box-shadow:0 6px 18px rgba(0,0,0,.15); color:#0b1220; font-weight:800; font-size:13px; line-height:1.15; white-space:nowrap; pointer-events:none; }
.scene .tag .cap { font-size:9.5px; font-weight:700; color:#4b5668; text-transform:uppercase; letter-spacing:.06em; }
.scene .tag.dim { opacity:.55; }
.scene .tag.fixed { transform:none; left:auto !important; top:auto !important; }
.scene .tag.fixed-grid { right:12px; top:52px !important; align-items:flex-end; }
.scene .tag.fixed-batt { right:12px; bottom:12px; align-items:flex-end; }
@media (max-width:640px) { .scene .tag.fixed-grid { right:8px; top:44px !important; } .scene .tag.fixed-batt { right:8px; bottom:8px; } }
.scene .tag.pv { border-bottom:3px solid var(--pv);} .scene .tag.home { border-bottom:3px solid var(--home);} .scene .tag.batt { border-bottom:3px solid var(--batt);} .scene .tag.grid { border-bottom:3px solid var(--grid);} .scene .tag.bad { border-bottom:3px solid var(--red); color:#b3261e; }
.scene .chip { position:absolute; top:12px; display:flex; align-items:center; gap:7px; padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.8); color:#0b1220; font-size:12px; font-weight:800; }
.scene .chip.l { left:12px; } .scene .chip.r { right:12px; }
.scene .chip.bad { background:rgba(255,69,58,.9); color:#fff; border-color:rgba(255,255,255,.5); box-shadow:0 0 22px rgba(255,69,58,.6); animation:glowred 1.4s infinite; }
.scene .overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(10,15,25,.45); color:#fff; font-weight:800; font-size:15px; text-align:center; padding:20px; }
@keyframes flashfx { 0%,100% { opacity:0;} 50% { opacity:.9;} }
.scene .flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
/* varie */
.gauge { position:relative; width:118px; height:118px; flex-shrink:0; }
.gauge .c { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge .c b { font-size:24px; letter-spacing:-.03em; } .gauge .c span { font-size:10px; font-weight:800; color:var(--txt3); letter-spacing:.06em; }
.bar { height:10px; border-radius:999px; background:rgba(120,130,150,.22); overflow:hidden; } .bar i { display:block; height:100%; border-radius:999px; }
.chart { width:100%; height:320px; } .chart.sm { height:190px; }
@media (max-width:640px) { .chart { height:280px; } .chart.sm { height:170px; } }
.wx7 { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; text-align:center; }
.wx7 .d { padding:8px 2px; border-radius:14px; background:var(--glass2); border:1px solid var(--stroke2); font-size:11px; }
.wx7 .d.today { border-color:var(--pv); box-shadow:0 0 14px rgba(255,159,10,.25); }
.wx7 svg { width:24px; height:24px; margin:3px 0; }
.wx7 .t { font-weight:800; font-size:12px; } .wx7 .m { color:var(--txt3); font-size:10.5px; }
.center { text-align:center; }
.login-wrap { min-height:calc(100vh - 40px); display:flex; flex-direction:column; justify-content:center; max-width:420px; margin:0 auto; gap:22px; }
.logo-big { width:82px; height:82px; border-radius:26px; margin:0 auto; background:radial-gradient(circle at 35% 35%, #ffd27a, #ff9f0a 60%, #ff6a00); box-shadow:0 0 44px rgba(255,159,10,.55); display:flex; align-items:center; justify-content:center; animation:breathe 3s ease-in-out infinite; }
@keyframes breathe { 0%,100% { box-shadow:0 0 34px rgba(255,159,10,.45);} 50% { box-shadow:0 0 60px rgba(255,159,10,.8);} }
.toast { position:fixed; left:50%; bottom:calc(var(--tabh) + var(--safe-b) + 12px); transform:translateX(-50%); padding:12px 18px; border-radius:16px; background:rgba(20,28,44,.92); color:#fff; font-weight:700; font-size:13.5px; z-index:50; box-shadow:0 10px 30px rgba(0,0,0,.35); max-width:calc(100% - 32px); text-align:center; }
.err { color:var(--red); font-weight:700; font-size:13px; }
.h1 { font-size:26px; font-weight:800; letter-spacing:-.03em; margin:6px 0 2px; }
.h2 { font-size:17px; font-weight:800; letter-spacing:-.02em; margin:0; }
.evt { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--stroke2); }
.evt:last-child { border-bottom:0; }
.evt .when { font-size:11.5px; color:var(--txt3); }
table.tbl { width:100%; border-collapse:collapse; font-size:13px; } table.tbl th { text-align:left; color:var(--txt2); font-weight:700; padding:8px 6px; border-bottom:1px solid var(--stroke2); } table.tbl td { padding:8px 6px; border-bottom:1px solid var(--stroke2); vertical-align:middle; }
.admin-form { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
@media (max-width:640px) { .admin-form { grid-template-columns:1fr; } }
.chk { display:flex; align-items:center; gap:8px; font-size:13px; padding:6px 0; }
.skeleton { height:16px; border-radius:8px; background:linear-gradient(90deg, var(--glass2), var(--glass), var(--glass2)); background-size:200% 100%; animation:sk 1.2s infinite; }
@keyframes sk { to { background-position:-200% 0; } }
.fade { animation:fade .35s ease-out; } @keyframes fade { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none;} }