@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#f4f5f7;
  --card:#ffffff;
  --text:#071735;
  --muted:#66718a;
  --blue:#0647e8;
  --blue-dark:#062b72;
  --pink:#ef2b97;
  --green:#22c55e;
  --cyan:#22d3c5;
  --purple:#7c3aed;
  --border:#e5e8ef;
  --shadow:0 26px 80px rgba(7,23,53,.10);
  --soft-shadow:0 14px 40px rgba(7,23,53,.08);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
a{text-decoration:none;color:inherit}
button,input{font:inherit}

.login-page{
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 85% 20%, rgba(239,43,151,.10), transparent 28%),
    radial-gradient(circle at 15% 30%, rgba(6,71,232,.13), transparent 25%),
    linear-gradient(135deg,#ffffff 0%,#f5f6fb 48%,#f7f7f4 100%);
}

.login-shell{
  min-height:100vh;
  padding:48px 24px 40px;
  position:relative;
}
.login-shell::before{
  content:"";
  position:absolute;
  left:-10vw;
  top:23vh;
  width:48vw;
  height:48vw;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(5,35,91,.14),rgba(6,71,232,.03));
  pointer-events:none;
}
.login-shell::after{
  content:"";
  position:absolute;
  right:-20vw;
  top:-20vw;
  width:56vw;
  height:56vw;
  border-radius:50%;
  border:1px solid rgba(239,43,151,.14);
  pointer-events:none;
}
.brand-area{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  margin-bottom:24px;
}
.logo-main{
  width:min(360px,72vw);
  height:auto;
  display:block;
  mix-blend-mode:multiply;
}

