/* Portal Feed+ — folha única das páginas estáticas (login, sessão expirada, 404).
 * Identidade "Kipiai Azul": tokens do DS (tokens.css, cópia sem edição de feed-plus/src/report/tokens.css),
 * escala 11/13/15/25, cartão/botão/input do protótipo do Feed Manager.
 * Composição: painel azul da marca (wordmark em texto) + cartão claro. Tema claro FIXO (sem escuro).
 * Todos os url() são relativos a esta folha, para valer tanto em /plus/assets/ quanto em file://.
 */
@import url('tokens.css');

@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/montserrat-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --muted do DS (#7C766C) fica no limite de 4,5:1 sobre o branco; o texto usa o --muted-2 do DS. */
:root{--font:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--muted:var(--muted-2);color-scheme:light}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;min-height:100%;font-family:var(--font);background:var(--bg);color:var(--text);font-size:var(--fs-body);line-height:1.5;overflow-wrap:anywhere;-webkit-text-size-adjust:100%}
h1,p{margin:0}
button,input{font-family:var(--font)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
[hidden]{display:none !important}

/* Duas colunas na altura da janela: painel da marca à esquerda, cartão à direita. */
.shell{min-height:100%;display:grid;grid-template-columns:minmax(340px,42%) minmax(0,1fr)}

.panel{background:var(--brand);color:#fff;padding:var(--sp-6) 38px;display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-5)}
.mark{font-size:24px;font-weight:var(--w-strong);letter-spacing:1px;text-transform:uppercase;line-height:1;color:#fff}
.hero{display:flex;flex-direction:column;gap:6px}
.prod{font-size:var(--fs-h1);font-weight:var(--w-strong);line-height:1.2}
.tag{font-size:var(--fs-title);font-weight:600}
.sep{display:none}
.aud{font-size:var(--fs-body);font-weight:600}

.wrap{display:flex;align-items:center;justify-content:center;padding:32px 24px;min-width:0}
.card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--sp-5);display:flex;flex-direction:column;gap:18px}
.card h1{font-size:var(--fs-title);font-weight:700;color:var(--ink);line-height:1.3}
.sub{color:var(--muted);font-size:var(--fs-body);margin-top:4px}
.foot{color:var(--muted);font-size:var(--fs-body);padding-top:14px;border-top:1px solid var(--border)}

.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--fs-label);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.field input{font-size:12.5px;padding:9px 12px;min-height:38px;width:100%;border:1px solid var(--border);border-radius:var(--r-item);background:var(--surface);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--brand)}
.field input:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}

.btn{font-size:12.5px;font-weight:700;padding:10px 18px;min-height:40px;border-radius:var(--r-item);border:1px solid var(--brand);background:var(--brand);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn.block{width:100%}

.msg{font-size:var(--fs-body);padding:10px 14px;border-radius:var(--r-item);color:var(--ink);border:1px solid var(--border);border-left-width:4px;background:var(--surface)}
.msg.err{border-left-color:var(--mx-alert)}
.msg.ok{background:var(--infobg);border-color:var(--impbd);border-left-color:var(--brand)}

.busy{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:600}
.spin{flex:none;width:22px;height:22px;border-radius:50%;border:3px solid var(--hair);border-top-color:var(--brand);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}

a{color:var(--imptx);font-weight:600}
a.btn{color:#fff}

/* Celular: o painel vira faixa no topo e o cartão vem abaixo, com 16px de margem lateral. */
@media (max-width:859.98px){
.shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
.panel{padding:var(--sp-5);justify-content:flex-start;gap:10px}
.mark{font-size:22px}
.hero{display:block}
.prod,.tag{display:inline;font-size:var(--fs-title);font-weight:700;line-height:1.4}
.sep{display:inline;font-size:var(--fs-title);font-weight:700}
.aud{display:none}
.wrap{align-items:flex-start;padding:24px 16px}
.field input{font-size:16px}
}