/* =====================================================================
   HDB IA - plataforma SaaS · tema matrix (cores HDB)
   ===================================================================== */
:root, .theme-matrix {
  --bg-primary: #0d1117;  --bg-secondary: #161b22; --bg-tertiary: #010409;
  --text-primary: #e6edf3; --text-secondary: #8b949e;
  --accent: #3fb950;      --accent-2: #2f81f7;
  --danger: #f85149;      --warn: #d29922;
  --border: #30363d;      --card-bg: #161b22; --card-hover: #1c2330;
  --shadow: 0 10px 30px rgba(0,0,0,.55);
  --glow: 0 0 0 1px rgba(63,185,80,.35), 0 8px 26px rgba(63,185,80,.18);
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--text-primary);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(63,185,80,.10), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(47,129,247,.08), transparent 55%),
    var(--bg-primary);
  display: flex; flex-direction: column;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------ Topbar ------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between;
  align-items: center; gap: 14px; padding: 12px 22px; flex-wrap: wrap;
  background: rgba(13,17,23,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; color: inherit; }
.brand:hover { text-decoration: none; }
.logo { width: 38px; height: 38px; }
.brand-txt h1 { margin: 0; font-size: 1.15rem; }
.brand-txt .sub { color: var(--text-secondary); font-size: .76rem; }
.menu { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .88rem; }
.menu a { color: var(--text-primary); }
.menu a:hover { color: var(--accent); }

.pill { padding: 5px 11px; border-radius: 999px; font-size: .75rem; border: 1px solid var(--border);
        background: var(--bg-secondary); color: var(--text-secondary); }
.pill-ok { color: var(--accent); border-color: rgba(63,185,80,.5); background: rgba(63,185,80,.10); }
.pill-warn { color: var(--warn); border-color: rgba(210,153,34,.5); background: rgba(210,153,34,.10); }
.pill-err { color: var(--danger); border-color: rgba(248,81,73,.5); background: rgba(248,81,73,.10); }

/* ------------------------------- Layout ----------------------------- */
.wrap { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 26px 22px; }
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
        padding: 20px 22px; box-shadow: var(--shadow); margin-bottom: 18px; }
.card h2 { margin: 0 0 12px; font-size: 1.05rem; }
.card h3 { margin: 16px 0 8px; font-size: .95rem; }
.muted { color: var(--text-secondary); }
.small { font-size: .8rem; }
.center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sep { height: 1px; background: var(--border); margin: 18px 0; }

/* ------------------------------- Hero ------------------------------- */
.hero { text-align: center; padding: 44px 10px 26px; }
.hero h2 { font-size: 2.2rem; margin: 0 0 12px; line-height: 1.2; }
.hero h2 span { color: var(--accent); }
.hero p { color: var(--text-secondary); max-width: 760px; margin: 0 auto 22px; font-size: 1.02rem; line-height: 1.6; }
.hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.feature { text-align: left; }
.feature .ico { font-size: 1.5rem; color: var(--accent); }
.feature b { display: block; margin: 6px 0 4px; }
.feature p { margin: 0; font-size: .86rem; }

/* ------------------------------ Botoes ------------------------------ */
.btn { border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary);
       padding: 10px 17px; border-radius: 9px; cursor: pointer; font-size: .88rem; font-weight: 600;
       transition: .15s; display: inline-block; text-decoration: none; text-align: center; }
