:root{--bg:#0f172a;--bg2:#1e293b;--bg3:#334155;--text:#f1f5f9;--text2:#94a3b8;--text3:#475569;--border:#334155;--amber:#f59e0b;--amber2:#fbbf24;--red-bg:#450a0a;--red-bd:#b91c1c;--red-t:#fca5a5;--grn-bg:#052e16;--grn-bd:#15803d;--grn-t:#86efac;--ora-bg:#431407;--ora-bd:#c2410c;--ora-t:#fed7aa;--r:10px;--rs:6px;}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}
svg{overflow:hidden;flex-shrink:0;}

.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.auth-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:28px 24px;width:100%;max-width:380px;}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:24px;}
.auth-title{font-size:20px;font-weight:700;}
.auth-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:20px;}
.auth-tab{flex:1;padding:10px;border:none;background:transparent;color:var(--text2);cursor:pointer;font-size:14px;font-weight:500;border-bottom:2px solid transparent;}
.auth-tab.active{color:var(--amber);border-bottom-color:var(--amber);}
.auth-err{background:var(--red-bg);border:1px solid var(--red-bd);color:var(--red-t);padding:8px 12px;border-radius:var(--rs);font-size:13px;margin-bottom:12px;}
.auth-note{font-size:11px;color:var(--text3);margin-top:14px;line-height:1.5;text-align:center;}

.header{background:var(--bg2);border-bottom:1px solid var(--border);padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px));display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;}
.hleft{display:flex;align-items:center;gap:10px;}
.htitle{font-size:15px;font-weight:600;}
.hsub{font-size:11px;color:var(--text2);margin-top:1px;}
.hright{display:flex;align-items:center;gap:8px;}
.badge{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;}
.badge .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.bon{background:var(--grn-bg);border:1px solid var(--grn-bd);color:var(--grn-t);}
.boff{background:var(--red-bg);border:1px solid var(--red-bd);color:var(--red-t);}
.bon .dot{background:#22c55e;}
.boff .dot{background:#ef4444;animation:pulse 1.5s infinite;}
.profile-btn{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:5px 10px;font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;touch-action:manipulation;}

.tabs{background:var(--bg2);border-bottom:1px solid var(--border);display:flex;}
.tab{flex:1;min-height:50px;padding:6px 2px;border:none;background:transparent;color:var(--text2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-bottom:2px solid transparent;font-size:10px;font-weight:500;touch-action:manipulation;}
.tab svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.tab.active{color:var(--amber);border-bottom-color:var(--amber);}

.active-banner{background:#7c2d12;border-bottom:1px solid #b45309;padding:9px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.active-banner span{font-size:12px;font-weight:600;color:#fed7aa;}
.active-banner button{background:#b45309;border:none;color:white;padding:5px 12px;border-radius:var(--rs);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit;touch-action:manipulation;}

.content{padding:16px;max-width:720px;margin:0 auto;padding-bottom:calc(90px + env(safe-area-inset-bottom,0px));}

.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;}
.card-red{border-color:var(--red-bd);}
.card-ora{border-color:var(--ora-bd);}
.card-grn{border-color:var(--grn-bd);}
.card-last{margin-bottom:0;}
.slabel{font-size:10px;font-weight:700;color:var(--text2);letter-spacing:.06em;margin-bottom:10px;}

.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px;}
@media(min-width:520px){.sgrid{grid-template-columns:repeat(4,1fr);}}
.sgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.scard{background:var(--bg2);border-radius:var(--rs);padding:11px 13px;}
.sval{font-size:20px;font-weight:700;color:var(--amber2);margin:4px 0 2px;}
.sval-ora{font-size:20px;font-weight:700;color:var(--ora-t);margin:4px 0 2px;}
.sval-grn{font-size:20px;font-weight:700;color:var(--grn-t);margin:4px 0 2px;}
.slb{font-size:12px;color:var(--text2);}
.ssub{font-size:11px;color:var(--text3);margin-top:2px;}
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:12px;}
.rcard{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:13px 15px;}
.rval{font-size:20px;font-weight:700;margin-top:5px;}
.rsub{font-size:12px;color:var(--text3);margin-top:3px;}

.bmain{width:100%;min-height:50px;padding:12px 16px;border-radius:var(--rs);font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid;touch-action:manipulation;transition:opacity .1s;}
.bmain:active{opacity:.7;}
.bmain:disabled{opacity:.35;cursor:not-allowed;}
.bmain svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.bdanger{background:var(--red-bg);border-color:var(--red-bd);color:var(--red-t);}
.bsuccess{background:var(--grn-bg);border-color:var(--grn-bd);color:var(--grn-t);}
.borange{background:var(--ora-bg);border-color:var(--ora-bd);color:var(--ora-t);}

.bsm{padding:9px 16px;min-height:42px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:13px;font-weight:500;cursor:pointer;touch-action:manipulation;display:inline-flex;align-items:center;gap:7px;text-decoration:none;}
.bsm:active{opacity:.7;}
.bsm svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

.bnow{padding:0 12px;height:42px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg3);color:var(--text2);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;touch-action:manipulation;flex-shrink:0;display:inline-flex;align-items:center;gap:5px;margin: 0;}
.bnow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.bnow:hover{filter:brightness(1.2);}
.bicon{background:transparent;border:1px solid var(--border);border-radius:var(--rs);color:var(--text3);cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;touch-action:manipulation;flex-shrink:0;}
.bicon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}

