@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --accent:#FD6C48;
  --accent-dark:#e2532f;
  --secondary:#61748B;
  --bg:#FFFFFF;
  --ink:#25313d;
  --line:#e7eaee;
  --panel:#f8f9fb;
  --good:#2f8a5b;
  --bad:#c0392b;
  --warn:#b8860b;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Work Sans',sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fff 0%,#fdf3f0 260px,#fff 560px);
  min-height:100vh;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;margin:0;}
a{color:var(--accent-dark);}
.wrap{max-width:1120px;margin:0 auto;padding:24px 20px 70px;}
.wrap-narrow{max-width:440px;margin:0 auto;padding:40px 20px;}

/* ---------- topo ---------- */
header.topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line);}
header.topbar .brand{display:flex;align-items:center;gap:12px;}
header.topbar .mark{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Space Grotesk',sans-serif;font-size:16px;flex-shrink:0;}
header.topbar h1{font-size:17px;font-weight:600;}
header.topbar p{margin:2px 0 0;font-size:11.5px;color:var(--secondary);}
nav.mainnav{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
nav.mainnav a{
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;color:var(--ink);font-size:13px;font-weight:600;
  padding:8px 13px;border-radius:9px;border:1.5px solid transparent;
}
nav.mainnav a:hover{background:var(--panel);}
nav.mainnav a.active{border-color:var(--accent);background:#fff5f2;color:var(--accent-dark);}
nav.mainnav a.logout{color:var(--secondary);}
.who{font-size:12px;color:var(--secondary);margin-right:4px;}

/* ---------- cards / painéis ---------- */
.card-panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:20px;}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;}
h2.section-title{font-size:16px;font-weight:600;margin:0 0 14px;display:flex;align-items:center;gap:10px;}
h2.section-title .sub{font-size:11px;font-weight:400;color:var(--secondary);margin-left:auto;font-family:'Work Sans',sans-serif;}

/* ---------- login ---------- */
.login-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:0 10px 30px rgba(37,49,61,.06);}
.login-card .mark{width:52px;height:52px;border-radius:13px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Space Grotesk',sans-serif;font-size:20px;margin:0 auto 16px;}
.login-card h1{font-size:18px;text-align:center;margin-bottom:4px;}
.login-card p.lead{font-size:12.5px;color:var(--secondary);text-align:center;margin:0 0 24px;}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-size:12px;color:var(--secondary);font-weight:600;}
.field input[type=text],.field input[type=password],.field input[type=email],.field input[type=number],.field input[type=tel],.field select,.field textarea{
  padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;font-size:13.5px;font-family:'Work Sans',sans-serif;background:#fff;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
.field-note{font-size:10.5px;color:var(--secondary);}
.field-row{display:flex;gap:12px;flex-wrap:wrap;}
.field-row .field{flex:1;min-width:180px;}
.check-line{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin-bottom:10px;cursor:pointer;}
.check-line input{accent-color:var(--accent);width:16px;height:16px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:10px;padding:11px 20px;font-size:13.5px;font-weight:700;
  cursor:pointer;font-family:'Work Sans',sans-serif;text-decoration:none;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);color:#fff;
  box-shadow:0 4px 14px rgba(253,108,72,.25);transition:.15s;
}
.btn:hover{transform:translateY(-1px);}
.btn.btn-block{width:100%;}
.btn.btn-secondary{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none;}
.btn.btn-secondary:hover{border-color:var(--secondary);}
.btn.btn-sm{padding:7px 13px;font-size:12px;}
.btn.btn-danger{background:linear-gradient(135deg,#d9584a 0%,#b8382b 100%);box-shadow:0 4px 14px rgba(217,88,74,.25);}

.alert{border-radius:10px;padding:12px 14px;font-size:13px;margin-bottom:16px;line-height:1.5;}
.alert-error{background:#fdecea;color:var(--bad);border:1px solid #f6c4bd;}
.alert-success{background:#eaf6ef;color:var(--good);border:1px solid #bfe3cd;}
.alert-info{background:#eef4fb;color:#2d5f8a;border:1px solid #cfe0f2;}

/* ---------- tabelas ---------- */
table.tbl{width:100%;border-collapse:collapse;font-size:13px;}
table.tbl th,table.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;}
table.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.02em;color:var(--secondary);font-weight:700;}
table.tbl tr:hover td{background:#fafbfc;}
.badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;padding:4px 10px;border-radius:20px;}
.badge-pendente{background:#fdf3e3;color:var(--warn);}
.badge-aprovada{background:#e7f0fb;color:#2d5f8a;}
.badge-paga{background:#eaf6ef;color:var(--good);}
.badge-cancelada{background:#f3f3f4;color:var(--secondary);}
.badge-ativo{background:#eaf6ef;color:var(--good);}
.badge-inativo{background:#f3f3f4;color:var(--secondary);}

/* ---------- stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px;}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;}
.stat-card .stat-label{font-size:11px;color:var(--secondary);text-transform:uppercase;letter-spacing:.02em;font-weight:700;margin-bottom:6px;}
.stat-card .stat-value{font-size:22px;font-weight:700;font-family:'Space Grotesk',sans-serif;color:var(--ink);}
.stat-card .stat-value.accent{color:var(--accent-dark);}

/* ---------- simulador ---------- */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:6px;}
.product-btn{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:13px 12px;cursor:pointer;text-align:left;font-family:'Work Sans',sans-serif;transition:.15s;}
.product-btn:hover{border-color:var(--accent);}
.product-btn.active{border-color:var(--accent);background:#fff5f2;box-shadow:0 0 0 1px var(--accent) inset;}
.product-btn .pname{font-weight:600;font-size:13px;display:block;}
.product-btn .ptag{font-size:10.5px;color:var(--secondary);}

.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:6px;}
.plan-card{border:1.5px solid var(--line);border-radius:13px;padding:14px;cursor:pointer;background:#fff;}
.plan-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:#fff5f2;}
.plan-card .pname{font-weight:600;font-size:13px;margin-bottom:5px;}
.plan-card .pprice{font-size:17px;font-weight:700;color:var(--accent-dark);font-family:'Space Grotesk',sans-serif;}
.plan-card .pprice small{font-size:10.5px;font-weight:500;color:var(--secondary);}

.addon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;}
.addon-row{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:#fff;}
.addon-row.checked{border-color:var(--accent);background:#fff8f6;}
.addon-row .top-line{display:flex;align-items:flex-start;gap:8px;cursor:pointer;}
.addon-row input[type=checkbox]{margin-top:3px;accent-color:var(--accent);flex-shrink:0;}
.addon-row .aname{font-size:12px;font-weight:500;}
.addon-row .aunit{font-size:10px;color:var(--secondary);display:block;}
.addon-row .aprice{font-size:12px;font-weight:600;color:var(--accent-dark);margin-left:auto;white-space:nowrap;}
.addon-row .qty-inline{display:flex;align-items:center;gap:6px;margin-left:22px;}
.addon-row .qty-inline input{width:56px;padding:4px 6px;border:1.5px solid var(--line);border-radius:6px;font-size:11.5px;}

.commission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:4px;}
.commission-card{border:1.5px solid var(--line);border-radius:13px;padding:15px;cursor:pointer;background:#fff;}
.commission-card.active{border-color:var(--accent);background:#fff5f2;box-shadow:0 0 0 1px var(--accent) inset;}
.commission-card .ctag{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--secondary);margin-bottom:8px;}
.commission-card.active .ctag{color:var(--accent-dark);}
.commission-card .ctitle{font-weight:700;font-size:13.5px;margin-bottom:10px;font-family:'Space Grotesk',sans-serif;}
.commission-card .crow{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px dashed var(--line);}
.commission-card .crow:last-child{border-bottom:none;}
.commission-card .crow .v{font-weight:700;}
.commission-card .crow .v.hl{color:var(--accent-dark);}
.onetime-note{background:#fff8f6;border:1px dashed #ffd9cd;border-radius:12px;padding:14px 16px;font-size:12.5px;line-height:1.6;}
.onetime-note .crow{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;border-bottom:1px dashed #ffd9cd;}
.onetime-note .crow .v{font-weight:700;}
.onetime-note .crow .v.hl{color:var(--accent-dark);}

.qty-inline label{font-size:11px;color:var(--secondary);}
.qty-inline input{width:70px;padding:6px 8px;border:1.5px solid var(--line);border-radius:7px;font-size:12.5px;}

footer.pfooter{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);font-size:11px;color:var(--secondary);text-align:center;}

@media (max-width:760px){
  header.topbar{flex-direction:column;align-items:flex-start;}
  nav.mainnav{width:100%;}
}