:root{--ink:#15143a;--panel:#1f1e4d;--line:#3a3980;--txt:#f4f1ff;--mut:#aaa8d8;--sakura:#ff7aa8;--gold:#ffc857;--ok:#5ee0a0;--err:#ff6b81}
*{box-sizing:border-box;margin:0}
html{color-scheme:dark}
body{min-height:100dvh;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));font-family:"Zen Maru Gothic",system-ui,sans-serif;line-height:1.5;color:var(--txt);background:radial-gradient(700px 420px at 0 0,#3b2a8c55,transparent),radial-gradient(600px 400px at 100% 100%,#ff7aa826,transparent),var(--ink)}
.card{width:min(100%,420px);background:var(--panel);border:2px solid var(--line);border-radius:22px 22px 8px 22px;padding:28px 24px;box-shadow:6px 6px 0 #0d0c26}
.brand{margin-bottom:22px}
h1{font:400 clamp(1.7rem,7vw,2.1rem)/1 "Dela Gothic One",system-ui,sans-serif;letter-spacing:.01em}
.xp{height:8px;margin-top:10px;border-radius:99px;background:#0d0c26;overflow:hidden}
.xp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--sakura),var(--gold))}
h2{font-size:1.25rem;margin-bottom:14px}
form{display:grid;gap:6px}
label{display:grid;gap:6px;font-weight:500;margin-top:8px}
input,textarea{width:100%;font:inherit;color:var(--txt);background:#15143a;border:2px solid var(--line);border-radius:10px;padding:11px 12px;min-height:46px}
textarea{resize:vertical}
input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
[aria-invalid=true]{border-color:var(--err)}
small{color:var(--err)}
.check{display:flex;align-items:center;gap:10px;font-weight:400}
.check input{width:22px;min-height:22px;accent-color:var(--sakura)}
.btn,.ghost{font:700 1rem "Zen Maru Gothic",sans-serif;min-height:48px;border-radius:12px;cursor:pointer;padding:0 18px}
.btn{margin-top:14px;border:0;color:#2a0f1c;background:var(--sakura);box-shadow:0 4px 0 #b84a70}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #b84a70}
.btn:disabled{opacity:.7;cursor:wait}
.ghost{margin-top:18px;width:100%;color:var(--txt);background:transparent;border:2px solid var(--line)}
.ghost:hover{border-color:var(--sakura)}
.links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px}
a{color:var(--gold)}
.mut{color:var(--mut);margin-bottom:10px}
.who{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.who h2,.who .mut{margin:0}
.avatar{width:60px;height:60px;border-radius:18px 18px 4px 18px;display:grid;place-items:center;font:400 1.6rem "Dela Gothic One",sans-serif;background:var(--sakura);color:#2a0f1c;flex:none}
#toasts{position:fixed;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom));display:grid;justify-items:center;gap:8px;padding:0 16px;pointer-events:none}
.toast{max-width:420px;padding:12px 16px;border-radius:12px;font-weight:500;background:#0d0c26;border:2px solid var(--ok)}
.toast.err{border-color:var(--err)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Fase 2 */
body.app{display:block;padding:0 0 calc(76px + env(safe-area-inset-bottom))}
.shell{max-width:980px;margin:0 auto;padding:16px}
.shell section{margin-top:26px}
nav#nav{position:fixed;inset:auto 0 0;display:flex;justify-content:space-around;background:var(--panel);border-top:2px solid var(--line);padding:6px 6px max(6px,env(safe-area-inset-bottom));z-index:5}
nav#nav .logo{display:none}
nav#nav a,nav#nav .out{display:grid;justify-items:center;gap:2px;padding:6px 10px;min-width:56px;min-height:48px;color:var(--mut);text-decoration:none;font:500 .75rem "Zen Maru Gothic",sans-serif;background:none;border:0;border-radius:10px;cursor:pointer}
nav#nav a[aria-current=page]{color:var(--gold)}
nav#nav a:hover,nav#nav .out:hover{color:var(--txt)}
@media(min-width:720px){body.app{padding-bottom:0}nav#nav{position:static;border:2px solid var(--line);border-radius:16px;justify-content:flex-start;align-items:center;gap:6px;margin-bottom:22px;padding:8px 12px}nav#nav .logo{display:block;font:400 1.1rem "Dela Gothic One",sans-serif;margin-right:auto}nav#nav a,nav#nav .out{grid-auto-flow:column;gap:8px;font-size:.95rem}}
.pg{margin-bottom:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.stat{display:grid;gap:2px;padding:14px;background:var(--panel);border:2px solid var(--line);border-radius:14px 14px 4px 14px}
.stat i{color:var(--sakura)}
.stat b{font:400 1.7rem "Dela Gothic One",sans-serif}
.stat span{color:var(--mut)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.acard{display:grid;align-content:start;gap:6px;color:var(--txt);text-decoration:none}
.acard img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:12px 12px 4px 12px;background:var(--panel);border:2px solid var(--line)}
.acard:hover img{border-color:var(--sakura)}
.ttl{font-weight:700;font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tags{display:flex;flex-wrap:wrap;gap:4px}
.tag{font-size:.75rem;padding:2px 8px;border-radius:99px;background:#0d0c26;border:1px solid var(--line)}
.tag.fav{color:var(--sakura)}
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px}
.tabs button{flex:none;font:500 .9rem "Zen Maru Gothic",sans-serif;min-height:40px;padding:0 14px;border-radius:99px;color:var(--txt);background:transparent;border:2px solid var(--line);cursor:pointer}
.tabs button[aria-pressed=true]{background:var(--sakura);border-color:var(--sakura);color:#2a0f1c}
.tabs button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}
.pager .ghost{width:auto;margin:0}
.ghost:disabled{opacity:.5;cursor:default}
.detail{display:grid;gap:20px}
@media(min-width:720px){.detail{grid-template-columns:240px 1fr}}
.detail img{width:100%;max-width:240px;border-radius:16px 16px 4px 16px;border:2px solid var(--line)}
.meta{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--mut);margin:8px 0 14px}
.sin{max-width:70ch;margin-bottom:18px;white-space:pre-line}
.ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;max-width:560px;align-items:end}
.ctl .ghost{margin:0}
select{font:inherit;color:var(--txt);background:var(--ink);border:2px solid var(--line);border-radius:10px;padding:10px;min-height:46px;width:100%}
select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}


/* Identidade visual compartilhada nas telas públicas. */
.brand-lockup{display:flex;align-items:center;gap:12px;margin-bottom:14px;min-width:0}
.brand-lockup img{display:block;width:56px;height:56px;flex:none;object-fit:contain;border-radius:0;box-shadow:none;background:transparent}
.brand-lockup h1{min-width:0;font-size:clamp(1.35rem,6vw,1.7rem);line-height:1.1;overflow-wrap:anywhere}


/* Transições progressivas entre documentos: mantém a arquitetura multipágina e
   suaviza a navegação em navegadores com suporte à View Transition API. */
@supports (view-transition-name: root) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: page-out 150ms cubic-bezier(.2, .7, .2, 1) both; }
  ::view-transition-new(root) { animation: page-in 210ms cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes page-out { to { opacity: 0; transform: translateY(-4px); } }
  @keyframes page-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
}

/* Feedback tátil visual consistente, sem remover o indicador de teclado. */
:where(a, button, input, textarea, select, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:where(button, [role="button"]):not(:disabled):active { transform: scale(.975); }
:where(a, button, input, textarea, select, [role="button"]):focus-visible {
  outline: 3px solid var(--gold, #ffc857);
  outline-offset: 3px;
}
html { scroll-behavior: smooth; }
body { min-height: 100vh; min-height: 100dvh; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :where(button, [role="button"]):not(:disabled):active { transform: none; }
  @view-transition { navigation: none; }
}


/* Acesso OAuth integrado ao mesmo sistema visual das telas de autenticação. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 15px 0 10px;
  color: var(--mut);
  font-size: .82rem;
}
.auth-divider::before,
.auth-divider::after {
  height: 1px;
  flex: 1;
  background: var(--line);
  content: "";
}
.google-btn {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  border: 2px solid var(--line);
  border-radius: 12px;
  color: var(--txt);
  background: #17163f;
  font: 700 1rem "Zen Maru Gothic", system-ui, sans-serif;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.google-btn .google-logo { display: block; width: 24px; height: 25px; flex: none; object-fit: contain; }
.google-btn:hover:not(:disabled) { border-color: var(--gold); background: #22204f; }
.google-btn:active:not(:disabled) { transform: scale(.98); }
.google-btn:disabled { opacity: .7; cursor: wait; }
.google-btn[aria-busy="true"] { color: var(--mut); }