.byes{padding:6px 14px;min-height:36px;border-radius:var(--rs);border:1px solid var(--red-bd);background:var(--red-bg);color:var(--red-t);cursor:pointer;font-size:13px;}
.bno{padding:6px 14px;min-height:36px;border-radius:var(--rs);border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;font-size:13px;}
.bghost{background:transparent;border:none;color:var(--text2);cursor:pointer;font-size:14px;font-weight:500;padding:0;display:flex;align-items:center;gap:6px;touch-action:manipulation;}
.bghost svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.bmore{width:100%;padding:10px;border-radius:var(--rs);border:1px solid var(--border);background:transparent;color:var(--text2);font-size:13px;cursor:pointer;margin-top:10px;touch-action:manipulation;}
.bdel-account{padding:9px 16px;min-height:42px;border-radius:var(--rs);border:1px solid var(--red-bd);background:transparent;color:var(--red-t);font-size:13px;font-weight:500;cursor:pointer;touch-action:manipulation;}

.fab{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));right:20px;width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;touch-action:manipulation;transition:transform .15s;box-shadow:0 4px 20px rgba(0,0,0,.5);}
.fab:active{transform:scale(.9);}
.fab-on{background:#f59e0b;color:#0f172a;}
.fab-off{background:#b91c1c;color:#fca5a5;}
.fab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:30;display:flex;align-items:flex-end;justify-content:center;}
@media(min-width:600px){.overlay{align-items:center;}}
.overlay-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r) var(--r) 0 0;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:20px;}
@media(min-width:600px){.overlay-card{border-radius:var(--r);}}
.overlay-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.overlay-title{font-size:16px;font-weight:600;}
.danger-zone{border:1px solid var(--red-bd);border-radius:var(--rs);padding:12px 14px;margin-top:16px;}
.danger-title{font-size:11px;font-weight:700;color:var(--red-t);letter-spacing:.06em;margin-bottom:6px;}
.danger-desc{font-size:12px;color:var(--text2);margin-bottom:10px;}