.btn:hover { background: var(--card-hover); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #05140a; }
.btn-primary:hover { filter: brightness(1.1); background: var(--accent); }
.btn-blue { background: var(--accent-2); border-color: var(--accent-2); color: #041428; }
.btn-blue:hover { filter: brightness(1.1); }
.btn-danger { border-color: rgba(248,81,73,.55); color: var(--danger); background: transparent; }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; display: block; }
.btn-lg { padding: 13px 24px; font-size: .95rem; }

/* ------------------------------- Forms ------------------------------ */
label.lbl { display: block; font-size: .76rem; color: var(--text-secondary); text-transform: uppercase;
            letter-spacing: .4px; margin: 12px 0 4px; }
.input, textarea.input, select.input {
  width: 100%; background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 9px; padding: 11px 13px; font-family: inherit; font-size: .9rem; margin-bottom: 4px;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }
.chk { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text-secondary); margin: 10px 0; }
.alerta { border-radius: 10px; padding: 11px 14px; font-size: .87rem; margin-bottom: 14px; border: 1px solid; }
.alerta-erro { color: #ffb4ae; background: rgba(248,81,73,.10); border-color: rgba(248,81,73,.45); }
.alerta-ok   { color: #a8f0a8; background: rgba(63,185,80,.10); border-color: rgba(63,185,80,.45); }
.alerta-aviso{ color: #f0d99a; background: rgba(210,153,34,.10); border-color: rgba(210,153,34,.45); }

/* ------------------------------- Planos ----------------------------- */
.plano { position: relative; display: flex; flex-direction: column; }
.plano.destaque { border-color: var(--accent); box-shadow: var(--glow); }
.plano .tag-dest { position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
                   background: var(--accent); color: #05140a; font-size: .7rem; font-weight: 700;
                   padding: 3px 12px; border-radius: 999px; }
.plano .nome { font-size: 1.05rem; font-weight: 700; }
.plano .preco { font-size: 2rem; font-weight: 800; color: var(--accent); margin: 6px 0 2px; }
.plano .preco small { font-size: .8rem; color: var(--text-secondary); font-weight: 400; }
.plano ul { list-style: none; padding: 0; margin: 14px 0 18px; font-size: .86rem; color: var(--text-secondary); }
.plano ul li { padding: 5px 0 5px 22px; position: relative; }
.plano ul li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.plano .btn { margin-top: auto; }

/* -------------------------------- Painel ---------------------------- */
.stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat .box { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.stat .t { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); }
.stat .v { font-size: 1.35rem; font-weight: 700; color: var(--accent); margin-top: 6px; }
.stat .s { font-size: .76rem; color: var(--text-secondary); }

.chat-main { display: flex; flex-direction: column; height: calc(100vh - 330px); min-height: 420px; }
.chat-log { flex: 1; overflow-y: auto; padding: 4px; display: flex; flex-direction: column; gap: 12px; }
.msg { border-radius: 12px; padding: 10px 13px; border: 1px solid var(--border); max-width: 88%; }
.msg.user { align-self: flex-end; background: rgba(47,129,247,.12); border-color: rgba(47,129,247,.4); }
.msg.bot { align-self: flex-start; background: var(--bg-tertiary); }
.msg-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .6px; color: var(--text-secondary); margin-bottom: 4px; }
.msg-body { white-space: pre-wrap; word-wrap: break-word; font-size: .9rem; line-height: 1.5; }
.chat-input { display: flex; gap: 10px; align-items: flex-end; border-top: 1px solid var(--border); padding-top: 12px; }
.chat-input textarea { margin-bottom: 0; resize: vertical; }
.chat-meta { font-size: .76rem; color: var(--text-secondary); margin-top: 8px; }

table.tbl { width: 100%; border-collapse: collapse; font-size: .84rem; }
table.tbl th, table.tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
table.tbl th { color: var(--text-secondary); font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; }
table.tbl tr:hover td { background: var(--card-hover); }
.badge { padding: 2px 8px; border-radius: 999px; font-size: .72rem; border: 1px solid var(--border); }
.badge-ok { color: var(--accent); border-color: rgba(63,185,80,.5); }
.badge-pend { color: var(--warn); border-color: rgba(210,153,34,.5); }
.badge-off { color: var(--danger); border-color: rgba(248,81,73,.5); }

pre.code { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 10px;
           padding: 12px 14px; font-family: "JetBrains Mono", Consolas, monospace; font-size: .8rem;
           overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin: 0 0 10px; }
code { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: .84em; }

.qr { background: #fff; padding: 10px; border-radius: 12px; display: inline-block; }
.qr img { display: block; width: 240px; height: 240px; }
.pix-copy { display: flex; gap: 8px; align-items: center; }
.pix-copy .input { margin-bottom: 0; font-family: monospace; font-size: .76rem; }

footer.foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
              padding: 16px 22px; border-top: 1px solid var(--border); background: var(--bg-secondary);
              font-size: .78rem; color: var(--text-secondary); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: #2b333d; border-radius: 8px; border: 2px solid var(--bg-primary); }