:root{
  --primary:#1e9aa7;
  --primary-foreground:#fff;
  --background:#fff;
  --foreground:#293445;
  --surface:#f3f6f7;
  --secondary:#eef2f3;
  --muted:#eef2f3;
  --muted-foreground:#6b7280;
  --border:#e2e8eb;
  --cta:#e8703a;
  --cta-foreground:#fff;
  --warning:#d9943a;
  --warning-foreground:#fff;
}
*{box-sizing:border-box;border-color:var(--border)}
html,body{margin:0;padding:0}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--surface);color:var(--foreground);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;background:none;border:0;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.app{min-height:100vh;display:flex;flex-direction:column;background:var(--surface);max-width:28rem;margin:0 auto;position:relative}
main{flex:1;padding-bottom:6rem}

.hdr{background:#fff;padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30}
.hdr .avatar{width:2.5rem;height:2.5rem;border-radius:9999px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem}
.hdr .logo{height:2rem;width:auto}
.hdr .proto{text-align:right;color:var(--primary);font-size:.7rem;line-height:1.1}
.hdr .proto b{font-weight:600;display:block}

.bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:28rem;background:#fff;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(4,1fr);z-index:40}
.bottom a{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem 0;gap:.1rem;color:var(--primary);font-size:.7rem}
.bottom a .icon{width:2.5rem;height:2.5rem;display:grid;place-items:center}
.bottom a.active .icon{width:3rem;height:3rem;border-radius:1.25rem;background:var(--primary);color:#fff;margin-top:-1rem;box-shadow:0 6px 14px -4px rgba(0,0,0,.15)}
.bottom a.active span{font-weight:700}

.banner{background:#fff;padding:.75rem 1rem}
.banner .box{background:var(--warning);color:#fff;border-radius:.5rem;padding:1rem;display:flex;gap:.75rem;font-size:.85rem;line-height:1.25}
.banner svg{flex-shrink:0;margin-top:.1rem}

.greet{padding:1.5rem 1rem .5rem}
.greet .row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;color:var(--primary);font-size:.85rem;font-weight:600}
.greet .row .flag{width:1.1rem;height:1.1rem;color:#facc15;fill:#facc15}
.greet h1{font-size:1.5rem;font-weight:700;color:#3b4659;margin:0;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.greet .label{font-size:.85rem;color:var(--muted-foreground);margin:.5rem 0 .15rem}
.greet .addr{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;color:var(--primary);font-weight:600;font-size:.85rem}
.greet .addr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:.5rem}

.tabs{padding:1rem 1rem 0}
.tabs .row{display:flex;gap:.5rem}
.tabs a{flex:1;text-align:center;font-size:.7rem;font-weight:700;padding:.75rem 0;border:2px solid var(--primary);border-radius:9999px;color:var(--primary);background:#fff;transition:all .15s}
.tabs a.active{background:var(--primary);color:#fff}
.tabs .bar{height:.375rem;background:var(--primary);margin:.75rem -1rem 0}

.card{background:#fff;padding:1.25rem;border:1px solid var(--border)}
.section{padding:1rem;padding-top:1rem}

.h-card-title{font-size:1.25rem;color:#3b4659;font-weight:400;margin:0}
.badge-late{display:inline-block;margin-top:.75rem;padding:.25rem .75rem;border-radius:9999px;border:1px solid var(--cta);color:var(--cta);font-size:.75rem;font-weight:500}
.big-value{color:var(--primary);font-weight:700;font-size:2.25rem;margin-top:.75rem}
.month-btn{display:flex;align-items:center;gap:.25rem;color:#4b5563;margin-top:.75rem}
.month-btn svg{color:var(--cta)}
.hr{height:1px;background:var(--border);margin:.75rem 0}
.due{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#4b5563}
.btn-primary{margin-top:1.25rem;width:100%;background:var(--primary);color:#fff;font-weight:700;letter-spacing:.04em;padding:1rem 0;border-radius:.75rem;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:opacity .15s}
.btn-primary:hover{opacity:.92}
.btn-outline{flex:1;border:2px solid var(--primary);color:var(--primary);font-weight:700;padding:.75rem 0;border-radius:.375rem;font-size:.8rem;background:#fff}
.btn-cta{flex:1;background:var(--primary);color:#fff;font-weight:700;padding:.75rem 0;border-radius:.375rem;font-size:.8rem}
.btn-cta:disabled{opacity:.5}

.cheap{background:#fff;padding:1rem;margin-top:1rem;display:flex;align-items:center;gap:.75rem;border:1px solid var(--border)}
.cheap .av{width:3.5rem;height:3.5rem;border-radius:9999px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700}
.cheap span{font-size:.85rem;color:#4b5563}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:1rem;overflow-y:auto}
.modal-card{background:#fff;border-radius:1rem;width:100%;max-width:28rem;margin:2rem 0;padding:1.5rem;position:relative}
.modal-card .x{position:absolute;right:1rem;top:1rem;color:var(--muted-foreground)}
.modal-card h3{font-size:1.25rem;color:#3b4659;font-weight:400;margin:0 0 1rem}
.modal-card ol{padding-left:1.25rem;color:#4f5666;font-size:.85rem;margin:0}
.modal-card ol li{margin:.25rem 0}
.code-box{margin-top:.75rem;background:rgba(238,242,243,.7);border:1px solid var(--border);border-radius:.5rem;padding:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.7rem;color:#4f5666;word-break:break-all}
.btn-copy{margin-top:1.25rem;width:100%;background:var(--cta);color:#fff;font-weight:700;padding:1rem 0;border-radius:.375rem;display:flex;align-items:center;justify-content:center;gap:.5rem;letter-spacing:.04em}
.status-box{margin-top:1.25rem;padding:.75rem;border:1px solid var(--border);border-radius:.5rem;font-size:.85rem;display:flex;align-items:center;gap:.5rem}
.status-paid{color:#16a34a;font-weight:600}
.status-canceled,.status-expired{color:var(--cta)}
.status-pending{color:var(--muted-foreground)}
.spin{animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* details */
.month-btn-lg{display:flex;align-items:center;gap:.25rem;color:#3b4659;font-size:1.05rem}
.bar-stack{display:flex;height:.75rem;border-radius:9999px;overflow:hidden;margin-bottom:1.25rem}
.bar-stack > div{height:100%}
.det-list{list-style:none;padding:0;margin:0}
.det-list li{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--border);font-size:.85rem}
.det-list li:last-child{border-bottom:0}
.det-list .name{display:flex;align-items:center;gap:.75rem;color:#4f5666}
.det-list .dot{width:1rem;height:1rem;border-radius:9999px;flex-shrink:0}
.det-list .val{color:#4b5563}

/* servicos */
.tiles-h{color:var(--muted-foreground);font-weight:600;margin:0 0 .75rem}
.tiles{display:flex;gap:.75rem;overflow-x:auto;padding-bottom:.5rem}
.tile{flex-shrink:0;width:9rem;background:#fff;padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;border:1px solid var(--border);color:var(--primary);font-weight:600;font-size:.75rem;line-height:1.15;cursor:pointer}

/* historico */
.empty{background:#fff;padding:2rem;display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid var(--border)}
.empty h2{font-size:1.05rem;font-weight:700;color:#3b4659;margin:0}
.empty p{font-size:.85rem;color:var(--muted-foreground);margin:.5rem 0 0;max-width:20rem}

/* falta de luz */
.faulthdr{background:#fff;padding:1rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.faulthdr .ico{width:3rem;height:3rem;border-radius:9999px;border:2px solid #d1d5db;display:grid;place-items:center;color:#9ca3af}
.faulthdr h2{color:var(--primary);font-weight:700;font-size:.85rem;margin:0;line-height:1.1}
.info-pill{background:var(--warning);color:#fff;font-size:.7rem;font-weight:700;padding:.5rem .75rem;border-radius:.375rem;display:flex;align-items:center;gap:.25rem}

/* menu */
.menu-hero{background:linear-gradient(180deg,var(--secondary),var(--surface));padding:2.5rem 1rem;text-align:center}
.menu-hero h2{font-weight:700;color:#3b4659;letter-spacing:.04em;font-size:.95rem;margin:0}
.menu-bar{height:.375rem;background:var(--primary)}
.menu-row{width:100%;display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border);background:#fff;text-align:left;font-weight:600;color:#4f5666;font-size:.85rem}
.menu-row svg.left{color:var(--primary);width:1.5rem;height:1.5rem}
.menu-row svg.right{color:var(--primary);width:1.25rem;height:1.25rem;margin-left:auto}
.logout{margin:2rem 1.5rem 0;width:calc(100% - 3rem);background:var(--secondary);color:var(--muted-foreground);font-weight:600;padding:.75rem 0;border-radius:9999px;display:flex;align-items:center;justify-content:center;gap:.5rem}
.social{display:flex;justify-content:space-around;padding:0 2rem;margin-top:1rem;color:var(--primary)}
.social a{width:2.5rem;height:2.5rem;border:2px solid var(--primary);border-radius:.375rem;display:grid;place-items:center}

.toast{position:fixed;top:1rem;left:50%;transform:translateX(-50%);background:#1f2937;color:#fff;padding:.75rem 1rem;border-radius:.5rem;font-size:.85rem;z-index:60;box-shadow:0 10px 25px rgba(0,0,0,.15);max-width:90%}
.toast.err{background:#7f1d1d;border:1px solid #fecaca}
.toast b{display:block;color:#fff;margin-bottom:.15rem}
.toast .desc{color:#fecaca;font-weight:400;font-size:.8rem}
.fade-out{opacity:0;transition:opacity .3s}