.field{margin-bottom:12px;}
.field label{font-size:12px;color:var(--text2);display:block;margin-bottom:4px;}
.field input,.field select{width:100%;padding:9px 12px;min-height:42px;border:1px solid var(--border);border-radius:var(--rs);font-size:14px;background:var(--bg);color:var(--text);}
.field input:focus,.field select:focus{outline:none;border-color:var(--amber);}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer;}
input[type=date]{color-scheme:dark;}
.trow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.trow-now{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;align-items:end;}
.trow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px;}
@media(max-width:480px){.trow3{grid-template-columns:1fr 1fr;}.trow3 .field:last-child{grid-column:1/-1;}}
.ff label{font-size:12px;color:var(--text2);display:block;margin-bottom:4px;}
.ff input,.ff select{width:100%;padding:9px 10px;min-height:42px;border:1px solid var(--border);border-radius:var(--rs);font-size:14px;background:var(--bg);color:var(--text);}
.ff select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;cursor:pointer;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);}
.toggle-row:last-child{border-bottom:none;}
.toggle{width:42px;height:24px;border-radius:12px;border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;}
.toggle.on{background:var(--amber);}
.toggle.off{background:var(--bg3);}
.toggle::after{content:'';position:absolute;top:3px;width:18px;height:18px;border-radius:50%;background:white;transition:left .2s;}
.toggle.on::after{left:21px;}
.toggle.off::after{left:3px;}

.abanner{padding:10px 14px;background:var(--red-bg);border:1px solid var(--red-bd);border-radius:var(--rs);margin-bottom:14px;}
.abanner .al{font-size:13px;color:var(--red-t);}
.abanner .ad{font-size:20px;font-weight:700;color:var(--red-t);margin-top:3px;}

.barwrap{margin-bottom:8px;overflow:hidden;}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;}
.bcol .b{width:100%;border-radius:2px;}
.bcol .bl{font-size:9px;color:var(--text3);}

.prow{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:var(--rs);margin-bottom:2px;}
.prow.now{background:rgba(255,255,255,.05);}
.phour{width:46px;font-size:12px;color:var(--text3);flex-shrink:0;}
.phour.now{color:var(--amber);font-weight:600;}
.ptrack{flex:1;height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;}
.pfill{height:100%;border-radius:3px;}
.ppct{width:32px;font-size:12px;color:var(--text2);text-align:right;flex-shrink:0;}
.plabel{width:80px;font-size:11px;text-align:right;flex-shrink:0;}
@media(max-width:400px){.plabel{display:none;}}

.hmwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.hm{min-width:320px;}
.hmrow{display:flex;align-items:center;margin-bottom:3px;}
.hmday{width:26px;font-size:10px;color:var(--text3);flex-shrink:0;}
.hmday.today{color:var(--amber);font-weight:700;}
.hmcells{display:flex;gap:2px;flex:1;}
.hmcell{flex:1;height:18px;border-radius:2px;}
.hmcell.now{outline:2px solid var(--amber);outline-offset:1px;}
.hmhours{display:flex;margin-left:26px;margin-bottom:4px;}
.hmhours span{flex:1;font-size:10px;color:var(--text3);text-align:center;}
.hmleg{display:flex;align-items:center;gap:8px;margin-top:8px;justify-content:flex-end;}
.legbox{width:10px;height:10px;border-radius:2px;}

