/* Base que o claude.ai aplicava ao redor do estúdio */
html{color-scheme:light}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;font:14px/1.5 system-ui,sans-serif}
img{max-width:100%}
[hidden]{display:none!important}

/* Enquanto não há sessão, só a tela de entrada aparece */
body.gated > header.top, body.gated > main, body.gated > #modalRoot, body.gated > #modalRoot2{visibility:hidden}
.gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:var(--bg);padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));overflow-y:auto}
.gate-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px;display:grid;gap:14px}
.gate-brand{font-family:var(--f-display);font-weight:700;font-size:.95rem;color:var(--muted)}
.gate-brand span{color:var(--accent)}
.gate h1{font-family:var(--f-display);font-size:1.5rem;margin:0}
.gate-sub{color:var(--muted);margin:0}
.gate-note{margin:0;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--teal) 12%,var(--surface));font-size:.88rem}
.gate-form{display:grid;gap:8px}
.gate-form label{font-size:.85rem;font-weight:600;color:var(--muted)}
.gate-form input{font-size:1rem;padding:10px 12px}
.gate-form .btn{justify-content:center;padding:10px 14px;font-size:.95rem}
.gate-msg{min-height:1.4em;margin:0;font-size:.9rem;color:var(--warn)}
.gate .btn.ghost{justify-self:start}

/* Usuário no cabeçalho */
.whoami{display:flex;align-items:center;gap:8px;padding-left:10px;margin-left:4px;border-left:1px solid var(--line)}
.whoami .who{display:flex;align-items:center;gap:6px;font-size:.84rem;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.whoami{border-left:0;padding-left:0;margin-left:0}}

/* Painel de usuários */
.invite-form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 150px auto;gap:8px;align-items:end}
@media (max-width:760px){.invite-form{grid-template-columns:1fr 1fr}.invite-form .btn{grid-column:1/-1}}
#adminPanel h4{margin-top:8px}
#adminPanel details ul{margin:6px 0 0;padding-left:1.2em}
button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
