/* Tela de login e menu da conta (runtime.js). Usa as cores do Hub (--bg, --surface, --lime…). */
html.hl-on{overflow:hidden}
.hl{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:var(--bg,#f3f5ef);overflow-y:auto}
.hl[hidden]{display:none}
.hl-box{width:min(380px,100%);background:var(--surface,#fff);color:var(--ink,#1d261a);border:1px solid var(--line,#dce2d3);border-radius:var(--r-lg,10px);box-shadow:var(--shadow);padding:26px 24px 22px;border-top:5px solid var(--lime,#b5d172);font-family:var(--body,"Roboto",Arial,sans-serif)}
.hl-marca{font-weight:700;letter-spacing:.18em;font-size:15px;display:flex;align-items:center;gap:8px;margin-bottom:18px}
.hl-marca span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;background:var(--lime,#b5d172);color:var(--on-lime,#1d261a);border-radius:4px;padding:2px 6px 2px 7px}
.hl h1{font-size:20px;font-weight:600;margin:0 0 14px;letter-spacing:.01em}
.hl form{display:flex;flex-direction:column;gap:12px}
.hl label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink-2,#4f5a49)}
.hl input{font:inherit;font-size:16px;font-weight:400;color:var(--ink,#1d261a);background:var(--surface,#fff);border:1px solid var(--line,#dce2d3);border-radius:var(--r,8px);padding:10px 12px}
.hl input:focus{outline:2px solid var(--focus,#6f9a2e);outline-offset:1px}
.hl-btn{font:inherit;font-weight:700;font-size:15px;border-radius:var(--r,8px);border:1px solid var(--lime-strong,#8fb44a);background:var(--lime,#b5d172);color:var(--on-lime,#1d261a);padding:11px 14px;cursor:pointer;width:100%}
.hl-btn:hover{background:var(--lime-strong,#8fb44a)}
.hl-btn:disabled{opacity:.6;cursor:wait}
.hl-link{font:inherit;font-size:13px;font-weight:600;background:none;border:0;padding:0;margin-top:14px;cursor:pointer;color:var(--ink-2,#4f5a49);text-decoration:underline;text-underline-offset:3px}
.hl-msg{margin:0 0 4px;font-size:14px;line-height:1.5;color:var(--ink-2,#4f5a49)}
.hl-nota{margin:16px 0 0;font-size:12px;color:var(--ink-3,#7d8776)}
.hl-erro{margin:0;min-height:1em;font-size:13px;font-weight:600;color:var(--bad-ink,#8c2c1a)}
.hl-erro:empty{display:none}
.hl-menu{position:fixed;z-index:60;width:min(290px,calc(100vw - 16px));background:var(--surface,#fff);color:var(--ink,#1d261a);border:1px solid var(--line,#dce2d3);border-radius:var(--r-lg,10px);box-shadow:var(--shadow);padding:12px;display:flex;flex-direction:column;gap:12px}
.hl-menu[hidden]{display:none}
.hl-menu-eu{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--ink-3,#7d8776);overflow-wrap:anywhere}
.hl-menu-eu b{font-size:14.5px;color:var(--ink,#1d261a)}
.hl-menu-nome{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--line,#dce2d3)}
.hl-menu-nome label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--ink-2,#4f5a49)}
.hl-menu-nome input{font:inherit;background:var(--surface,#fff);border:1px solid var(--line,#dce2d3);border-radius:6px;padding:6px 8px}
.hl-menu .btn{justify-content:center}