.hlist{display:flex;flex-direction:column;gap:8px;}
.hitem{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs);padding:12px 14px;display:flex;align-items:center;gap:10px;}
.hitem-fluc{border-color:var(--ora-bd);background:rgba(67,20,7,.25);}
.hmeta{flex:1;min-width:0;}
.hdate{font-weight:600;font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.htime{font-size:13px;color:var(--text2);margin-top:2px;}
.hdur{font-weight:700;font-size:16px;color:var(--amber2);text-align:right;flex-shrink:0;}
.hdur-fluc{font-size:18px;color:var(--ora-t);text-align:right;flex-shrink:0;}
.hactive{font-size:11px;color:#f87171;font-weight:400;}
.tag{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em;}
.tag-fluc{background:var(--ora-bg);color:var(--ora-t);border:1px solid var(--ora-bd);}

.comm-user{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.comm-user:last-child{border-bottom:none;}
.comm-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;animation:pulse 1.5s infinite;flex-shrink:0;}

.forecast-card{background:linear-gradient(135deg,rgba(30,41,59,.95),rgba(15,23,42,.95));border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;}
.empty{text-align:center;padding:40px 24px;color:var(--text3);}
.empty svg{width:36px;height:36px;stroke:currentColor;fill:none;stroke-width:1.2;margin:0 auto 10px;display:block;}
.empty p{font-size:14px;}
.infobox{margin-top:8px;padding:8px 10px;background:rgba(255,255,255,.04);border-radius:var(--rs);font-size:12px;color:var(--text2);}

.time-picker{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:var(--rs);overflow:hidden;background:var(--bg);min-height:42px;}
.time-picker input[type="number"]{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:14px;min-height:42px;text-align:center;padding:0;-moz-appearance:textfield;}
.time-picker input[type="number"]::-webkit-outer-spin-button,.time-picker input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.time-picker span{display:flex;align-items:center;color:var(--text2);font-weight:700;padding:0 2px;pointer-events:none;flex-shrink:0;}
.input-fecha{width:100%;}
.input-fecha input[type="date"]{width:100%;box-sizing:border-box;}
.hora-action-group{display:flex;gap:8px;align-items:stretch;}

.mood-row{display:flex;gap:6px;margin-bottom:12px;}
.mood-btn{flex:1;padding:8px 4px;border-radius:var(--rs);border:2px solid var(--border);background:var(--bg);cursor:pointer;text-align:center;touch-action:manipulation;transition:border-color .15s,background .15s;}
.mood-btn.selected{border-color:var(--amber);}
.mood-btn div:first-child{font-size:18px;}
.mood-btn div:last-child{font-size:10px;color:var(--text3);margin-top:2px;}
.mood-btn.selected div:last-child{color:var(--amber);}

.disclaimer{margin-top:16px;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--rs);font-size:11px;color:var(--text3);line-height:1.6;}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.community-totals-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.community-me-tag{color:var(--amber);font-size:11px;}
.community-user-info{flex:1;}
.community-user-name{font-size:14px;font-weight:600;}
.community-user-location{font-size:12px;color:var(--text2);}
.community-user-elapsed{font-size:13px;font-weight:600;color:var(--red-t);}
.community-city-block{margin-bottom:16px;}
.community-city-block:last-child{margin-bottom:0;}
.community-city-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px;}
.community-city-mine{color:var(--amber);}
.community-zone-block{margin-bottom:10px;padding-left:8px;border-left:2px solid var(--border);}
.community-zone-block:last-child{margin-bottom:0;}
.community-zone-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.community-zone-name{font-size:12px;font-weight:600;color:var(--text2);}
.community-zone-summary{font-size:11px;color:var(--text3);}
.community-outage-list{display:flex;flex-direction:column;gap:3px;}
.community-outage-item{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:rgba(185,28,28,.12);border-radius:var(--rs);}
.community-outage-time{font-size:12px;color:var(--red-t);}
.community-outage-dur{font-size:12px;font-weight:600;color:var(--text2);}

.notes-input{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--rs);font-size:13px;background:var(--bg);color:var(--text2);resize:none;height:56px;font-family:inherit;}
.notes-input::placeholder{color:var(--text3);}
.notes-input:focus{outline:none;border-color:var(--border);color:var(--text);}
.hnotes{font-size:11px;color:var(--text3);margin-top:3px;word-break:break-word;}
 
.city-select-wrap{position:relative;width:100%;}
.city-input{width:100%;padding:9px 12px;min-height:42px;border:1px solid var(--border);border-radius:var(--rs);font-size:14px;background:var(--bg);color:var(--text);box-sizing:border-box;}
.city-input:focus{outline:none;border-color:var(--amber);}
.city-input::placeholder{color:var(--text3);}
.city-dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs);z-index:50;max-height:200px;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,.5);}
.city-option{padding:10px 12px;font-size:14px;cursor:pointer;color:var(--text);border-bottom:1px solid rgba(255,255,255,.04);}
.city-option:last-child{border-bottom:none;}
.city-option:hover,.city-option:active{background:var(--bg3);color:var(--amber);}
.city-no-results{padding:10px 12px;font-size:13px;color:var(--text3);}
 
.hitem:has(.trow3){align-items:flex-start;}