:root{color-scheme:dark;--bg:#071023;--panel:#111e3b;--panel2:#17284d;--line:#2d4372;--text:#f2f6ff;--muted:#a7b6d5;--blue:#21b8ff;--violet:#a044ff;--green:#19e18a;--amber:#ffad37;--pink:#ff51b9;--red:#ff5577} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);font:14px/1.48 "Segoe UI",Inter,Arial,sans-serif;background:radial-gradient(1200px 700px at 65% -20%,#172c67 0%,transparent 64%),radial-gradient(900px 500px at 100% 60%,#28164b 0%,transparent 65%),linear-gradient(140deg,#050b19,#0a1530 58%,#10112b);min-height:100vh} .app-shell{display:grid;grid-template-columns:262px minmax(0,1fr);min-height:100vh;max-width:1900px;margin:0 auto;background:#071124} .sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:20px 15px 12px;background:linear-gradient(180deg,#0a1730 0%,#0c1b36 56%,#0a1831 100%);border-right:1px solid #2a3d68;box-shadow:9px 0 34px #01071666;z-index:5} .brand{display:flex;align-items:center;gap:13px;padding:1px 4px 25px;border-bottom:1px solid #27395f}.logo{width:66px;height:66px;flex:0 0 66px;border-radius:19px;overflow:hidden;box-shadow:0 8px 26px #6b4eff66,0 0 0 1px #b7beff55}.logo img{width:100%;height:100%;display:block}.brand-copy{display:flex;flex-direction:column;line-height:1.2}.brand-copy strong{font-size:17px;letter-spacing:-.3px}.version-badge{align-self:flex-start;margin-top:7px;padding:4px 10px;border-radius:999px;background:linear-gradient(105deg,#078cda,#7b40f5);color:white;font-size:10px;font-weight:800;box-shadow:0 5px 15px #3159e755} .side-nav{display:flex;flex-direction:column;gap:6px;padding-top:19px}.nav{display:flex;align-items:center;gap:13px;width:100%;padding:12px 13px;text-align:left;border-radius:12px;border:1px solid transparent;background:transparent;color:#c0cce5;font-weight:650;font-size:13px;transition:background .18s,transform .18s,color .18s;cursor:pointer}.nav:hover{background:#1d3155;color:white;transform:translateX(2px)}.nav.active{color:#fff;background:linear-gradient(105deg,#078fdc 0%,#165ed2 52%,#3f41c6 100%);border-color:#4db5ff88;box-shadow:0 8px 25px #0868d65c}.nav.import-nav.active{background:linear-gradient(105deg,#8540ed,#4a49d9);box-shadow:0 8px 25px #7b42de55}.nav-icon{width:25px;flex:0 0 25px;text-align:center;font-size:23px;line-height:1;color:#76d6ff}.nav.active .nav-icon{color:white}.subnav{display:flex;flex-direction:column;gap:1px;padding:0 0 5px 33px}.nav.sub{font-size:12px;font-weight:500;color:#8fa4c8;padding:7px 10px}.nav.sub:before{content:"";width:5px;height:5px;border-radius:50%;background:#6285c6;margin-right:2px}.nav.sub.active{background:#1e3e72;color:#fff;transform:none}.nav-spacer{height:1px;background:#25385e;margin:8px 2px}.sidebar-art{margin:auto 7px 10px;padding:13px 8px 8px;border:1px solid #273d67;border-radius:16px;background:linear-gradient(145deg,#10284d,#171c46 75%,#15274a);overflow:hidden}.sidebar-art svg{display:block;width:100%;height:113px}.sidebar-art p{margin:3px 4px 4px;color:#9fb3d4;font-size:12px;line-height:1.45}.sidebar-art b{color:#dbe8ff}.side-foot{color:#62799e;text-align:center;font-size:10px;padding:5px 0} .workspace{min-width:0;display:flex;flex-direction:column;min-height:100vh}.hero-header{min-height:156px;position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:21px 27px 20px 30px;overflow:hidden;border-bottom:1px solid #3a4f85;background:linear-gradient(102deg,#1b2d69 0%,#383b97 37%,#7040a4 65%,#da649b 100%);isolation:isolate}.hero-header:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(450px 190px at 75% 13%,#ffe69b99,transparent 72%),linear-gradient(0deg,#172349aa 0%,transparent 48%)}.hero-header:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#15285b 0%,#24316a55 42%,transparent 70%)}.hero-copy{position:relative;z-index:2;min-width:300px}.eyebrow{font-size:9px;letter-spacing:2.3px;font-weight:900;color:#9beaff;text-shadow:0 2px 8px #13144c}.hero-copy h1{font-size:31px;line-height:1.08;letter-spacing:-.8px;margin:7px 0 5px;text-shadow:0 3px 18px #18143e}.hero-copy p{margin:0;color:#e0eaff;font-size:13px}.hero-house{position:absolute;right:230px;bottom:-3px;width:min(420px,36vw);height:155px;opacity:.98;filter:drop-shadow(0 12px 18px #08112b80);z-index:1}.hero-house svg{width:100%;height:100%}.hero-right{display:flex;flex-direction:column;gap:8px;align-items:flex-end;position:relative;z-index:2;min-width:178px}.hero-status{border-radius:30px;padding:7px 12px;background:#8b1d4c66;border:1px solid #e98dc366;color:#ffe5f4;font-weight:700;font-size:11px}.hero-status.ok{background:#065c496e;border-color:#24e4a088;color:#c8ffeb}.hero-update{display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:22px;background:#151f4c99;border:1px solid #a0a9ff55;color:#d9e5ff;font-size:10px}.top-actions{display:flex;gap:7px}.ghost{background:#1a2a4ccc;border:1px solid #47608f;color:#dfeaff}.top-actions button{padding:7px 10px;font-size:10px} main{padding:22px 24px 25px;flex:1;min-width:0}.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;padding:20px 22px;border:1px solid #4c61a0;border-radius:17px;background:linear-gradient(105deg,#152d5b 0%,#283a80 42%,#4d287e 100%);box-shadow:0 12px 30px #01071670;position:relative;overflow:hidden}.section-head:after{content:"";position:absolute;width:210px;height:210px;right:2%;top:-140px;border-radius:50%;background:#5bdfff55;filter:blur(27px);pointer-events:none}.section-head>div,.section-head>button,.section-head>select,.section-chip,.live-pill{position:relative;z-index:1}.section-head h2{font-size:23px;line-height:1.2;margin:0 0 4px;color:white;letter-spacing:-.4px}.section-head p,.panel-title p{color:#bdccef;margin:0;font-size:11px}.compact-head{padding:13px 18px}.compact-head h2{font-size:17px}.section-chip{border:1px solid #ab75ff88;border-radius:30px;background:#5d37b088;padding:7px 12px;color:#f2e7ff;font-size:10px;font-weight:700;white-space:nowrap} button,select,input{font:inherit}button{cursor:pointer;border:0;border-radius:10px;padding:10px 15px;font-weight:750;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}button:hover{filter:brightness(1.12);transform:translateY(-1px)}button:active{transform:translateY(0)}.primary{background:linear-gradient(108deg,#0bbaf4,#405cf2 60%,#a140ee);color:white;box-shadow:0 7px 20px #3158de55}.secondary{background:linear-gradient(105deg,#14416a,#3b2b78);border:1px solid #5878bc;color:#e1edff}.danger{background:linear-gradient(105deg,#a82e5c,#dc3d58);color:white}.success-button{background:linear-gradient(105deg,#00a978,#0ecf79);color:#fff;box-shadow:0 6px 18px #02bf7950}.restore-mail-button{background:linear-gradient(105deg,#6242d8,#a23ce6);color:#fff;box-shadow:0 6px 18px #8349ef45}.full{width:100%;margin-top:14px} .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:15px}.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}.metric,.panel{background:linear-gradient(145deg,#152443f2,#101a32 76%,#1c1b42);border:1px solid #344b7b;border-radius:16px;padding:17px;box-shadow:0 10px 25px #02071770,inset 0 1px 0 #ffffff0c}.metric{min-height:132px;position:relative;overflow:hidden}.metric:after{content:"";position:absolute;width:135px;height:135px;border-radius:50%;right:-50px;bottom:-80px;background:#ffffff15;filter:blur(4px)}.metric-purple{background:linear-gradient(130deg,#4932b4,#6b2b9e 78%,#382b69);border-color:#9777f1}.metric-green{background:linear-gradient(130deg,#087e65,#066753 65%,#0c3b60);border-color:#1bd49c}.metric-blue{background:linear-gradient(130deg,#075f9e,#1653a5 60%,#36348c);border-color:#26b8ff}.metric-orange{background:linear-gradient(130deg,#ae5b0d,#d66a0c 58%,#793b5f);border-color:#ffbd53}.metric-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;margin-bottom:8px;background:#ffffff24;color:#fff;font-size:21px;font-weight:800}.metric label{display:block;color:#e6edff;font-size:11px;position:relative;z-index:1}.metric strong{display:block;font-size:26px;line-height:1.2;letter-spacing:-.5px;margin:3px 0;color:white;text-shadow:0 2px 14px #0005;position:relative;z-index:1}.metric small{color:#d5e2ff;font-size:10px;position:relative;z-index:1} .dashboard-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:13px}.panel{margin-bottom:14px;min-width:0}.panel h3{font-size:14px;margin:0 0 4px;color:#f4f7ff}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}.chart-icon{font-size:24px;color:#5ce3ff;text-shadow:0 0 14px #36d4ff}.chart-panel canvas{width:100%;display:block}.legend{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0 0;color:#b3c5e5;font-size:10px}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.dot.import{background:#26baff}.dot.export{background:#19e18a}.chart-note{color:#8ea4cc;font-size:10px;margin:10px 0 0}.flow-meter{height:107px;position:relative;margin:13px 2% 3px;background:linear-gradient(90deg,#087a5e66 0%,#101a34 49.7%,#12478666 100%);border:1px solid #364d7c;border-radius:13px;overflow:hidden}.zero{position:absolute;left:50%;top:0;bottom:0;border-left:2px dashed #a7b7d5}.flowbar{position:absolute;top:28px;height:28px;width:0;background:linear-gradient(90deg,#12eaa1,#00a877);border-radius:7px;box-shadow:0 0 18px #12dc9b88;transition:all .3s}.flowbar.import{background:linear-gradient(90deg,#21caff,#5475ff);box-shadow:0 0 18px #29b7ff88}.flowvalue{position:absolute;top:65px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:800;color:white;white-space:nowrap}.axis-label{position:absolute;top:8px;font-size:10px;color:#d3def5}.axis-label.left{left:12px}.axis-label.right{right:12px}.flow-foot{display:flex;justify-content:space-between;color:#9db2d7;font-size:10px;margin:9px 7px 0}.summary-row{display:flex;justify-content:space-between;gap:12px;padding:9px 2px;border-bottom:1px solid #2a3e68;color:#adc0e1;font-size:11px}.summary-row strong{color:#eef5ff;text-align:right}.positive{color:#3af0a2!important}.summary-panel>small{display:block;color:#839ac2;font-size:10px;margin-top:10px} .notice{background:linear-gradient(100deg,#142f56,#25214e);border:1px solid #5264a0;border-left:4px solid #28c6ff;border-radius:12px;padding:13px 16px;color:#dce8ff;font-size:11px;box-shadow:0 7px 20px #02071655}.hidden{display:none!important}select,input{border:1px solid #3c527f;border-radius:9px;padding:9px 11px;background:#0c1932;color:#edf4ff;outline:none}select:focus,input:focus{border-color:#39c5ff;box-shadow:0 0 0 3px #22baff25}input::placeholder{color:#7186ad} .table-panel,.tablewrap{overflow:auto;border:1px solid #293f69;border-radius:11px}table{width:100%;border-collapse:collapse;font-size:11px}th{text-align:left;color:#adc3e8;font-weight:750;background:#1c2b4c;white-space:nowrap}td,th{padding:10px 11px;border-bottom:1px solid #25395e}td{color:#dce7fc;font-variant-numeric:tabular-nums}tr:hover td{background:#29406b32}.settings-panel{max-width:750px}.settings-panel label,.import-panel label,.mail-settings label{display:block;margin:13px 0 5px;color:#c3d2ee;font-size:11px}.settings-panel input,.settings-panel select{display:block;width:100%;max-width:520px}.settings-panel p{color:#a3b6d7;font-size:11px}.divider{height:1px;background:#2a3c65;margin:22px 0}.msg{margin-top:8px;min-height:14px;font-size:11px;color:#ff9bad}.msg.ok{color:#69f2bf}.row-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:12px} /* Import workspace */ .import-kpis .metric{min-height:120px}.import-layout{display:grid;grid-template-columns:minmax(310px,.82fr) minmax(0,1.8fr);gap:13px;align-items:start}.import-left{display:flex;flex-direction:column;gap:0}.import-panel{margin-bottom:13px}.panel-symbol{border-radius:10px;padding:7px 9px;font-size:11px;font-weight:900;letter-spacing:1px}.csv-symbol{color:#84eaff;background:#07588a88;border:1px solid #27c8ff66}.field-label{font-weight:700}.file-input{width:100%;padding:9px}.helper-note,.mail-note{margin-top:12px;padding:10px 12px;border-radius:10px;background:#16294b;border:1px solid #324d7b;color:#9db4da;font-size:10px}.csv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}.csv-grid label{display:block;margin:9px 0 4px;color:#b9cae8;font-size:10px}.csv-grid select,.csv-grid input{display:block;width:100%;min-width:0}.csv-preview-wrap{margin-top:13px;max-height:230px;overflow:auto;border:1px solid #2d3e65;border-radius:9px}.csv-preview-wrap table{min-width:560px}.csv-preview-wrap td,.csv-preview-wrap th{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.csv-options{margin-top:8px}.csv-sheet-hidden{display:none!important}.import-list-panel{padding:14px 14px 12px;min-width:0}.count-pill{border:1px solid #526da4;background:#1b315a;border-radius:30px;padding:6px 10px;color:#dce9ff;font-size:10px;white-space:nowrap}.table-tools{display:flex;gap:8px;justify-content:flex-end;margin:0 0 10px}.table-tools select,.table-tools input{font-size:10px;padding:8px 9px}.table-tools input{width:180px}.import-table{min-width:950px}.import-table th,.import-table td{padding:8px 8px;font-size:10px}.import-table .check-col{width:32px}.import-table input[type=checkbox],input[type=checkbox]{accent-color:#178dff;width:14px;height:14px;vertical-align:middle}.kind-pill{display:inline-flex;padding:3px 7px;border-radius:18px;font-size:9px;font-weight:800;white-space:nowrap}.kind-email{background:#184b78;color:#9cddff;border:1px solid #3179bb}.kind-csv{background:#54318e;color:#ead6ff;border:1px solid #9161ca}.kind-export{background:#075d48;color:#8fffd1}.kind-consumption{background:#4e347a;color:#dcc3ff}.status-pill{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border-radius:20px;background:#075c46;color:#8df5c8;font-size:9px;font-weight:800;white-space:nowrap}.status-pill.warning{background:#624417;color:#ffe0a2}.status-pill:before{content:"●"}.delete-one{padding:4px 7px;border:1px solid #8d385e;background:#762c4b;color:#ffb4ca;font-size:11px}.table-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:11px 2px 0}.table-count{font-size:10px;color:#9eb3d6}.pagination{display:flex;gap:4px;align-items:center}.pagination button{min-width:28px;padding:6px 8px;font-size:10px;background:#1b2c4d;border:1px solid #354d79;color:#cbd9f1}.pagination button.active{background:linear-gradient(110deg,#087fdb,#6248df);border-color:#83b7ff;color:white;box-shadow:0 3px 12px #3569d555}.pagination button:disabled{opacity:.35;cursor:not-allowed;transform:none}.delete-actions{display:flex;gap:6px}.delete-button,.delete-all-button{padding:7px 10px;background:linear-gradient(110deg,#a32e5b,#c73c59);color:white;font-size:9px}.delete-all-button{background:#283858;border:1px solid #50668d;color:#e2eaff}.delete-button:disabled{opacity:.4;cursor:not-allowed;transform:none}.mail-actions{display:flex;gap:7px;flex-wrap:wrap}.mail-actions button{font-size:10px;padding:8px 11px}.mail-settings{margin-top:13px;padding:12px;border:1px solid #2b4776;border-radius:12px;background:#0d1932}.status-pill{font-size:10px}.status-pill.offline{background:#583048;color:#ffc0d0}.month-panel{margin-top:14px}.monthly-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,.75fr);gap:18px;align-items:center}.monthly-grid canvas{width:100%;display:block}.monthly-side{padding:3px 10px}.monthly-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin-top:10px}.monthly-stat{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #2b3c62;padding:7px 2px;color:#9db2d7;font-size:10px}.monthly-stat strong{color:#e9f1ff}.monthly-stat strong.green{color:#43efaa}.chart-panel canvas{max-width:100%} .app-footer{display:flex;align-items:center;justify-content:space-between;gap:13px;flex-wrap:wrap;padding:13px 24px;border-top:1px solid #2e416d;background:#09172d;color:#90a8cd;font-size:10px}.app-footer>span{display:flex;align-items:center;gap:7px}.footer-dot{width:8px;height:8px;border-radius:50%;background:#25e49a;box-shadow:0 0 9px #23e49a} @media(max-width:1280px){.app-shell{grid-template-columns:228px minmax(0,1fr)}.hero-house{right:190px;width:32vw}.import-layout{grid-template-columns:1fr}.import-left{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dashboard-grid{grid-template-columns:1fr 1fr}} @media(max-width:900px){.app-shell{grid-template-columns:76px minmax(0,1fr)}.sidebar{padding:14px 8px}.brand{justify-content:center;padding:3px 0 16px}.logo{width:50px;height:50px;flex-basis:50px}.brand-copy,.nav:not(.sub){font-size:0}.side-nav .nav:not(.sub){justify-content:center;padding:12px 5px}.nav-icon{font-size:22px;flex:0 0 auto}.subnav,.sidebar-art,.side-foot{display:none}.hero-header{padding:17px 20px}.hero-house{right:160px;width:32vw}.hero-copy h1{font-size:25px}.hero-copy p{max-width:350px}.hero-right{min-width:135px}main{padding:17px 16px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:1fr 1fr}.import-left{display:flex}.monthly-grid{grid-template-columns:1fr}} @media(max-width:620px){.app-shell{grid-template-columns:1fr}.sidebar{position:sticky;top:0;width:100%;height:auto;display:block;padding:7px 10px;border-right:0;border-bottom:1px solid #2d4372}.brand{display:none}.side-nav{display:flex;flex-direction:row;gap:5px;padding:0;overflow-x:auto}.side-nav .nav:not(.sub){width:auto;flex:0 0 auto;font-size:10px;padding:9px 10px;white-space:nowrap}.nav-icon{font-size:16px}.side-nav .subnav,.side-nav .nav-spacer{display:none}.workspace{min-height:calc(100vh - 54px)}.hero-header{min-height:130px;padding:14px 13px}.hero-copy{min-width:0}.eyebrow{font-size:8px}.hero-copy h1{font-size:23px}.hero-copy p{font-size:10px;max-width:220px}.hero-house{right:90px;width:190px;height:105px;opacity:.45}.hero-right{min-width:0;gap:5px}.hero-update{font-size:8px;padding:5px 7px}.top-actions{display:none}main{padding:12px 10px}.section-head{padding:13px 14px;align-items:flex-start}.section-head h2{font-size:18px}.section-head p{font-size:10px}.section-chip{display:none}.cards,.cards.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.metric{padding:12px;min-height:112px}.metric strong{font-size:21px}.metric label{font-size:10px}.metric small{font-size:9px}.dashboard-grid{grid-template-columns:1fr}.panel{padding:13px}.import-layout{grid-template-columns:1fr}.import-left{display:flex}.table-tools{justify-content:flex-start;flex-wrap:wrap}.table-tools input{flex:1;min-width:120px}.table-bottom{align-items:flex-start}.delete-actions{width:100%}.delete-actions button{flex:1}.monthly-list{grid-template-columns:1fr}.app-footer{padding:10px;gap:7px;font-size:9px}.footer-version{display:none}.csv-grid{grid-template-columns:1fr}} .reimport-one{padding:4px 7px;margin-right:4px;border:1px solid #2476bc;background:#174b82;color:#9edbff;font-size:11px}.reimport-one:hover{background:#1769b1;color:#fff} .history-import-panel{margin-bottom:18px}.history-range-grid{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:14px;align-items:end}.history-range-grid label{display:block;color:#aab9d7;font-size:12px;margin:0 0 6px}.history-range-grid input,.history-range-grid select{width:100%;min-width:0}.history-actions{display:flex;gap:8px;flex-wrap:wrap}.history-table-head{margin-top:18px}.history-table-head h3{margin:0 0 4px;font-size:16px}.history-table-head p{margin:0;color:#91a6ca;font-size:12px}@media(max-width:850px){.history-range-grid{grid-template-columns:1fr 1fr}.history-actions{grid-column:1/-1}}@media(max-width:520px){.history-range-grid{grid-template-columns:1fr}} /* Audit-grade Smart-Meter comparison */ .stats-kpis{grid-template-columns:repeat(4,minmax(0,1fr))} .stats-explanation{margin:0 0 15px;line-height:1.6} .quality-cell{font-size:10px;line-height:1.45;color:#bbcae6;min-width:155px;white-space:normal} .table-panel{overflow-x:auto} .table-panel table{min-width:760px} .stats-kpis .metric small{line-height:1.4} /* v0.4.10: audit and interval-history readability */ .monthly-dual-values{font-size:11px;color:#dce8ff;white-space:normal;text-align:right;line-height:1.45} .table-panel table{min-width:1080px} .quality-cell{min-width:150px} .history-table-head{margin-top:22px} /* v0.4.12 – consumer-first energy dashboard */ .consumer-head{align-items:center;background:linear-gradient(110deg,#182f6a 0%,#4335a4 48%,#8a329a 100%);border-color:#6c70d1;padding:21px 23px;gap:20px} .consumer-head h2{font-size:24px;margin:3px 0 5px}.consumer-head .eyebrow{font-size:9px;letter-spacing:2px;font-weight:900;color:#8eeaff}.consumer-head p{max-width:640px;line-height:1.5} .period-switch{display:flex;gap:5px;padding:5px;border:1px solid #c4cbff55;background:#111e49a8;border-radius:14px;flex-shrink:0}.period-switch button{padding:9px 12px;background:transparent;border:1px solid transparent;color:#dbe6ff;font-size:11px;white-space:nowrap}.period-switch button.active{background:linear-gradient(110deg,#11b9ef,#674df5);color:#fff;box-shadow:0 5px 16px #1e9ce855} .consumer-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;margin-bottom:14px}.feature-card{border-radius:19px;padding:20px 23px;min-height:177px;position:relative;overflow:hidden;border:1px solid transparent;box-shadow:0 14px 35px #01061588}.feature-card:after{content:"";position:absolute;width:210px;height:210px;right:-45px;top:-112px;border-radius:50%;background:#ffffff17;filter:blur(2px)}.feature-solar{background:radial-gradient(200px 130px at 85% 15%,#ffe17a55,transparent 80%),linear-gradient(120deg,#146a78,#176b78 40%,#33469a);border-color:#36dfda88}.feature-saving{background:radial-gradient(200px 120px at 90% 10%,#91ffc45c,transparent 80%),linear-gradient(120deg,#075d56,#087e68 48%,#244a83);border-color:#36e9ac88}.feature-kicker{display:flex;align-items:center;gap:10px;color:#e5f8ff;letter-spacing:1px;font-size:10px;font-weight:850;position:relative;z-index:1}.feature-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#ffffff27;font-size:20px}.feature-card>strong{display:block;font-size:clamp(34px,3.2vw,48px);line-height:1.15;letter-spacing:-1px;color:#fff;margin:14px 0 4px;text-shadow:0 3px 22px #0006;position:relative;z-index:1}.feature-card>strong small{font-size:17px;letter-spacing:0;color:#dffaff}.feature-card p{margin:0;color:#d8f2f8;font-size:11px;position:relative;z-index:1}.feature-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff2b;margin-top:15px;padding-top:10px;color:#c7e9f1;font-size:10px;position:relative;z-index:1}.sparkle{font-size:21px;color:#ffdf83} .consumer-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}.consumer-kpis .metric{min-height:130px}.consumer-lower-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:14px}.balance-panel,.money-panel{min-height:230px}.balance-visual{display:grid;grid-template-columns:175px 1fr;align-items:center;gap:20px;padding:8px 12px 4px}.balance-ring{width:164px;height:164px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#27dca2 0deg 180deg,#3ab6ff 180deg 285deg,#7259ef 285deg 360deg);position:relative;box-shadow:0 0 30px #3285fa38}.balance-ring:before{content:"";position:absolute;inset:17px;background:#111c35;border-radius:50%;box-shadow:inset 0 2px 16px #020818}.balance-ring-center{z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}.balance-ring-center strong{font-size:26px;color:#fff}.balance-ring-center small{font-size:10px;color:#a8bedf}.balance-legend{display:flex;flex-direction:column;gap:15px}.balance-legend>div{display:grid;grid-template-columns:12px 1fr auto;gap:8px;align-items:center;color:#b8c9e7;font-size:11px}.balance-legend strong{color:#fff;font-size:12px}.legend-dot{width:9px;height:9px;border-radius:50%;display:block}.legend-self{background:#27dca2}.legend-export{background:#3ab6ff}.legend-grid{background:#7259ef}.money-panel{padding:18px 21px}.money-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;border-bottom:1px solid #2a3e68;color:#b6c9e8;font-size:11px}.money-row strong{color:#fff;font-size:15px;white-space:nowrap}.money-row:first-of-type strong{color:#46f2b1;font-size:19px}.money-note{margin-top:13px;background:#101d38;border:1px solid #344a76;border-radius:10px;padding:10px 12px;color:#94adcf;font-size:10px;line-height:1.5}.trend-panel{margin-top:0}.trend-panel canvas{width:100%;height:230px;display:block}.selfuse-dot{background:#a98cff}.grid-export-dot{background:#44ddbc}.periods-panel{margin-top:0}.period-table{width:100%;border-collapse:collapse;font-size:11px}.period-table th{color:#91a9ce;text-align:left;font-weight:700;background:#101b35;padding:10px 12px;white-space:nowrap}.period-table td{border-bottom:1px solid #283e67;padding:10px 12px;color:#d9e6fa;font-variant-numeric:tabular-nums;white-space:nowrap}.period-table td:nth-child(3),.period-table td:nth-child(4),.period-table td:nth-child(6){color:#54e6b4;font-weight:700}.consumer-notice{line-height:1.6;margin:0 0 14px}.live-strip{display:flex;align-items:center;gap:13px;padding:12px 16px;border:1px solid #334a75;border-radius:14px;background:linear-gradient(100deg,#111e38,#142448);margin-bottom:10px}.live-strip>div{display:flex;flex-direction:column;gap:2px;margin-right:auto}.live-strip b{font-size:11px}.live-strip small{color:#92a8cc;font-size:10px}.live-strip>strong{font-size:22px;color:#ffcb63}.live-pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#35e3a0;box-shadow:0 0 10px #35e3a0;vertical-align:middle;margin-right:6px}.history-summary-kpis{margin-top:14px}.history-summary-kpis .metric{min-height:95px}.history-summary-kpis .metric strong{font-size:22px}.history-bucket-panel{margin-bottom:15px} .mobile-pair-panel{max-width:760px}.mobile-pair-result{margin-top:13px;padding:15px;border:1px solid #3f69a2;border-radius:13px;background:#11244a}.mobile-pair-code{font-size:30px;letter-spacing:7px;font-weight:900;color:#fff;margin:5px 0 9px}.mobile-pair-url{font-size:12px;color:#77d9ff;word-break:break-all}.mobile-pair-result .helper-note{margin-top:10px} @media(max-width:1050px){.consumer-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.consumer-lower-grid{grid-template-columns:1fr}.balance-panel,.money-panel{min-height:0}} @media(max-width:760px){ .app-shell{display:block}.sidebar{position:fixed;top:auto;bottom:0;left:0;right:0;width:100%;height:auto;display:block;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid #465d8c;background:#09152cF2;backdrop-filter:blur(16px);box-shadow:0 -8px 26px #0008;z-index:20}.sidebar .brand,.sidebar-art,.side-foot,.nav-spacer,.subnav{display:none}.side-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:0}.nav{display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:center;padding:7px 3px 6px;font-size:9px;border-radius:10px;white-space:nowrap}.nav:hover{transform:none}.nav-icon{font-size:19px;width:auto;flex:initial} .workspace{min-height:100vh;padding-bottom:78px}.hero-header{min-height:120px;padding:15px 14px;align-items:flex-start}.hero-copy{min-width:0;max-width:70%}.hero-copy h1{font-size:23px}.hero-copy p{font-size:10px;max-width:240px}.hero-house{right:82px;width:150px;height:90px;opacity:.55}.hero-right{min-width:0;align-items:flex-end;gap:6px}.hero-update{font-size:8px;padding:5px 8px}.top-actions button{padding:5px 7px;font-size:9px}.top-actions button:last-child{display:none} main{padding:13px 11px 16px}.section-head{padding:13px 14px;border-radius:14px;margin-bottom:12px;align-items:flex-start;flex-direction:column}.section-head h2{font-size:18px}.section-head p{font-size:10px}.consumer-head{gap:12px}.period-switch{width:100%;justify-content:space-between}.period-switch button{flex:1;padding:8px 4px;font-size:10px}.consumer-hero-grid{grid-template-columns:1fr;gap:9px}.feature-card{min-height:145px;padding:16px}.feature-card>strong{font-size:36px;margin:9px 0 3px}.feature-kicker{font-size:9px}.consumer-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.consumer-kpis .metric{min-height:112px;padding:12px}.consumer-kpis .metric-icon{width:28px;height:28px;font-size:17px;margin-bottom:6px}.consumer-kpis .metric label{font-size:9px}.consumer-kpis .metric strong{font-size:19px}.consumer-kpis .metric small{font-size:8px;line-height:1.3}.consumer-lower-grid{grid-template-columns:1fr;gap:0}.balance-visual{grid-template-columns:120px 1fr;gap:12px;padding:5px 0}.balance-ring{width:116px;height:116px}.balance-ring:before{inset:12px}.balance-ring-center strong{font-size:21px}.balance-legend{gap:11px}.balance-legend>div{font-size:9px;grid-template-columns:9px 1fr auto;gap:6px}.balance-legend strong{font-size:10px}.money-row{font-size:10px;padding:10px 2px}.money-row strong{font-size:13px}.trend-panel canvas{height:190px}.panel{padding:14px;border-radius:14px}.periods-panel .tablewrap,.history-bucket-panel .tablewrap{overflow-x:auto}.period-table{min-width:650px;font-size:10px}.period-table th,.period-table td{padding:9px 8px}.live-strip{padding:10px;gap:8px}.live-strip>strong{font-size:18px}.live-strip b{font-size:10px}.live-strip small{font-size:8px}.notice{font-size:10px;padding:11px}.app-footer{display:none}.history-summary-kpis{grid-template-columns:repeat(2,1fr)} } @media(max-width:390px){.hero-house{display:none}.hero-copy{max-width:65%}.hero-copy h1{font-size:21px}.consumer-kpis .metric strong{font-size:17px}.balance-visual{grid-template-columns:100px 1fr}.balance-ring{width:100px;height:100px}.balance-ring:before{inset:10px}} /* v0.4.12 – bounded, keyboard-friendly scrolling for long data lists */ .tablewrap, .table-panel, .import-table-wrap, .csv-preview-wrap { max-height: 520px; overflow-x: auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #4f6da8 #101a32; } .import-table-wrap { max-height: 470px; } .csv-preview-wrap { max-height: 310px; } .monthly-list { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #4f6da8 #101a32; padding-right: 5px; } .side-nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .tablewrap thead th, .table-panel thead th { position: sticky; top: 0; z-index: 3; box-shadow: 0 1px 0 #405982; } .tablewrap table, .table-panel table { border-collapse: separate; border-spacing: 0; } @media(max-width:760px) { .tablewrap, .table-panel { max-height: 420px; } .import-table-wrap { max-height: 390px; } .csv-preview-wrap { max-height: 260px; } .monthly-list { max-height: 250px; } } /* v0.4.12 – make long data views explicitly scrollable and paginated */ .side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .history-data-panel { min-height: 0; } .history-table-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 10px; } .history-pagination { display:flex; align-items:center; gap:7px; color:#a9bfdf; font-size:10px; } .history-pagination label { margin:0; white-space:nowrap; } .history-pagination select { padding:6px 8px; font-size:10px; } .history-pagination button { min-width:28px; padding:6px 9px; } .history-table-wrap { max-height:540px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#4f6da8 #101a32; } .history-table-wrap thead th { position:sticky; top:0; z-index:3; } @media(max-width:760px) { .history-table-controls { align-items:flex-start; flex-direction:column; } .history-table-wrap { max-height:420px; } } .period-control{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.period-control>small{font-size:10px;color:#c4cbe0;padding-right:4px;white-space:nowrap} @media(max-width:720px){.period-control{width:100%;align-items:stretch}.period-control>small{white-space:normal;text-align:right}} /* v0.4.14 – solar plant profiles, weather header and consumer tariff layout */ .weather-widget{display:grid;grid-template-columns:46px auto auto;align-items:center;gap:10px;min-width:292px;max-width:355px;padding:9px 12px;border-radius:16px;background:linear-gradient(135deg,#11234fdd,#302f77dd 62%,#51316fdd);border:1px solid #b4c9ff55;box-shadow:0 8px 22px #10113a44;backdrop-filter:blur(10px)} .weather-symbol{font-size:33px;line-height:1;text-align:center;filter:drop-shadow(0 2px 7px #fff5)} .weather-now,.weather-sunshine{display:flex;flex-direction:column;gap:2px;min-width:0} .weather-now strong{font-size:19px;color:#fff;line-height:1.1}.weather-now span{font-size:10px;font-weight:700;color:#e8edff;white-space:nowrap}.weather-now small{font-size:9px;color:#b8c9ed} .weather-sunshine{padding-left:10px;border-left:1px solid #ffffff3a}.weather-sunshine span{font-size:9px;color:#c4d6ff;white-space:nowrap}.weather-sunshine strong{font-size:16px;color:#ffe08a}.weather-sunshine small{font-size:9px;color:#d9e4ff} .solar-assets-panel{margin:14px 0}.solar-assets-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.solar-asset{min-width:0;padding:16px;border-radius:14px;border:1px solid #ffffff1e;box-shadow:inset 0 1px #ffffff14}.solar-main-asset{background:linear-gradient(135deg,#164a74,#1f68a0 70%,#284a93)}.solar-togo-asset{background:linear-gradient(135deg,#4c3b89,#6747b0 68%,#3d4ba4)}.solar-battery-asset{background:linear-gradient(135deg,#075c50,#07816c 70%,#146a77)} .asset-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.asset-chip{font-size:8px;letter-spacing:1.1px;font-weight:900;color:#d4eaff;padding:4px 7px;border-radius:20px;background:#ffffff19}.asset-top strong{font-size:13px;color:#fff}.solar-asset h4{margin:13px 0 6px;font-size:12px;letter-spacing:.6px;color:#fff}.asset-value{font-size:25px;font-weight:900;color:#fff;letter-spacing:-.5px}.solar-asset small{display:block;font-size:9px;line-height:1.45;color:#deebff;margin-top:4px}.asset-footnote{font-size:9px;line-height:1.5;color:#9eb5d9;margin:12px 2px 0} .settings-grid-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.settings-grid-two>div{min-width:0}.settings-panel input{max-width:100%} @media(max-width:900px){.weather-widget{min-width:260px;grid-template-columns:38px auto auto;gap:7px;padding:7px 9px}.weather-symbol{font-size:27px}.weather-now strong{font-size:16px}.weather-sunshine{padding-left:7px}.solar-assets-grid{grid-template-columns:1fr 1fr}.solar-battery-asset{grid-column:1/-1}} @media(max-width:620px){.hero-header{flex-wrap:wrap;align-items:flex-start}.hero-copy{max-width:calc(100% - 8px)}.hero-right{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px}.weather-widget{grid-row:1 / span 2;grid-column:1;min-width:0;max-width:none;grid-template-columns:30px 1fr auto;padding:6px 8px}.weather-symbol{font-size:24px}.weather-now strong{font-size:14px}.weather-now span{font-size:8px;max-width:105px;overflow:hidden;text-overflow:ellipsis}.weather-now small{font-size:8px}.weather-sunshine{padding-left:6px}.weather-sunshine span{font-size:7px}.weather-sunshine strong{font-size:13px}.weather-sunshine small{font-size:8px}.hero-status,.hero-update{justify-self:end}.solar-assets-grid{grid-template-columns:1fr 1fr;gap:7px}.solar-asset{padding:12px}.solar-asset h4{font-size:10px}.asset-value{font-size:20px}.solar-battery-asset{grid-column:1/-1}.settings-grid-two{grid-template-columns:1fr}} /* v0.4.15: compact connection indicator in the upper-left brand area */ .brand-title-row{display:flex;align-items:center;gap:9px;min-height:21px}.connection-dot{display:inline-block;width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:#6b7280;box-shadow:0 0 0 3px #6b728022}.connection-dot.connected{background:#27e49b;box-shadow:0 0 0 3px #27e49b22,0 0 12px #27e49b99}.connection-dot.disconnected{background:#ef6678;box-shadow:0 0 0 3px #ef667822}.brand-copy{min-width:0}.brand-copy strong{white-space:nowrap} /* v0.4.17 – PIN, CAPTCHA and session protection for live reads, history and CSV/IMAP imports */ .operation-progress{position:fixed;top:20px;right:22px;width:min(460px,calc(100vw - 32px));z-index:1200;padding:14px 16px;border:1px solid #536fa8;border-radius:16px;background:linear-gradient(135deg,#111d3aF5,#22285aF5 58%,#3a245dF5);box-shadow:0 16px 46px #02071399,inset 0 1px #ffffff18;backdrop-filter:blur(18px);color:#f4f7ff;transition:opacity .18s ease,transform .18s ease} .operation-progress.hidden{display:none} .operation-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .operation-progress-title{display:flex;align-items:center;gap:9px;min-width:0} .operation-progress-title strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #progressPercent{font-size:15px;color:#80f2c8;font-variant-numeric:tabular-nums;white-space:nowrap} .operation-progress-spinner{width:13px;height:13px;border:2px solid #7c94c566;border-top-color:#49e9b4;border-radius:50%;animation:solar-spin .8s linear infinite;flex:none} @keyframes solar-spin{to{transform:rotate(360deg)}} .operation-progress-track{height:8px;border-radius:99px;background:#07122b;overflow:hidden;border:1px solid #6680b544} .operation-progress-track span{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#19c9ff,#7864ff 55%,#31e5a5);box-shadow:0 0 16px #28dca588;transition:width .22s ease} .operation-progress-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:8px;color:#bdcceb;font-size:10px;line-height:1.35} #progressStage{min-width:0;overflow-wrap:anywhere}#progressCount{white-space:nowrap;color:#8fa8d1;font-variant-numeric:tabular-nums} .dashboard-all-values{margin:14px 0 16px} .dashboard-values-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px} .dashboard-value{min-width:0;padding:13px 14px;border:1px solid #2d426d;border-radius:13px;background:linear-gradient(145deg,#14213e,#111b33);display:flex;flex-direction:column;gap:6px;min-height:96px} .dashboard-value>span{font-size:10px;color:#9fb5d8;line-height:1.3} .dashboard-value>strong{font-size:17px;color:#f6f8ff;line-height:1.2;overflow-wrap:anywhere;font-variant-numeric:tabular-nums} .dashboard-value>small{font-size:9px;color:#7f98bf;line-height:1.35} .dashboard-value.value-solar>strong{color:#ffd36f}.dashboard-value.value-togo>strong{color:#c9a5ff}.dashboard-value.value-battery>strong{color:#89dfce}.dashboard-value.value-self>strong{color:#56efb7}.dashboard-value.value-export>strong{color:#55dcab}.dashboard-value.value-import>strong{color:#75c8ff}.dashboard-value.value-money>strong{color:#61efb9} @media(max-width:1250px){.dashboard-values-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:900px){.dashboard-values-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){.operation-progress{top:8px;left:8px;right:8px;width:auto;padding:11px 13px}.operation-progress-title strong{font-size:11px}.operation-progress-foot{font-size:9px}.dashboard-values-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.dashboard-value{padding:10px;min-height:86px}.dashboard-value>strong{font-size:15px}.dashboard-value>span{font-size:9px}.dashboard-value>small{font-size:8px}} /* Solar Monitor Web v0.5.11 – native offline-app theme adapted to the Webspace markup. */ :root{color-scheme:dark;--bg:#071023;--panel:#111e3b;--panel2:#17284d;--line:#2d4372;--text:#f2f6ff;--muted:#a7b6d5;--blue:#21b8ff;--violet:#a044ff;--green:#19e18a;--amber:#ffad37;--pink:#ff51b9;--red:#ff5577} html,body{min-height:100%;background:#071023;color:#f2f6ff}body{font:14px/1.48 "Segoe UI",Inter,Arial,sans-serif}button,input,select{font:inherit}button{touch-action:manipulation} .app-shell{grid-template-columns:262px minmax(0,1fr);min-height:100vh;max-width:1900px;margin:0 auto;background:#071124} .sidebar{position:sticky;top:0;height:100vh;min-height:100vh;padding:20px 15px 12px;background:linear-gradient(180deg,#0a1730 0%,#0c1b36 56%,#0a1831 100%);border-right:1px solid #2a3d68;box-shadow:9px 0 34px #01071666;z-index:5} .brand{display:flex;align-items:center;gap:13px;padding:1px 4px 25px;border-bottom:1px solid #27395f;margin:0}.logo{width:66px;height:66px;flex:0 0 66px;border-radius:19px;overflow:hidden;box-shadow:0 8px 26px #6b4eff66,0 0 0 1px #b7beff55}.logo img{width:100%;height:100%;display:block}.brand-copy{display:flex;flex-direction:column;line-height:1.2;min-width:0}.brand-copy strong{font-size:17px;letter-spacing:-.3px;color:#fff}.brand-title-row{display:flex;align-items:center;gap:9px}.version-badge{align-self:flex-start;margin-top:7px;padding:4px 10px;border-radius:999px;background:linear-gradient(105deg,#078cda,#7b40f5);color:white;font-size:10px;font-weight:800;box-shadow:0 5px 15px #3159e755} .side-nav{display:flex;flex-direction:column;gap:6px;padding-top:19px;overflow:visible}.nav{display:flex;align-items:center;gap:13px;width:100%;min-height:44px;padding:12px 13px;text-align:left;border-radius:12px;border:1px solid transparent;background:transparent;color:#c0cce5;font-weight:650;font-size:13px;white-space:nowrap;transition:background .18s,transform .18s,color .18s;cursor:pointer}.nav:hover{background:#1d3155;color:white;transform:translateX(2px)}.nav.active{color:#fff;background:linear-gradient(105deg,#078fdc 0%,#165ed2 52%,#3f41c6 100%);border-color:#4db5ff88;box-shadow:0 8px 25px #0868d65c}.nav.import-nav.active{background:linear-gradient(105deg,#8540ed,#4a49d9);box-shadow:0 8px 25px #7b42de55}.nav-icon{width:25px;flex:0 0 25px;text-align:center;font-size:23px;line-height:1;color:#76d6ff;background:transparent;padding:0}.nav.active .nav-icon{color:white;background:transparent} .sidebar-art{margin:auto 7px 10px;padding:13px 8px 8px;border:1px solid #273d67;border-radius:16px;background:linear-gradient(145deg,#10284d,#171c46 75%,#15274a);overflow:hidden}.sidebar-art svg{display:block;width:100%;height:113px}.sidebar-art p{margin:3px 4px 4px;color:#9fb3d4;font-size:12px;line-height:1.45}.sidebar-art b{color:#dbe8ff}.side-foot{color:#849bc0;text-align:center;font-size:10px;padding:5px 0}.version{padding:5px 8px 0;color:#62799e;text-align:center;font-size:10px} .workspace{min-width:0;display:flex;flex-direction:column;min-height:100vh;background:transparent}.hero-header{min-height:156px;position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:21px 27px 20px 30px;overflow:hidden;border-bottom:1px solid #3a4f85;background:linear-gradient(102deg,#1b2d69 0%,#383b97 37%,#7040a4 65%,#a64e9e 100%);isolation:isolate}.hero-header:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(450px 190px at 75% 13%,#ffe69b99,transparent 72%),linear-gradient(0deg,#172349aa 0%,transparent 48%)}.hero-header:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#15285b 0%,#24316a55 42%,transparent 70%)}.hero-copy{position:relative;z-index:2;min-width:0;max-width:58%}.hero-copy .eyebrow{font-size:9px;letter-spacing:2.3px;font-weight:900;color:#9beaff;text-shadow:0 2px 8px #13144c}.hero-copy h1{font-size:clamp(24px,2.2vw,31px);line-height:1.08;letter-spacing:-.8px;margin:7px 0 5px;text-shadow:0 3px 18px #18143e;color:white}.hero-copy p{margin:0;color:#e0eaff;font-size:13px;max-width:620px}.hero-house{position:absolute;right:230px;bottom:-3px;width:min(420px,36vw);height:155px;opacity:.98;filter:drop-shadow(0 12px 18px #08112b80);z-index:1;pointer-events:none}.hero-house svg{width:100%;height:100%}.hero-right{display:flex;flex-direction:column;gap:8px;align-items:flex-end;position:relative;z-index:2;min-width:185px}.hero-status{border-radius:30px;padding:7px 12px;background:#8b1d4c66;border:1px solid #e98dc366;color:#ffe5f4;font-weight:700;font-size:11px;white-space:nowrap}.hero-status.ok{background:#065c496e;border-color:#24e4a088;color:#c8ffeb}.hero-status.bad{background:#8b1d4c66;border-color:#e98dc366;color:#ffe5f4}.weather-summary{padding:0;color:#dceaff;font-size:10px}.hero-update{display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:22px;background:#151f4c99;border:1px solid #a0a9ff55;color:#d9e5ff;font-size:10px}.top-actions{display:flex;gap:7px}.top-actions form{margin:0}.ghost{background:#1a2a4ccc;border:1px solid #47608f;color:#dfeaff;padding:7px 10px;font-size:10px} main{padding:22px 24px 25px;flex:1;min-width:0}.content-head{display:none}.tab-pane{display:block}.period-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(145deg,#152443f2,#101a32 76%,#1c1b42);border:1px solid #344b7b;border-radius:14px;padding:12px 16px;margin-bottom:15px;box-shadow:0 10px 25px #02071770}.period-bar strong{display:block;color:#f1f6ff;font-size:12px}.period-bar small{display:block;color:#8ea4cc;font-size:10px;margin-top:3px}.period-tabs{display:flex;gap:4px;padding:4px;background:#0b1830;border:1px solid #2c416b;border-radius:11px}.period-tabs button{border:1px solid transparent;background:transparent;color:#b8c9e7;padding:8px 13px;border-radius:8px;font-size:10px;font-weight:800}.period-tabs button.active{background:linear-gradient(105deg,#078fdc,#3f41c6);color:white;border-color:#5dbdff88;box-shadow:0 5px 15px #0868d655} .hero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-bottom:15px}.hero-card{color:white;border-radius:17px;padding:22px 23px;min-height:168px;position:relative;overflow:hidden;box-shadow:0 14px 32px #02071770;border:1px solid #5a78b6}.hero-card:after{content:"";position:absolute;width:190px;height:190px;border:1px solid #ffffff23;border-radius:50%;right:-42px;top:31px;box-shadow:0 0 0 24px #ffffff08,0 0 0 48px #ffffff06;pointer-events:none}.export-hero{background:radial-gradient(circle at 90% 15%,#6fbcff52,transparent 29%),linear-gradient(125deg,#173e79,#286ab2)}.save-hero{background:radial-gradient(circle at 90% 12%,#84ffcd3d,transparent 30%),linear-gradient(125deg,#08765e,#1aa37a);border-color:#1bd49c}.card-kicker{font-size:9px;letter-spacing:.14em;font-weight:800;color:#ffffffc9;position:relative;z-index:1}.hero-value{font-size:clamp(34px,3.1vw,46px);font-weight:850;letter-spacing:-.06em;margin:15px 0 6px;position:relative;z-index:1;color:#fff;line-height:1.1}.hero-value small{font-size:16px;letter-spacing:0}.hero-card p{max-width:470px;font-size:11px;line-height:1.55;color:#ffffffce;margin:0;position:relative;z-index:1}.hero-foot{margin-top:13px;color:#ffffffad;font-size:10px;position:relative;z-index:1} .metric-grid{display:grid;gap:13px;margin-bottom:16px}.metric-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.metric-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.metric-card{position:relative;min-width:0;overflow:hidden;background:linear-gradient(145deg,#152443f2,#101a32 76%,#1c1b42);border:1px solid #344b7b;border-radius:16px;padding:17px;box-shadow:0 10px 25px #02071770,inset 0 1px 0 #ffffff0c}.metric-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:#21b8ff}.metric-card.blue:before{background:#21b8ff}.metric-card.green:before{background:#19e18a}.metric-card.purple:before{background:#a044ff}.metric-card.orange:before{background:#ffad37}.metric-card label{display:block;color:#e6edff;font-size:10px;position:relative;z-index:1}.metric-card strong{display:block;font-size:clamp(18px,1.8vw,25px);line-height:1.2;letter-spacing:-.5px;margin:9px 0 4px;color:white;text-shadow:0 2px 14px #0005;position:relative;z-index:1}.metric-card small{color:#aebfe0;font-size:9px;position:relative;z-index:1} .panel{background:linear-gradient(145deg,#152443f2,#101a32 76%,#1c1b42);border:1px solid #344b7b;border-radius:16px;padding:17px;box-shadow:0 10px 25px #02071770,inset 0 1px 0 #ffffff0c;margin-bottom:14px;min-width:0;color:#f2f6ff}.panel h2{font-size:14px;margin:0 0 4px;color:#f4f7ff}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}.panel-head p{color:#bdccef;margin:0;font-size:10px;line-height:1.5}.panel-icon{border-radius:10px;padding:7px 9px;font-size:20px;color:#5ce3ff;background:#07588a55;border:1px solid #27c8ff44}.value-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.value-tile{min-width:0;background:linear-gradient(145deg,#17284b,#111d38);border:1px solid #2d4372;border-radius:12px;padding:12px 13px}.value-tile span{font-size:10px;color:#9db2d7;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.value-tile strong{display:block;font-size:16px;color:#fff;font-weight:800;margin:8px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.value-tile small{font-size:9px;color:#8198bf;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .balance-grid{display:flex;align-items:center;gap:35px;padding:2px 10px 8px}.donut{width:160px;height:160px;border-radius:50%;background:conic-gradient(#19e18a 0deg 0deg,#263b62 0deg 360deg);display:grid;place-items:center;flex:none;position:relative;box-shadow:0 8px 24px #02071788}.donut:before{content:"";position:absolute;inset:16px;border-radius:50%;background:#111e3b}.donut>div{position:relative;text-align:center}.donut strong{font-size:24px;display:block;color:#fff}.donut small{font-size:10px;color:#a7b6d5}.balance-legend{display:grid;gap:16px;min-width:220px}.balance-legend div{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:10px;font-size:11px;color:#a7b6d5}.balance-legend strong{color:#eef5ff;font-size:12px}.dot{width:9px;height:9px;border-radius:50%}.dot.self{background:#19e18a}.dot.export{background:#21b8ff}.dot.import{background:#ffad37}.notice{background:#16294b;color:#a9bfdf;border:1px solid #324d7b;border-radius:11px;padding:12px 14px;font-size:10px;line-height:1.55;margin-top:10px}.notice.warning{background:#503b1b;border-color:#8d6a31;color:#ffe0a2} .inline-form,.upload-form{display:flex;gap:13px;align-items:flex-end;flex-wrap:wrap}.inline-form label,.upload-form label{display:grid;gap:6px;min-width:180px;color:#c3d2ee;font-size:10px;font-weight:750}.inline-form select,.upload-form input,.upload-form select,.form-grid input,.form-grid select{height:43px;border:1px solid #3c527f;border-radius:10px;background:#0c1932;color:#edf4ff;padding:0 12px;min-width:0}.upload-form input[type=file]{height:auto;padding:10px;background:#0c1932}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px}.form-grid label{display:grid;gap:7px;color:#c3d2ee;font-size:11px;font-weight:700;margin:9px 0}.form-grid .wide-field{grid-column:1/-1}.form-action{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.btn,.primary,.secondary,.danger{min-height:40px;border:1px solid transparent;border-radius:10px;padding:10px 15px;font-size:11px;font-weight:800;touch-action:manipulation}.btn.primary,.primary{background:linear-gradient(108deg,#0bbaf4,#405cf2 60%,#a140ee);color:white;box-shadow:0 7px 20px #3158de55}.btn.secondary,.secondary{background:linear-gradient(105deg,#14416a,#3b2b78);border-color:#5878bc;color:#e1edff}.btn.danger,.danger{background:linear-gradient(105deg,#a82e5c,#dc3d58);color:white}.btn.wide{width:100%}.btn:hover,.primary:hover,.secondary:hover,.danger:hover{filter:brightness(1.08)} input,select{color:#edf4ff}input::placeholder{color:#7186ad}.inline-message{font-size:11px;color:#a7b6d5;margin-top:10px;min-height:15px}.inline-message.error{color:#ff9bad}.inline-message.ok{color:#69f2bf}.helper,.privacy-panel p{font-size:10px;line-height:1.65;color:#9db4da}.privacy-panel{background:linear-gradient(145deg,#112b4a,#151c42);border-color:#34517d}.privacy-panel h2{color:#eaf3ff}.privacy-panel strong{color:#fff}.table-wrap{overflow:auto;border:1px solid #293f69;border-radius:11px}table{width:100%;border-collapse:collapse;font-size:10px}th{text-align:left;color:#adc3e8;font-weight:750;background:#1c2b4c;white-space:nowrap;font-size:9px;text-transform:uppercase}td,th{padding:10px 11px;border-bottom:1px solid #25395e}td{color:#dce7fc;font-variant-numeric:tabular-nums}tr:hover td{background:#29406b32}.table-delete{border-radius:9px;padding:7px 10px;font-size:9px;background:#762c4b;color:#ffb4ca}.count-pill{border:1px solid #526da4;background:#1b315a;border-radius:30px;padding:6px 10px;color:#dce9ff;font-size:10px;white-space:nowrap}.app-footer{display:flex;align-items:center;justify-content:space-between;gap:13px;flex-wrap:wrap;padding:13px 24px;border-top:1px solid #2e416d;background:#09172d;color:#90a8cd;font-size:10px}.app-footer>span{display:flex;align-items:center;gap:7px}.footer-dot{width:8px;height:8px;border-radius:50%;background:#25e49a;box-shadow:0 0 9px #23e49a} /* Login / first-run screen mirrors the offline companion's split-screen design. */ .auth-body{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 8% 0%,#284e9c 0,transparent 34%),radial-gradient(ellipse at 100% 25%,#552b83 0,transparent 30%),#081329;color:#f4f7ff}.auth-shell{width:min(100%,1000px);min-height:620px;display:grid;grid-template-columns:1fr 1fr;background:#101f3a;border:1px solid #263a5c;border-radius:28px;overflow:hidden;box-shadow:0 28px 90px #0008}.auth-card{padding:42px 48px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,#101f3a,#111d36)}.auth-brand{display:flex;align-items:center;gap:13px;margin-bottom:30px}.auth-brand img{width:48px;height:48px;filter:drop-shadow(0 7px 17px #6b4eff66)}.auth-brand strong,.auth-brand small{display:block}.auth-brand strong{font-size:20px;letter-spacing:.2px;color:white}.auth-brand small{color:#8ea5c9;font-size:9px;letter-spacing:1.7px;margin-top:3px}.auth-card .eyebrow{color:#65d8c0;font-size:10px;font-weight:800;letter-spacing:2px}.auth-card h1{font-size:32px;line-height:1.1;margin:10px 0;color:white;letter-spacing:-.8px}.auth-card .intro{color:#a7b6ce;margin:0 0 17px;font-size:12px;line-height:1.55}.auth-form{display:flex;flex-direction:column;gap:0}.auth-card .field{margin:7px 0 10px}.auth-card .field label,.captcha-head label{display:block;color:#c7d4e8;font-size:11px;font-weight:700;margin:0 0 7px}.auth-card .field input{display:block;width:100%;height:48px;border:1px solid #344968;background:#0b1830;color:white;border-radius:11px;padding:0 14px;outline:none;font-size:17px;letter-spacing:2px;appearance:none;-webkit-appearance:none;touch-action:manipulation}.auth-card .field input:focus{border-color:#46c9dc;box-shadow:0 0 0 3px #46c9dc20}.captcha-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.captcha-hint{color:#7189ae;font-size:9px}.captcha-box{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:9px}.captcha-question{height:48px;border:1px solid #2d4365;border-radius:10px;background:#0a172c;color:#bdeaff;display:grid;place-items:center;font-size:20px;font-weight:800;letter-spacing:1px}.captcha-box input{text-align:center;font-size:18px;letter-spacing:2px}.auth-submit{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:50px;margin-top:12px;border:0;border-radius:12px;background:linear-gradient(100deg,#16a6c5,#7161ed 65%,#31cda0);color:#fff;font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 8px 24px #347ddc35;padding:0 17px}.auth-submit:disabled{opacity:.65;cursor:wait}.auth-message{padding:11px 13px;border-radius:11px;margin:0 0 11px;font-size:11px;line-height:1.45}.auth-message.error{background:#5a263b;border:1px solid #a44765;color:#ffd2dd}.auth-help{display:block;color:#8ca2c4;font-size:10px;line-height:1.45;margin-top:7px}.security-note{display:flex;align-items:flex-start;gap:9px;color:#8297b5;font-size:10px;line-height:1.5;margin-top:18px}.secure-dot{width:8px;height:8px;border-radius:50%;background:#35d69a;box-shadow:0 0 12px #35d69a;flex:none;margin-top:4px}.auth-card footer{color:#627997;font-size:10px;margin-top:19px}.visual{position:relative;overflow:hidden;background:radial-gradient(circle at 72% 22%,#344f93 0,#182d58 30%,#0d1d3a 66%,#09162d 100%);display:flex;align-items:center;padding:48px}.visual:after{content:"";position:absolute;width:450px;height:450px;border:1px solid #79b6e522;border-radius:50%;right:-170px;top:90px;box-shadow:0 0 0 45px #79b6e509,0 0 0 95px #79b6e506}.orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-a{width:240px;height:240px;right:20px;top:90px;background:radial-gradient(circle,#43d6c34d,transparent 70%)}.orb-b{width:180px;height:180px;left:-90px;bottom:30px;background:radial-gradient(circle,#846bff44,transparent 70%)}.visual-content{position:relative;z-index:1}.auth-visual-logo{width:58px;height:58px;display:block;margin-bottom:25px;filter:drop-shadow(0 0 20px #ffc85c77)}.visual-content>span{font-size:10px;letter-spacing:2px;color:#79d9d2;font-weight:800}.visual h2{font-size:39px;line-height:1.12;letter-spacing:-1px;margin:13px 0;color:white}.visual p{color:#aabbd8;max-width:320px;font-size:13px;line-height:1.6}.visual-stats{display:flex;gap:22px;margin-top:40px;flex-wrap:wrap}.visual-stats b{display:block;color:#eaf7ff;font-size:11px;letter-spacing:1px}.visual-stats small{display:block;color:#829bbd;font-size:9px;margin-top:3px} @media(max-width:1280px){.app-shell{grid-template-columns:228px minmax(0,1fr)}.hero-house{right:190px;width:32vw}} @media(max-width:900px){.app-shell{grid-template-columns:76px minmax(0,1fr)}.sidebar{padding:14px 8px}.brand{justify-content:center;padding:3px 0 16px}.logo{width:50px;height:50px;flex-basis:50px}.brand-copy,.nav:not(.sub){font-size:0}.side-nav .nav:not(.sub){justify-content:center;padding:12px 5px}.nav-icon{font-size:22px;flex:0 0 auto}.sidebar-art,.side-foot,.version{display:none}.hero-header{padding:17px 20px}.hero-house{right:160px;width:32vw}main{padding:17px 16px}.value-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.hero-header{min-height:136px;align-items:flex-start;flex-wrap:wrap;padding:15px 14px 13px}.hero-copy{max-width:100%;min-width:0;width:100%;padding-right:0}.hero-copy h1{font-size:23px}.hero-copy p{font-size:10px;max-width:250px}.hero-house{right:85px;width:170px;height:100px;opacity:.42}.hero-right{width:100%;min-width:0;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;gap:5px}.hero-status{justify-self:start;font-size:9px;padding:6px 9px}.weather-summary{grid-column:1;grid-row:2;font-size:9px}.hero-update{grid-column:2;grid-row:1;font-size:8px;padding:5px 8px}.top-actions{grid-column:2;grid-row:2;justify-self:end}.top-actions .ghost{min-height:32px;padding:6px 9px;font-size:9px}.app-shell{grid-template-columns:1fr}.sidebar{position:sticky;top:0;width:100%;height:auto;min-height:0;display:block;padding:7px 10px;border-right:0;border-bottom:1px solid #2d4372;background:linear-gradient(90deg,#0a1730,#101f40);box-shadow:0 7px 20px #01071677}.brand{display:none}.side-nav{display:flex;flex-direction:row;gap:5px;padding:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}.side-nav .nav:not(.sub){width:auto;flex:0 0 auto;justify-content:center;font-size:10px;padding:9px 11px;white-space:nowrap;min-height:38px}.nav-icon{font-size:16px;width:auto;flex:0 0 auto}.nav-spacer{display:none}.sidebar-art,.side-foot,.version{display:none}.workspace{min-height:calc(100vh - 54px)}main{padding:12px 10px 18px}.period-bar{padding:11px 10px;gap:8px;flex-wrap:wrap}.period-tabs{width:100%;justify-content:space-between}.period-tabs button{flex:1;padding:8px 4px;font-size:9px}.hero-grid{grid-template-columns:1fr;gap:8px}.hero-card{min-height:136px;padding:16px 17px;border-radius:15px}.hero-value{font-size:33px;margin:11px 0 4px}.hero-card p{font-size:10px}.metric-grid{gap:8px}.metric-grid.four,.metric-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-card{padding:13px 12px;border-radius:13px}.metric-card label{font-size:9px}.metric-card strong{font-size:17px}.metric-card small{font-size:8px}.panel{padding:13px;border-radius:14px;margin-bottom:10px}.panel h2{font-size:13px}.panel-head{align-items:flex-start}.value-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.value-tile{padding:9px 8px}.value-tile span{font-size:8px}.value-tile strong{font-size:12px;margin:6px 0 3px}.value-tile small{font-size:8px}.balance-grid{gap:12px;padding:0;flex-wrap:wrap}.donut{width:120px;height:120px}.donut:before{inset:12px}.balance-legend{min-width:140px;gap:10px}.balance-legend div{font-size:9px;gap:7px}.balance-legend strong{font-size:10px}.form-grid{grid-template-columns:1fr;gap:0}.form-grid .wide-field{grid-column:auto}.form-action{flex-wrap:wrap}.form-action .btn{flex:1 1 auto}.inline-form,.upload-form{align-items:stretch;flex-direction:column}.inline-form label,.upload-form label{min-width:0;width:100%}.inline-form .btn,.upload-form .btn{width:100%}.app-footer{padding:11px 10px;font-size:9px;gap:7px}.app-footer>span{font-size:8px}} @media(max-width:390px){.side-nav .nav:not(.sub){padding:8px 9px;font-size:9px;gap:6px}.hero-copy h1{font-size:21px}.hero-house{right:45px;width:145px}.captcha-box{grid-template-columns:minmax(0,1fr) 96px}} @media(max-width:760px){.auth-body{display:block;padding:0;background:#101f3a;min-height:100dvh}.auth-shell{min-height:100vh;min-height:100dvh;width:100%;display:block;border:0;border-radius:0}.auth-card{min-height:100vh;min-height:100dvh;padding:calc(25px + env(safe-area-inset-top)) 24px calc(22px + env(safe-area-inset-bottom));justify-content:center}.auth-brand{margin-bottom:25px}.auth-card h1{font-size:29px}.auth-card .field input{font-size:18px;min-height:50px}.captcha-question{height:50px}.captcha-box input{height:50px}.auth-submit{min-height:54px;margin-top:17px}.visual{display:none}.security-note{margin-top:19px}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} /* v0.5.11 – compact dashboard and less blocking initial load */ .dashboard-details{margin:0 0 14px;border:1px solid #2c416d;border-radius:15px;background:linear-gradient(145deg,#111e3b,#101a34);overflow:hidden;box-shadow:0 10px 28px #01071645} .dashboard-details>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;padding:12px 15px;cursor:pointer;color:#eef5ff;font-weight:800;user-select:none} .dashboard-details>summary::-webkit-details-marker{display:none} .dashboard-details>summary>span:first-child{font-size:13px} .dashboard-details>summary>small{margin-left:auto;color:#91a8cf;font-size:10px;font-weight:500;text-align:right} .dashboard-details .details-chevron{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#1b3157;color:#91dfff;font-size:17px;transition:transform .18s} .dashboard-details[open]>summary{border-bottom:1px solid #2c416d;background:#142447} .dashboard-details[open] .details-chevron{transform:rotate(180deg)} .dashboard-details-content{padding:12px;display:grid;gap:10px} .dashboard-details-content>.panel{margin:0} @media(max-width:760px){ .dashboard-details{margin-top:9px;margin-bottom:12px} .dashboard-details>summary{min-height:44px;padding:10px 12px;gap:7px} .dashboard-details>summary>span:first-child{font-size:12px} .dashboard-details>summary>small{font-size:8px;max-width:46%;line-height:1.25} .dashboard-details-content{padding:8px;gap:8px} .hero-header{min-height:0;padding:11px 12px 9px;align-items:center;gap:8px} .hero-copy{max-width:none;width:auto;min-width:0;flex:1} .hero-copy h1{font-size:18px;line-height:1.2;margin:3px 0} .hero-copy p{display:none} .hero-copy .eyebrow{font-size:8px;letter-spacing:1.2px} .hero-house{display:none} .hero-right{min-width:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px} .hero-status{font-size:8px;padding:4px 7px;white-space:nowrap} .weather-summary{display:none} .hero-update{font-size:8px;padding:3px 6px;white-space:nowrap} .top-actions{display:flex;gap:4px} .top-actions .ghost{font-size:8px;min-height:26px;padding:4px 7px} .period-bar{padding:8px 9px;margin-bottom:8px;gap:5px;min-height:0} .period-bar>div:first-child strong{font-size:10px} .period-bar>div:first-child small{font-size:9px} .period-tabs{gap:3px} .period-tabs button{font-size:9px;padding:7px 3px;min-height:32px} .hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:8px} .hero-card{min-width:0;min-height:104px;padding:11px 10px;border-radius:12px} .card-kicker{font-size:7px;line-height:1.25;letter-spacing:.45px} .hero-value{font-size:23px;line-height:1.12;margin:10px 0 0;white-space:nowrap} .hero-value small{font-size:11px} .hero-card p,.hero-card .hero-foot{display:none} .metric-grid{gap:7px;margin-bottom:9px} .metric-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))} .metric-card{min-width:0;min-height:82px;padding:10px;border-radius:11px} .metric-card label{font-size:8px;line-height:1.25} .metric-card strong{display:block;font-size:16px;line-height:1.2;margin:6px 0 3px;overflow-wrap:anywhere} .metric-card small{font-size:8px;line-height:1.2} main{padding:9px 9px calc(12px + env(safe-area-inset-bottom))} .sidebar{padding-top:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom))} .side-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px} .nav{min-height:44px;font-size:9px} .workspace{padding-bottom:66px} } @media(max-width:390px){ .hero-copy h1{font-size:16px} .hero-card{min-height:96px;padding:9px} .hero-value{font-size:20px} .metric-card{padding:8px;min-height:78px} .metric-card strong{font-size:14px} .period-tabs button{font-size:8px} } /* v0.5.11 – three phase output and full-history navigation */ .phase-legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:8px 0 2px;color:#a9bad3;font-size:11px} .phase-legend-item{display:inline-flex;align-items:center;gap:7px} .phase-legend-item i{width:9px;height:9px;border-radius:50%;display:inline-block} .balance-legend{grid-template-columns:1fr;gap:10px} .dot.pv{background:#f2bd4f}.dot.household{background:#9b7de8}.dot.savings{background:#19c99a} .history-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;color:#a9bad3;font-size:11px} .history-pagination .btn{min-width:76px} @media(max-width:760px){.metric-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.history-pagination{position:sticky;bottom:0;background:#101d37;padding:10px 4px;z-index:2}.phase-legend{gap:10px}} /* v0.5.11: CSS-class based phase colors; no inline style mutations required by CSP. */ .phase-legend-item i.phase-color.power1{background:#3676e8}.phase-legend-item i.phase-color.power2{background:#19b987}.phase-legend-item i.phase-color.power3{background:#a56bea} .donut.donut-pct-0{background:conic-gradient(#159b73 0deg 0.0deg,#3875e8 0.0deg 360deg)} .donut.donut-pct-1{background:conic-gradient(#159b73 0deg 3.6deg,#3875e8 3.6deg 360deg)} .donut.donut-pct-2{background:conic-gradient(#159b73 0deg 7.2deg,#3875e8 7.2deg 360deg)} .donut.donut-pct-3{background:conic-gradient(#159b73 0deg 10.8deg,#3875e8 10.8deg 360deg)} .donut.donut-pct-4{background:conic-gradient(#159b73 0deg 14.4deg,#3875e8 14.4deg 360deg)} .donut.donut-pct-5{background:conic-gradient(#159b73 0deg 18.0deg,#3875e8 18.0deg 360deg)} .donut.donut-pct-6{background:conic-gradient(#159b73 0deg 21.6deg,#3875e8 21.6deg 360deg)} .donut.donut-pct-7{background:conic-gradient(#159b73 0deg 25.2deg,#3875e8 25.2deg 360deg)} .donut.donut-pct-8{background:conic-gradient(#159b73 0deg 28.8deg,#3875e8 28.8deg 360deg)} .donut.donut-pct-9{background:conic-gradient(#159b73 0deg 32.4deg,#3875e8 32.4deg 360deg)} .donut.donut-pct-10{background:conic-gradient(#159b73 0deg 36.0deg,#3875e8 36.0deg 360deg)} .donut.donut-pct-11{background:conic-gradient(#159b73 0deg 39.6deg,#3875e8 39.6deg 360deg)} .donut.donut-pct-12{background:conic-gradient(#159b73 0deg 43.2deg,#3875e8 43.2deg 360deg)} .donut.donut-pct-13{background:conic-gradient(#159b73 0deg 46.8deg,#3875e8 46.8deg 360deg)} .donut.donut-pct-14{background:conic-gradient(#159b73 0deg 50.4deg,#3875e8 50.4deg 360deg)} .donut.donut-pct-15{background:conic-gradient(#159b73 0deg 54.0deg,#3875e8 54.0deg 360deg)} .donut.donut-pct-16{background:conic-gradient(#159b73 0deg 57.6deg,#3875e8 57.6deg 360deg)} .donut.donut-pct-17{background:conic-gradient(#159b73 0deg 61.2deg,#3875e8 61.2deg 360deg)} .donut.donut-pct-18{background:conic-gradient(#159b73 0deg 64.8deg,#3875e8 64.8deg 360deg)} .donut.donut-pct-19{background:conic-gradient(#159b73 0deg 68.4deg,#3875e8 68.4deg 360deg)} .donut.donut-pct-20{background:conic-gradient(#159b73 0deg 72.0deg,#3875e8 72.0deg 360deg)} .donut.donut-pct-21{background:conic-gradient(#159b73 0deg 75.6deg,#3875e8 75.6deg 360deg)} .donut.donut-pct-22{background:conic-gradient(#159b73 0deg 79.2deg,#3875e8 79.2deg 360deg)} .donut.donut-pct-23{background:conic-gradient(#159b73 0deg 82.8deg,#3875e8 82.8deg 360deg)} .donut.donut-pct-24{background:conic-gradient(#159b73 0deg 86.4deg,#3875e8 86.4deg 360deg)} .donut.donut-pct-25{background:conic-gradient(#159b73 0deg 90.0deg,#3875e8 90.0deg 360deg)} .donut.donut-pct-26{background:conic-gradient(#159b73 0deg 93.6deg,#3875e8 93.6deg 360deg)} .donut.donut-pct-27{background:conic-gradient(#159b73 0deg 97.2deg,#3875e8 97.2deg 360deg)} .donut.donut-pct-28{background:conic-gradient(#159b73 0deg 100.8deg,#3875e8 100.8deg 360deg)} .donut.donut-pct-29{background:conic-gradient(#159b73 0deg 104.4deg,#3875e8 104.4deg 360deg)} .donut.donut-pct-30{background:conic-gradient(#159b73 0deg 108.0deg,#3875e8 108.0deg 360deg)} .donut.donut-pct-31{background:conic-gradient(#159b73 0deg 111.6deg,#3875e8 111.6deg 360deg)} .donut.donut-pct-32{background:conic-gradient(#159b73 0deg 115.2deg,#3875e8 115.2deg 360deg)} .donut.donut-pct-33{background:conic-gradient(#159b73 0deg 118.8deg,#3875e8 118.8deg 360deg)} .donut.donut-pct-34{background:conic-gradient(#159b73 0deg 122.4deg,#3875e8 122.4deg 360deg)} .donut.donut-pct-35{background:conic-gradient(#159b73 0deg 126.0deg,#3875e8 126.0deg 360deg)} .donut.donut-pct-36{background:conic-gradient(#159b73 0deg 129.6deg,#3875e8 129.6deg 360deg)} .donut.donut-pct-37{background:conic-gradient(#159b73 0deg 133.2deg,#3875e8 133.2deg 360deg)} .donut.donut-pct-38{background:conic-gradient(#159b73 0deg 136.8deg,#3875e8 136.8deg 360deg)} .donut.donut-pct-39{background:conic-gradient(#159b73 0deg 140.4deg,#3875e8 140.4deg 360deg)} .donut.donut-pct-40{background:conic-gradient(#159b73 0deg 144.0deg,#3875e8 144.0deg 360deg)} .donut.donut-pct-41{background:conic-gradient(#159b73 0deg 147.6deg,#3875e8 147.6deg 360deg)} .donut.donut-pct-42{background:conic-gradient(#159b73 0deg 151.2deg,#3875e8 151.2deg 360deg)} .donut.donut-pct-43{background:conic-gradient(#159b73 0deg 154.8deg,#3875e8 154.8deg 360deg)} .donut.donut-pct-44{background:conic-gradient(#159b73 0deg 158.4deg,#3875e8 158.4deg 360deg)} .donut.donut-pct-45{background:conic-gradient(#159b73 0deg 162.0deg,#3875e8 162.0deg 360deg)} .donut.donut-pct-46{background:conic-gradient(#159b73 0deg 165.6deg,#3875e8 165.6deg 360deg)} .donut.donut-pct-47{background:conic-gradient(#159b73 0deg 169.2deg,#3875e8 169.2deg 360deg)} .donut.donut-pct-48{background:conic-gradient(#159b73 0deg 172.8deg,#3875e8 172.8deg 360deg)} .donut.donut-pct-49{background:conic-gradient(#159b73 0deg 176.4deg,#3875e8 176.4deg 360deg)} .donut.donut-pct-50{background:conic-gradient(#159b73 0deg 180.0deg,#3875e8 180.0deg 360deg)} .donut.donut-pct-51{background:conic-gradient(#159b73 0deg 183.6deg,#3875e8 183.6deg 360deg)} .donut.donut-pct-52{background:conic-gradient(#159b73 0deg 187.2deg,#3875e8 187.2deg 360deg)} .donut.donut-pct-53{background:conic-gradient(#159b73 0deg 190.8deg,#3875e8 190.8deg 360deg)} .donut.donut-pct-54{background:conic-gradient(#159b73 0deg 194.4deg,#3875e8 194.4deg 360deg)} .donut.donut-pct-55{background:conic-gradient(#159b73 0deg 198.0deg,#3875e8 198.0deg 360deg)} .donut.donut-pct-56{background:conic-gradient(#159b73 0deg 201.6deg,#3875e8 201.6deg 360deg)} .donut.donut-pct-57{background:conic-gradient(#159b73 0deg 205.2deg,#3875e8 205.2deg 360deg)} .donut.donut-pct-58{background:conic-gradient(#159b73 0deg 208.8deg,#3875e8 208.8deg 360deg)} .donut.donut-pct-59{background:conic-gradient(#159b73 0deg 212.4deg,#3875e8 212.4deg 360deg)} .donut.donut-pct-60{background:conic-gradient(#159b73 0deg 216.0deg,#3875e8 216.0deg 360deg)} .donut.donut-pct-61{background:conic-gradient(#159b73 0deg 219.6deg,#3875e8 219.6deg 360deg)} .donut.donut-pct-62{background:conic-gradient(#159b73 0deg 223.2deg,#3875e8 223.2deg 360deg)} .donut.donut-pct-63{background:conic-gradient(#159b73 0deg 226.8deg,#3875e8 226.8deg 360deg)} .donut.donut-pct-64{background:conic-gradient(#159b73 0deg 230.4deg,#3875e8 230.4deg 360deg)} .donut.donut-pct-65{background:conic-gradient(#159b73 0deg 234.0deg,#3875e8 234.0deg 360deg)} .donut.donut-pct-66{background:conic-gradient(#159b73 0deg 237.6deg,#3875e8 237.6deg 360deg)} .donut.donut-pct-67{background:conic-gradient(#159b73 0deg 241.2deg,#3875e8 241.2deg 360deg)} .donut.donut-pct-68{background:conic-gradient(#159b73 0deg 244.8deg,#3875e8 244.8deg 360deg)} .donut.donut-pct-69{background:conic-gradient(#159b73 0deg 248.4deg,#3875e8 248.4deg 360deg)} .donut.donut-pct-70{background:conic-gradient(#159b73 0deg 252.0deg,#3875e8 252.0deg 360deg)} .donut.donut-pct-71{background:conic-gradient(#159b73 0deg 255.6deg,#3875e8 255.6deg 360deg)} .donut.donut-pct-72{background:conic-gradient(#159b73 0deg 259.2deg,#3875e8 259.2deg 360deg)} .donut.donut-pct-73{background:conic-gradient(#159b73 0deg 262.8deg,#3875e8 262.8deg 360deg)} .donut.donut-pct-74{background:conic-gradient(#159b73 0deg 266.4deg,#3875e8 266.4deg 360deg)} .donut.donut-pct-75{background:conic-gradient(#159b73 0deg 270.0deg,#3875e8 270.0deg 360deg)} .donut.donut-pct-76{background:conic-gradient(#159b73 0deg 273.6deg,#3875e8 273.6deg 360deg)} .donut.donut-pct-77{background:conic-gradient(#159b73 0deg 277.2deg,#3875e8 277.2deg 360deg)} .donut.donut-pct-78{background:conic-gradient(#159b73 0deg 280.8deg,#3875e8 280.8deg 360deg)} .donut.donut-pct-79{background:conic-gradient(#159b73 0deg 284.4deg,#3875e8 284.4deg 360deg)} .donut.donut-pct-80{background:conic-gradient(#159b73 0deg 288.0deg,#3875e8 288.0deg 360deg)} .donut.donut-pct-81{background:conic-gradient(#159b73 0deg 291.6deg,#3875e8 291.6deg 360deg)} .donut.donut-pct-82{background:conic-gradient(#159b73 0deg 295.2deg,#3875e8 295.2deg 360deg)} .donut.donut-pct-83{background:conic-gradient(#159b73 0deg 298.8deg,#3875e8 298.8deg 360deg)} .donut.donut-pct-84{background:conic-gradient(#159b73 0deg 302.4deg,#3875e8 302.4deg 360deg)} .donut.donut-pct-85{background:conic-gradient(#159b73 0deg 306.0deg,#3875e8 306.0deg 360deg)} .donut.donut-pct-86{background:conic-gradient(#159b73 0deg 309.6deg,#3875e8 309.6deg 360deg)} .donut.donut-pct-87{background:conic-gradient(#159b73 0deg 313.2deg,#3875e8 313.2deg 360deg)} .donut.donut-pct-88{background:conic-gradient(#159b73 0deg 316.8deg,#3875e8 316.8deg 360deg)} .donut.donut-pct-89{background:conic-gradient(#159b73 0deg 320.4deg,#3875e8 320.4deg 360deg)} .donut.donut-pct-90{background:conic-gradient(#159b73 0deg 324.0deg,#3875e8 324.0deg 360deg)} .donut.donut-pct-91{background:conic-gradient(#159b73 0deg 327.6deg,#3875e8 327.6deg 360deg)} .donut.donut-pct-92{background:conic-gradient(#159b73 0deg 331.2deg,#3875e8 331.2deg 360deg)} .donut.donut-pct-93{background:conic-gradient(#159b73 0deg 334.8deg,#3875e8 334.8deg 360deg)} .donut.donut-pct-94{background:conic-gradient(#159b73 0deg 338.4deg,#3875e8 338.4deg 360deg)} .donut.donut-pct-95{background:conic-gradient(#159b73 0deg 342.0deg,#3875e8 342.0deg 360deg)} .donut.donut-pct-96{background:conic-gradient(#159b73 0deg 345.6deg,#3875e8 345.6deg 360deg)} .donut.donut-pct-97{background:conic-gradient(#159b73 0deg 349.2deg,#3875e8 349.2deg 360deg)} .donut.donut-pct-98{background:conic-gradient(#159b73 0deg 352.8deg,#3875e8 352.8deg 360deg)} .donut.donut-pct-99{background:conic-gradient(#159b73 0deg 356.4deg,#3875e8 356.4deg 360deg)} .donut.donut-pct-100{background:conic-gradient(#159b73 0deg 360.0deg,#3875e8 360.0deg 360deg)} .donut.donut-pct-na{background:conic-gradient(#d9e2ef 0deg 360deg)} /* v0.5.11: PV yield is the dashboard's primary headline metric. Grid/export metrics remain in the secondary KPI row below it. */ .hero-grid.pv-first-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.85fr);grid-auto-flow:row;align-items:stretch} .hero-grid.pv-first-grid>.pv-hero{order:-2;grid-column:1;grid-row:1;min-height:182px} .hero-grid.pv-first-grid>.save-hero{order:-1;grid-column:2;grid-row:1} .hero-grid.pv-first-grid .pv-hero .card-kicker{font-size:11px;letter-spacing:1.1px} .hero-grid.pv-first-grid .pv-hero .hero-value{font-size:clamp(38px,4vw,54px);font-weight:850} .hero-grid.pv-first-grid .pv-hero{background:radial-gradient(circle at 88% 12%,#6ee7ff38,transparent 31%),linear-gradient(125deg,#075c9e,#1459a5 58%,#373b99);border-color:#35c4ff} @media(max-width:760px){.hero-grid.pv-first-grid{grid-template-columns:minmax(0,1fr);gap:8px}.hero-grid.pv-first-grid>.pv-hero{grid-column:1;grid-row:1;min-height:142px}.hero-grid.pv-first-grid>.save-hero{grid-column:1;grid-row:2;min-height:112px}.hero-grid.pv-first-grid .pv-hero .hero-value{font-size:36px}} /* v0.5.12 – mobile quick glance and responsive data lists */ @media(max-width:760px){ .weather-summary{display:none} .side-nav{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;overflow:visible!important;min-width:0} .side-nav .nav:not(.sub){min-width:0;width:100%;padding:7px 2px;white-space:normal;line-height:1.15;font-size:8px;gap:3px;overflow-wrap:anywhere;min-height:46px} .side-nav .nav-icon{font-size:17px;line-height:1.1} .table-wrap{max-width:100%;overflow:visible!important;border:0;border-radius:0} .table-wrap table{display:block;width:100%;min-width:0!important;table-layout:fixed;border-collapse:separate;border-spacing:0} .table-wrap thead{display:none} .table-wrap tbody{display:grid;gap:8px;width:100%} .table-wrap tbody tr{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;padding:5px 9px;border:1px solid #2d456f;border-radius:11px;background:linear-gradient(145deg,#132443,#0e1a32);overflow:hidden} .table-wrap tbody tr:hover td{background:transparent} .table-wrap tbody td{display:grid;grid-template-columns:minmax(92px,38%) minmax(0,1fr);align-items:start;gap:8px;min-width:0;width:100%;padding:7px 1px;border-bottom:1px solid #263c61;white-space:normal;overflow-wrap:anywhere;word-break:break-word;font-size:9px;line-height:1.35;text-align:right} .table-wrap tbody td:last-child{border-bottom:0} .table-wrap tbody td::before{content:attr(data-label);color:#8da7ce;font-size:8px;font-weight:700;text-align:left;overflow-wrap:anywhere} .table-wrap tbody td[colspan]{display:block;text-align:left;padding:10px} .table-wrap tbody td[colspan]::before{content:none} .table-wrap tbody td .table-delete{justify-self:end;max-width:100%} .history-pagination{display:flex;gap:5px;align-items:center;justify-content:space-between;flex-wrap:wrap} .history-pagination button{font-size:8px;padding:7px 9px} .history-pagination span{font-size:8px;flex:1;text-align:center;min-width:100px} } @media(max-width:380px){ .side-nav .nav:not(.sub){font-size:7px} } /* v0.5.13 – mobile Versionsanzeige bleibt sichtbar, auch wenn die Seitenleiste ausgeblendet ist. */ .mobile-version-badge{display:none} @media(max-width:760px){ .mobile-version-badge{display:inline-flex;align-items:center;justify-content:center;width:max-content;margin-top:7px;padding:3px 9px;border:1px solid #9ed7ff66;border-radius:999px;background:linear-gradient(105deg,#087fc5dd,#6e40d8dd);color:#fff;font-size:9px;font-weight:850;letter-spacing:.35px;line-height:1.4;box-shadow:0 4px 12px #172b7655} .hero-header{min-height:132px} } @media(max-width:380px){.mobile-version-badge{margin-top:6px;padding:2px 8px;font-size:8px}} /* v0.5.15 – charts use a fixed CSS size and a separate high-DPI backing store. */ .phase-chart{display:block;width:100%;height:300px;max-width:100%;min-width:0;box-sizing:border-box;touch-action:pan-y} .dashboard-live-panel{margin-top:10px} .dashboard-live-head{align-items:center} .dashboard-live-head p{color:#7de2c0;font-weight:750;font-size:12px;margin-top:4px} .phase-legend-item .phase-color.power{background:#55b8ff} @media(max-width:760px){ .dashboard-live-panel{padding:11px 10px;margin:8px 0 10px} .dashboard-live-head{gap:6px;margin-bottom:8px} .dashboard-live-head p{font-size:10px} #dashboardLiveChart{height:210px} .phase-legend{gap:9px;font-size:9px} } @media(max-width:390px){#dashboardLiveChart{height:190px}} /* v0.5.15 – compact mobile header; keep Dashboard and live chart in focus. */ @media(max-width:760px){ .hero-header{min-height:0;padding:8px 10px 7px;gap:6px} .hero-copy .eyebrow{display:none} .hero-copy h1{font-size:17px;line-height:1.15;margin:0} .mobile-version-badge{margin-top:3px;padding:2px 7px;font-size:8px;line-height:1.25} .hero-right{gap:4px;align-items:center;flex-wrap:wrap} .hero-status{font-size:7px;padding:3px 6px;line-height:1.2} .hero-update{font-size:7px;line-height:1.2} .top-actions{gap:4px} .top-actions .btn{min-height:25px;padding:4px 7px;font-size:8px} .dashboard-live-panel{scroll-margin-top:8px} } @media(max-width:390px){ .hero-header{padding:7px 8px 6px;gap:4px} .hero-copy h1{font-size:15px} .hero-update{display:none} .dashboard-live-head{align-items:flex-start} } /* v0.5.15 – compact total active power row below the three phase readings. */ /* v0.5.16: installation offer and dashboard/live parity */ .install-offer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px;padding:13px 16px;border:1px solid #5275b6;border-radius:14px;background:linear-gradient(105deg,#123b65,#26346f 58%,#4a2874);box-shadow:0 8px 22px #02071755} .install-offer[hidden]{display:none!important}.install-offer strong{display:block;color:#fff;font-size:13px}.install-offer p{margin:3px 0 0;color:#c8d8f5;font-size:10px}.install-offer-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.install-offer-actions .btn{padding:8px 12px;font-size:10px}.install-offer-actions .btn:disabled{opacity:.65;cursor:default}.install-dismiss{padding:3px 8px;background:#ffffff18;border:1px solid #ffffff35;color:#eaf2ff;font-size:18px;line-height:1} @media(max-width:620px){.install-offer{align-items:flex-start;padding:10px;gap:8px}.install-offer strong{font-size:11px}.install-offer p{font-size:9px}.install-offer-actions{gap:5px}.install-offer-actions .btn{padding:7px 8px;font-size:9px}.dashboard-phase-metrics{margin-top:8px}} /* v0.5.17 – compact dashboard: one live-value group and smaller headline KPIs. */ .hero-grid.pv-first-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px} .hero-grid.pv-first-grid>.pv-hero, .hero-grid.pv-first-grid>.save-hero{grid-column:auto;grid-row:auto;min-height:112px;padding:13px 16px} .hero-grid.pv-first-grid .pv-hero .hero-value, .hero-grid.pv-first-grid .save-hero .hero-value{font-size:clamp(23px,2.2vw,30px);margin:7px 0 4px;line-height:1.12} .hero-grid.pv-first-grid .hero-value small{font-size:12px} .hero-grid.pv-first-grid .card-kicker{font-size:9px;letter-spacing:.08em} .hero-grid.pv-first-grid .hero-card p{font-size:9px;line-height:1.3;max-width:none} .hero-grid.pv-first-grid .hero-foot{font-size:8px;margin-top:5px} .hero-grid.pv-first-grid .hero-card:after{display:none} .dashboard-phase-metrics{margin:0 0 10px;gap:9px} .dashboard-phase-metrics .metric-card{padding:12px;border-radius:12px} .dashboard-phase-metrics .metric-card label{font-size:9px} .dashboard-phase-metrics .metric-card strong{font-size:clamp(17px,1.6vw,22px);margin:6px 0 3px} .dashboard-phase-metrics .metric-card small{font-size:8px} #dashboard>.metric-grid.four:not(.dashboard-phase-metrics){gap:9px;margin-bottom:10px} #dashboard>.metric-grid.four:not(.dashboard-phase-metrics) .metric-card{padding:12px;border-radius:12px} #dashboard>.metric-grid.four:not(.dashboard-phase-metrics) .metric-card strong{margin:6px 0 3px} .dashboard-live-panel{margin-top:0;margin-bottom:10px} .dashboard-live-panel .phase-chart{height:180px} @media(max-width:760px){ .hero-grid.pv-first-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:8px} .hero-grid.pv-first-grid>.pv-hero, .hero-grid.pv-first-grid>.save-hero{min-height:94px;padding:10px 9px} .hero-grid.pv-first-grid .pv-hero .hero-value, .hero-grid.pv-first-grid .save-hero .hero-value{font-size:clamp(18px,5.2vw,23px);margin:6px 0 2px;letter-spacing:-.045em} .hero-grid.pv-first-grid .hero-value small{font-size:10px} .hero-grid.pv-first-grid .card-kicker{font-size:7px;letter-spacing:.035em;line-height:1.25} .hero-grid.pv-first-grid .hero-card p, .hero-grid.pv-first-grid .hero-foot{display:none} .dashboard-phase-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:8px} .dashboard-phase-metrics .metric-card{padding:10px} .dashboard-phase-metrics .metric-card strong{font-size:17px} #dashboard>.metric-grid.four:not(.dashboard-phase-metrics){gap:7px;margin-bottom:8px} #dashboard>.metric-grid.four:not(.dashboard-phase-metrics) .metric-card{padding:10px} #dashboard>.metric-grid.four:not(.dashboard-phase-metrics) .metric-card label{font-size:8px} #dashboard>.metric-grid.four:not(.dashboard-phase-metrics) .metric-card strong{font-size:17px} #dashboard>.metric-grid.four:not(.dashboard-phase-metrics) .metric-card small{font-size:7px} .dashboard-live-panel{padding:10px;margin:0 0 8px} .dashboard-live-panel .phase-chart{height:145px} } @media(max-width:360px){ .hero-grid.pv-first-grid .pv-hero .hero-value, .hero-grid.pv-first-grid .save-hero .hero-value{font-size:17px} .hero-grid.pv-first-grid>.pv-hero, .hero-grid.pv-first-grid>.save-hero{padding:9px 7px} } /* v0.5.18 – Historischer UI-Stand: Der separate Live-Monitor entfällt. */ @media(max-width:760px){.side-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important}} /* v0.5.18 – Historischer UI-Stand: Wetter bleibt mobil als Infozeile sichtbar. */ .mobile-weather-strip{display:none} @media(max-width:760px){.mobile-weather-strip{display:flex;align-items:center;flex-wrap:wrap;gap:5px 12px;margin:0 0 8px;padding:7px 9px;border:1px solid #30466d;border-radius:10px;background:#111f3a;color:#a9bddc;font-size:8px;line-height:1.25}.mobile-weather-strip strong{color:#fff;font-size:14px}.mobile-weather-strip>span:first-of-type{color:#d1def2}.mobile-weather-strip b{color:#fff;font-weight:750}} /* v0.5.20: compact, persistent date-range analyses and PDF export. */ .solar-period-panel{border-color:#3c5688} .solar-period-controls{display:grid;grid-template-columns:minmax(150px,210px) minmax(150px,210px) auto;align-items:end;gap:10px} .solar-period-controls label{display:grid;gap:6px;color:#c3d2ee;font-size:10px;font-weight:750;min-width:0} .solar-period-controls input[type=date]{height:42px;width:100%;min-width:0;border:1px solid #3c527f;border-radius:10px;background:#0c1932;color:#edf4ff;padding:0 11px;color-scheme:dark;font:inherit} .solar-period-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .solar-period-actions .btn{min-height:42px} .solar-period-result{margin-top:13px;padding-top:12px;border-top:1px solid #2b416c} .solar-period-result[hidden]{display:none} .solar-period-metrics{margin-bottom:9px} .solar-period-metrics .metric-card{padding:12px} .solar-period-metrics .metric-card strong{font-size:clamp(16px,1.5vw,21px);margin:7px 0 3px} .solar-period-result .helper{margin:5px 0} .solar-saved-periods{margin-top:15px} .subsection-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;color:#e9f1ff;font-size:11px} .subsection-head small{color:#9db4da;font-size:9px} .period-row-btn{min-height:28px;padding:6px 9px;margin-right:5px;font-size:9px} #solarPeriodsBody td:last-child{white-space:nowrap} @media(max-width:760px){ .solar-period-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .solar-period-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr} .solar-period-actions .btn{width:100%;padding:9px 7px;font-size:9px} .solar-period-metrics{grid-template-columns:repeat(2,minmax(0,1fr))} .subsection-head{align-items:flex-start;flex-direction:column;gap:3px} .period-row-btn{font-size:8px;padding:6px 7px} } /* Compact secondary smart-meter summary in period history */ .smart-meter-summary{margin-top:10px;padding:10px 12px;border:1px solid var(--line,#d9e0e8);border-radius:12px;background:var(--surface-soft,#f7f9fc)}.smart-meter-summary summary{cursor:pointer;font-weight:600;font-size:.92rem}.compact-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}.compact-summary-grid span{display:flex;flex-direction:column;gap:3px;font-size:.78rem;color:var(--muted,#64748b)}.compact-summary-grid strong{font-size:.95rem;color:var(--text,#172033)}@media(max-width:700px){.compact-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* v0.5.22: provisional values and unobtrusive IMAP startup progress */ .partial-value{color:#ffb84d!important;text-shadow:0 0 10px #ffad3320} .mail-startup-progress{margin:10px 22px 0;padding:10px 13px;border:1px solid #765326;border-radius:11px;background:linear-gradient(100deg,#352713,#20213a);display:flex;align-items:center;gap:18px;box-shadow:0 5px 16px #02071644} .mail-startup-progress[hidden]{display:none!important} .mail-progress-copy{display:flex;flex-direction:column;gap:3px;min-width:230px} .mail-progress-copy strong{font-size:11px;color:#ffcf7a}.mail-progress-copy span{font-size:10px;color:#d4c09d} .mail-progress-track{height:8px;flex:1;min-width:90px;overflow:hidden;border-radius:20px;background:#141d31;border:1px solid #68502f} .mail-progress-track span{display:block;width:34%;height:100%;border-radius:20px;background:linear-gradient(90deg,#d98720,#ffd27a);animation:mail-progress-flow 1.25s ease-in-out infinite alternate} .mail-startup-progress.is-complete{border-color:#28785d;background:linear-gradient(100deg,#123a30,#172b3a)}.mail-startup-progress.is-complete .mail-progress-copy strong{color:#7df0bc}.mail-startup-progress.is-complete .mail-progress-track span{background:#35d99a;animation:none} .mail-startup-progress.is-error{border-color:#8b4050}.mail-startup-progress.is-error .mail-progress-copy strong{color:#ff9eaa} @keyframes mail-progress-flow{from{transform:translateX(-10%);width:28%}to{transform:translateX(235%);width:48%}} @media(max-width:620px){.mail-startup-progress{margin:8px 10px 0;padding:9px 10px;gap:10px;align-items:stretch;flex-direction:column}.mail-progress-copy{min-width:0}.mail-progress-track{flex:none;width:100%}}