.login-stage{
  position:relative;
  z-index:2;
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr minmax(360px,540px) 300px;
  gap:28px;
  align-items:center;
}
.login-card,.feature-card{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.86);
  border-radius:28px;
  box-shadow:var(--shadow);
}
.login-card{
  padding:44px 48px;
}
.pill-title{
  width:max-content;
  margin:0 auto 22px;
  padding:10px 18px;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--blue);
  font-weight:800;
  border-radius:999px;
  background:#edf2ff;
}
.pill-icon{font-size:1.1rem}
.login-card h1{
  margin:0;
  text-align:center;
  font-size:3.05rem;
  line-height:1;
  letter-spacing:-.07em;
  color:#05235b;
  font-weight:900;
  text-transform:lowercase;
}
.login-subtitle{
  max-width:440px;
  margin:18px auto 34px;
  text-align:center;
  color:#4d5a76;
  line-height:1.55;
  font-size:1.05rem;
}
.login-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.login-form label{
  font-weight:800;
  color:#081a3e;
}
.input-wrap{
  height:64px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 18px;
  border:1px solid #cfd6e5;
  border-radius:12px;
  background:#fff;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.02);
}
.input-icon{
  color:#8e9ab2;
  font-size:1.45rem;
}
.input-wrap input{
  width:100%;
  border:0;
  outline:0;
  color:#081a3e;
  font-size:1.2rem;
  background:transparent;
}
.input-wrap input::placeholder{color:#9ba6bd}

.primary-button,.whatsapp-button,.outline-button,.top-whatsapp,.sidebar-help a{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  font-weight:900;
  font-size:1.06rem;
}
.primary-button{
  margin-top:16px;
  background:linear-gradient(135deg,#0759ff,#063fd3);
  color:#fff;
  box-shadow:0 16px 34px rgba(6,71,232,.23);
}
.whatsapp-button{
  margin-top:18px;
  border:1px solid #20b450;
  background:#fff;
  color:#071735;
}
.whatsapp-button span{color:#20b450;font-size:1.35rem}
.primary-button:hover,.whatsapp-button:hover,.outline-button:hover,.top-whatsapp:hover,.sidebar-help a:hover{
  transform:translateY(-1px);
  transition:.15s ease;
}
.security-note{
  margin:32px auto 0;
  display:flex;
  gap:16px;
  align-items:center;
  max-width:380px;
  color:#4f5b75;
}
.security-note span{
  width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#eff4ff;color:var(--blue);font-weight:900;flex:none;
}
.security-note p{margin:0;line-height:1.5}

.feature-card{
  padding:28px;
}
.feature-row{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:18px;
  align-items:center;
  padding:22px 0;
  border-bottom:1px solid #edf0f5;
}
.feature-row:last-child{border-bottom:0}
.feature-icon{
  width:72px;height:72px;display:grid;place-items:center;border-radius:18px;font-size:2rem;font-weight:900;
}
.feature-icon.doc{background:#eef3ff;color:var(--blue)}
.feature-icon.pix{background:#e9fbf8;color:#20c9ad}
.feature-icon.bill{background:#f3edff;color:var(--purple)}
.feature-icon.support{background:#fff0f7;color:var(--pink)}
.feature-row strong{display:block;font-size:1.25rem;margin-bottom:8px;color:#0b1838}
.feature-row small{display:block;color:#66718a;line-height:1.45}

.ambient-card{
  min-height:520px;
  position:relative;
  align-self:stretch;
}
.ambient-left{
  border-radius:40px 0 0 40px;
  background:
    linear-gradient(180deg,rgba(248,250,255,.72),rgba(255,255,255,.15)),
    url('') center/cover no-repeat;
}
.wifi-orb{
  position:absolute;
  right:18%;
  top:34%;
  width:132px;height:132px;
  display:grid;place-items:center;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.7);
  box-shadow:0 0 32px rgba(139,198,255,.28), inset 0 0 36px rgba(255,255,255,.5);
}
.wifi-orb span{
  position:absolute;
  border:4px solid transparent;
  border-top-color:rgba(239,43,151,.5);
  border-radius:50%;
}
.wifi-orb span:nth-child(1){width:78px;height:78px}
.wifi-orb span:nth-child(2){width:50px;height:50px;top:42px}
.wifi-orb span:nth-child(3){width:14px;height:14px;background:rgba(239,43,151,.55);border:0;bottom:32px}
.router-box{
  position:absolute;
  left:12%;
  bottom:42px;
  width:190px;height:74px;
  border-radius:28px 28px 14px 14px;
  background:#fff;
  box-shadow:var(--soft-shadow);
}
.router-light{
  position:absolute;left:26px;top:30px;width:7px;height:7px;border-radius:50%;background:#58c7ff;box-shadow:0 0 12px #58c7ff;
}
.router-dots{position:absolute;left:62px;top:33px;display:flex;gap:8px}
.router-dots i{width:4px;height:4px;border-radius:50%;background:#b9d0f2}

.benefits-row{
  position:relative;
  z-index:2;
  width:min(780px,100%);
  margin:38px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.benefits-row div{
  display:grid;
  grid-template-columns:42px 1fr;
  column-gap:14px;
  align-items:center;
}
.benefits-row span{
  grid-row:span 2;
  width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:var(--blue);font-weight:900;font-size:1.4rem;
}
.benefits-row div:nth-child(2) span{color:var(--pink)}
.benefits-row div:nth-child(3) span{color:#18b449}
.benefits-row strong{font-size:.98rem;color:#071735}
.benefits-row small{color:#66718a;line-height:1.4}

/* Painel interno */
.app-page{
  background:#efefeb;
  min-height:100vh;
}
.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:270px 1fr;
}
.app-sidebar{
  background:#f7f7f4;
  border-right:1px solid #deded8;
  padding:28px 22px;
  display:flex;
  flex-direction:column;
  gap:26px;
  position:sticky;
  top:0;
  height:100vh;
}
.sidebar-logo{
  width:190px;
  mix-blend-mode:multiply;
}
.app-sidebar nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.app-sidebar nav a{
  padding:14px 15px;
  border-radius:14px;
  font-weight:800;
  color:#22304a;
}
.app-sidebar nav a.active,.app-sidebar nav a:hover{
  background:#e9f1ff;
  color:var(--blue);
}
.sidebar-help{
  margin-top:auto;
  padding:18px;
  border-radius:20px;
  background:#fff;
  border:1px solid #e0e0db;
  box-shadow:var(--soft-shadow);
}
.sidebar-help strong,.sidebar-help small{display:block}
.sidebar-help small{margin:8px 0 14px;color:#66718a;line-height:1.45}
.sidebar-help a{
  min-height:44px;
  background:#20b450;
  color:#fff;
}
.app-content{
  padding:34px;
}
.app-topbar{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  margin-bottom:26px;
}
.kicker{
  display:inline-flex;
  margin-bottom:10px;
  padding:8px 13px;
  border-radius:999px;
  color:var(--blue);
  font-weight:900;
  background:#e9f1ff;
}
.app-topbar h1{
  margin:0;
  font-size:2.35rem;
  line-height:1.1;
  letter-spacing:-.06em;
}
.app-topbar p{margin:8px 0 0;color:#66718a}
.top-whatsapp{
  min-height:44px;
  padding:0 18px;
  color:#fff;
  background:#20b450;
  flex:none;
}
.summary-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:22px;
}
.summary-card,.invoice-panel,.invoice-card{
  background:#fff;
  border:1px solid #deded8;
  border-radius:20px;
  box-shadow:0 18px 54px rgba(7,23,53,.06);
}
.summary-card{
  padding:20px;
}
.summary-card span{
  color:#66718a;
  font-weight:800;
  font-size:.82rem;
}
.summary-card strong{
  display:block;
  margin:10px 0 6px;
  font-size:1.35rem;
  letter-spacing:-.04em;
}
.summary-card small{color:#7a8396}
.summary-card.accent{
  background:linear-gradient(135deg,#ebf8ff,#eff4ff);
  border-color:#d5e6ff;
}
.invoice-panel{
  padding:24px;
}
.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:18px;
}
.panel-head h2{
  margin:0;
  font-size:1.55rem;
  letter-spacing:-.04em;
}
.panel-head p{
  margin:8px 0 0;
  color:#66718a;
}
.invoice-list{
  display:grid;
  gap:14px;
}
.invoice-card{
  padding:18px;
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:20px;
  align-items:center;
}
.invoice-badge{
  display:inline-flex;
  padding:7px 11px;
  border-radius:999px;
  color:#b87500;
  background:#fff4d8;
  font-size:.78rem;
  font-weight:900;
}
.invoice-card h3{
  margin:10px 0 4px;
}
.invoice-card p{
  margin:0;
  color:#66718a;
}
.invoice-value{text-align:right}
.invoice-value span{display:block;color:#66718a;font-weight:800;font-size:.82rem}
.invoice-value strong{font-size:1.28rem}
.invoice-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.primary-button.small,.outline-button.small{
  min-height:42px;
  margin:0;
  padding:0 14px;
  font-size:.9rem;
}
.outline-button{
  background:#fff;
  color:#061b48;
  border:1px solid #d8dee9;
}
.outline-button.pix-copy{
  border-color:#c8f2df;
  color:#138d45;
}
.empty-state{
  padding:32px;
  border:1px dashed #cfd6e5;
  border-radius:18px;
  text-align:center;
  color:#66718a;
}
.empty-state strong{display:block;color:#071735;margin-bottom:8px}

.flash{
  padding:14px 16px;
  border-radius:14px;
  margin:0 0 18px;
  font-weight:700;
}
.flash-error{background:#fff0f0;color:#b42318;border:1px solid #ffd2d2}
.flash-success{background:#edfff4;color:#137a38;border:1px solid #c8f2df}

@media (max-width:1120px){
  .login-stage{grid-template-columns:1fr minmax(340px,540px)}
  .feature-card{display:none}
  .ambient-card{min-height:460px}
  .summary-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .login-shell{padding:26px 16px 28px}
  .login-stage{grid-template-columns:1fr}
  .ambient-card{display:none}
  .login-card{padding:30px 22px;border-radius:24px}
  .login-card h1{font-size:2.25rem}
  .benefits-row{grid-template-columns:1fr;max-width:420px}
  .app-shell{grid-template-columns:1fr}
  .app-sidebar{
    position:relative;
    height:auto;
    padding:20px;
  }
  .app-sidebar nav{display:grid;grid-template-columns:repeat(2,1fr)}
  .sidebar-help{display:none}
  .app-content{padding:22px 16px 92px}
  .app-topbar{flex-direction:column}
  .summary-grid{grid-template-columns:1fr}
  .invoice-card{grid-template-columns:1fr;align-items:flex-start}
  .invoice-value{text-align:left}
  .invoice-actions{justify-content:flex-start;width:100%}
  .primary-button.small,.outline-button.small{flex:1}
}


/* ===== UseNet Central v1.0.2 — entrada fiel ao preview aprovado ===== */
.login-page{
  background:#f7f8fb;
}
.preview-v102.login-shell{
  min-height:100vh;
  padding:42px 24px 40px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 86% 22%, rgba(239,43,151,.095), transparent 31%),
    radial-gradient(circle at 14% 42%, rgba(6,71,232,.10), transparent 28%),
    linear-gradient(135deg,#ffffff 0%,#f7f8fc 52%,#f6f6f3 100%);
}
.preview-v102.login-shell::before,
.preview-v102.login-shell::after{
  display:none;
}
.soft-line{
  position:absolute;
  width:56vw;
  height:1px;
  pointer-events:none;
  opacity:.36;
}
.soft-line-blue{
  left:-10vw;
  top:12vh;
  transform:rotate(10deg);
  background:linear-gradient(90deg,transparent,rgba(6,71,232,.38),transparent);
}
.soft-line-pink{
  right:-9vw;
  top:17vh;
  transform:rotate(-18deg);
  background:linear-gradient(90deg,transparent,rgba(239,43,151,.34),transparent);
}
.preview-v102 .brand-area{
  margin-bottom:8px;
}
.preview-v102 .logo-main{
  width:300px;
  max-width:62vw;
  border-radius:0;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 8px 18px rgba(6,43,114,.06));
}
.preview-v102 .login-stage{
  width:min(1120px,100%);
  grid-template-columns:270px minmax(420px,560px) 300px;
  gap:24px;
  align-items:center;
  margin-top:0;
}
.preview-v102 .login-card{
  border-radius:28px;
  padding:44px 48px 42px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 28px 90px rgba(7,23,53,.12);
}
.preview-v102 .pill-title{
  margin-bottom:24px;
  padding:10px 18px;
  font-size:.96rem;
  background:#edf3ff;
  color:#0753e8;
}
.preview-v102 .login-card h1{
  font-size:3rem;
  color:#05235b;
  font-weight:900;
  letter-spacing:-.075em;
  text-transform:lowercase;
}
.preview-v102 .login-subtitle{
  max-width:420px;
  margin:18px auto 32px;
  color:#45516c;
  font-size:1.05rem;
}
.preview-v102 .input-wrap{
  height:64px;
  border-radius:11px;
  border-color:#cfd6e5;
  background:#fff;
}
.preview-v102 .primary-button{
  min-height:64px;
  margin-top:16px;
  border-radius:11px;
  background:linear-gradient(135deg,#0759ff 0%,#063fdb 100%);
  box-shadow:0 16px 36px rgba(6,71,232,.24);
}
.preview-v102 .whatsapp-button{
  min-height:60px;
  border-radius:11px;
  color:#071735;
  border-color:#20b450;
}
.preview-v102 .security-note{
  margin-top:32px;
  max-width:400px;
}
.preview-v102 .feature-card{
  border-radius:26px;
  padding:28px;
  background:rgba(255,255,255,.88);
  box-shadow:0 26px 80px rgba(7,23,53,.10);
}
.preview-v102 .feature-row{
  grid-template-columns:72px 1fr;
  gap:18px;
  padding:23px 0;
}
.preview-v102 .feature-icon{
  width:72px;
  height:72px;
  border-radius:18px;
}
.preview-v102 .home-visual-card{
  height:520px;
  border-radius:38px 0 0 38px;
  position:relative;
  overflow:visible;
}
.preview-v102 .home-curve{
  position:absolute;
  right:-30px;
  bottom:-40px;
  width:410px;
  height:410px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(5,35,91,.16),rgba(255,255,255,.52));
  box-shadow:inset -18px 20px 70px rgba(6,71,232,.08);
}
.preview-v102 .sofa-shape{
  position:absolute;
  left:-88px;
  bottom:70px;
  width:345px;
  height:115px;
  border-radius:40px 48px 22px 22px;
  background:linear-gradient(180deg,#d7dde9,#bac6d8);
  box-shadow:0 18px 50px rgba(5,35,91,.12);
}
.preview-v102 .sofa-shape::before{
  content:"";
  position:absolute;
  left:40px;
  bottom:-28px;
  width:185px;
  height:44px;
  border-radius:0 0 28px 28px;
  background:#aebbd0;
}
.preview-v102 .cushion{
  position:absolute;
  top:20px;
  width:88px;
  height:72px;
  border-radius:20px;
}
.preview-v102 .c1{
  right:102px;
  background:#273b62;
}
.preview-v102 .c2{
  right:28px;
  background:#e2e4ea;
}
.preview-v102 .plant-shape{
  position:absolute;
  left:-80px;
  bottom:118px;
  width:120px;
  height:200px;
}
.preview-v102 .plant-shape::before{
  content:"";
  position:absolute;
  left:58px;
  bottom:0;
  width:5px;
  height:150px;
  background:#295d39;
  border-radius:999px;
}
.preview-v102 .plant-shape i{
  position:absolute;
  width:52px;
  height:78px;
  border-radius:50% 50% 50% 8px;
  background:#244b27;
  transform-origin:bottom right;
  filter:drop-shadow(0 8px 14px rgba(20,55,30,.12));
}
.preview-v102 .plant-shape i:nth-child(1){left:5px;top:36px;transform:rotate(-34deg)}
.preview-v102 .plant-shape i:nth-child(2){left:52px;top:18px;transform:rotate(32deg)}
.preview-v102 .plant-shape i:nth-child(3){left:18px;top:96px;transform:rotate(-18deg)}
.preview-v102 .router-illustration{
  position:absolute;
  left:-38px;
  bottom:24px;
  width:188px;
  height:72px;
  border-radius:28px 28px 14px 14px;
  background:#fff;
  box-shadow:0 22px 60px rgba(7,23,53,.14);
}
.preview-v102 .router-light{
  position:absolute;
  left:28px;
  top:31px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#55c7ff;
  box-shadow:0 0 12px #55c7ff;
}
.preview-v102 .router-dots{
  position:absolute;
  left:64px;
  top:33px;
  display:flex;
  gap:8px;
}
.preview-v102 .router-dots i{
  width:4px;
  height:4px;
  border-radius:50%;
  background:#afd0f4;
}
.preview-v102 .wifi-orb{
  position:absolute;
  right:28px;
  top:198px;
  width:126px;
  height:126px;
  border:4px solid rgba(255,255,255,.72);
  box-shadow:0 0 32px rgba(139,198,255,.30), inset 0 0 36px rgba(255,255,255,.56);
}
.preview-v102 .benefits-row{
  margin-top:34px;
  width:min(760px,100%);
}
.preview-v102 .benefits-row div{
  grid-template-columns:44px 1fr;
}
.preview-v102 .benefits-row span{
  font-size:1.45rem;
}
@media (max-width:1120px){
  .preview-v102 .login-stage{
    grid-template-columns:minmax(360px,560px) 300px;
    justify-content:center;
  }
  .preview-v102 .home-visual-card{
    display:none;
  }
}
@media (max-width:860px){
  .preview-v102.login-shell{
    padding:28px 14px 30px;
  }
  .preview-v102 .logo-main{
    width:230px;
  }
  .preview-v102 .login-stage{
    grid-template-columns:1fr;
  }
  .preview-v102 .feature-card{
    display:none;
  }
  .preview-v102 .login-card{
    padding:30px 22px;
  }
  .preview-v102 .login-card h1{
    font-size:2.25rem;
  }
  .preview-v102 .benefits-row{
    grid-template-columns:1fr;
    max-width:430px;
  }
}


/* ===== UseNet Central v1.0.3 — botões funcionais ===== */
.action-hint{
  margin:-16px auto 24px;
  width:100%;
  max-width:420px;
  padding:12px 14px;
  border-radius:14px;
  background:#edf3ff;
  border:1px solid #dbe7ff;
  color:#0647e8;
  font-weight:800;
  text-align:center;
  font-size:.92rem;
}
.feature-card a.feature-row{
  color:inherit;
}
.feature-link{
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
  border-radius:18px;
  margin:0 -10px;
  padding-left:10px!important;
  padding-right:10px!important;
}
.feature-link:hover{
  transform:translateX(2px);
  background:rgba(6,71,232,.035);
}
.quick-actions-panel{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin:0 0 22px;
}
.quick-action-card{
  min-height:140px;
  border:1px solid #deded8;
  border-radius:22px;
  background:#fff;
  box-shadow:0 18px 54px rgba(7,23,53,.06);
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  text-align:left;
  color:#071735;
}
.quick-action-card span{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  font-size:1.45rem;
  font-weight:900;
}
.quick-action-card strong{
  font-size:1.02rem;
  letter-spacing:-.03em;
}
.quick-action-card small{
  color:#66718a;
  line-height:1.35;
}
.quick-action-card.blue span{background:#eef3ff;color:#0647e8}
.quick-action-card.dark span{background:#f1f3f7;color:#071735}
.quick-action-card.green span{background:#eafbf1;color:#16a34a}
.quick-action-card.pink span{background:#fff0f7;color:#ef2b97}
.quick-action-card:hover{
  transform:translateY(-2px);
  transition:.15s ease;
}
.quick-action-card.disabled{
  opacity:.55;
  cursor:not-allowed;
}
.quick-action-card.disabled:hover{
  transform:none;
}
@media (max-width:1120px){
  .quick-actions-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .quick-actions-panel{grid-template-columns:1fr}
  .quick-action-card{min-height:112px}
}