/* Bolla Companion — páginas de conta (dark, mobile-first). Cores da marca: #0E0F0C / #FF5A2C. */
:root { color-scheme: dark; --bg:#0E0F0C; --card:#16180F; --card2:#1D2017; --line:#2B2C27; --text:#F3F1EC;
  --muted:#A9AAA0; --orange:#FF5A2C; --green:#5BD18B; --red:#FF6B6B; --yellow:#F5C04A; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); }
body { font:16px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust:100%; min-height:100vh; }
.wrap { max-width:440px; margin:0 auto; padding:28px 18px calc(32px + env(safe-area-inset-bottom)); }
.brand { display:flex; align-items:center; gap:12px; margin:8px 0 22px; }
.brand img { display:block; height:46px; width:auto; }
.tag { color:var(--orange); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border-left:1px solid var(--line); padding-left:12px; }
.card { background:var(--card); border:1px solid var(--line); border-top:3px solid var(--orange); border-radius:16px;
  padding:26px 22px 22px; }
h1 { font-size:24px; line-height:1.25; margin:0 0 10px; letter-spacing:-.01em; }
p { margin:0 0 14px; }
.muted { color:var(--muted); }
.small { font-size:14px; }
a { color:var(--orange); }
.icon { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:700; margin-bottom:14px; }
.icon.ok { background:rgba(91,209,139,.14); color:var(--green); }
.icon.warn { background:rgba(245,192,74,.14); color:var(--yellow); }
.icon.err { background:rgba(255,107,107,.14); color:var(--red); }
form { margin:18px 0 14px; }
label { display:block; color:var(--muted); font-size:14px; margin:14px 0 6px; }
input[type=password], input[type=text] { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line);
  border-radius:12px; padding:13px 14px; font-size:17px; outline:none; }
input:focus { border-color:var(--orange); }
.pwrow { display:flex; gap:8px; }
.pwrow input { flex:1; min-width:0; }
.ghost { background:transparent; color:var(--text); border:1px solid var(--line); border-radius:12px; padding:0 14px;
  font-size:14px; cursor:pointer; }
.btn { width:100%; margin-top:20px; background:var(--orange); color:#0E0F0C; border:0; border-radius:12px;
  padding:15px 18px; font-size:17px; font-weight:700; cursor:pointer; }
.btn:active { opacity:.85; }
.btn[disabled] { opacity:.45; }
.meter { height:6px; background:var(--card2); border-radius:6px; margin:10px 0 8px; overflow:hidden; }
.meter span { display:block; height:100%; width:0; background:var(--red); transition:width .2s, background .2s; }
.rules { list-style:none; padding:0; margin:0; font-size:14px; color:var(--muted); }
.rules li { padding-left:22px; position:relative; margin:3px 0; }
.rules li::before { content:"○"; position:absolute; left:2px; }
.rules li.ok { color:var(--green); }
.rules li.ok::before { content:"✓"; }
.hint { font-size:14px; min-height:20px; margin:6px 0 0; color:var(--muted); }
.hint.bad { color:var(--red); }
.hint.good { color:var(--green); }
.alert { background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.35); color:#FFB3B3; border-radius:12px;
  padding:11px 13px; font-size:15px; }
.foot { text-align:center; color:var(--muted); font-size:12px; margin-top:22px; }
.foot a { color:var(--muted); }