/* ==========================================================================
   Prislack.fun — sistema de design
   Um arquivo, dois temas. Sem dependências, sem rede.
   Tudo é quadrado: raio máximo de 3px, bordas visíveis, zero gradiente.
   ========================================================================== */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  color-scheme: light;

  --bg:        #F4F4F2;
  --surface:   #FFFFFF;
  --surface-2: #EDEDEA;
  --surface-3: #E4E4E0;
  --line:      #DCDCD7;
  --line-2:    #C9C9C3;

  --text:      #14151A;
  --text-2:    #4A4D57;
  --muted:     #63666F;

  --accent:      #5A4CD0;
  --accent-ink:  #4A3DBE;
  --accent-soft: #EFEDFB;
  --accent-line: #C7C0F0;
  --on-accent:   #FFFFFF;

  --good: #0B7A2E;  --good-soft: #E4F3E8;
  --warn: #8A5A00;  --warn-soft: #FAF0DC;
  --crit: #B3322D;  --crit-soft: #FAE9E8;

  --r: 3px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --shadow: none;
  --header-h: 56px;
  --sidebar-w: 224px;
}

:root[data-theme="dark"]{
  color-scheme: dark;

  --bg:        #0D0F1A;
  --surface:   #141724;
  --surface-2: #1B1F30;
  --surface-3: #232840;
  --line:      #2A2F44;
  --line-2:    #39405C;

  --text:      #EDEFF7;
  --text-2:    #9AA2BD;
  --muted:     #8992AE;

  --accent:      #8D82E8;
  --accent-ink:  #B7AFF2;
  --accent-soft: #1E2038;
  --accent-line: #3A3768;
  --on-accent:   #101020;

  --good: #3BD16B;  --good-soft: #12251A;
  --warn: #F2B01E;  --warn-soft: #2A2113;
  --crit: #E8736E;  --crit-soft: #2C1817;
}

/* ── reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ height:100%; }
body{
  margin:0; min-height:100%;
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body.has-sidebar{ padding-left:var(--sidebar-w); }
h1,h2,h3,h4,h5,p,figure,ul,ol{ margin:0; padding:0; }
ul,ol{ list-style:none; }
/* .btn e afins declaram display, o que anula o [hidden] do navegador. */
[hidden]{ display:none !important; }
img,svg,iframe{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:var(--accent-ink); text-decoration:none; }
a:hover{ text-decoration:underline; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--surface); color:var(--text);
  padding:10px 16px; border:1px solid var(--line);
}
.skip:focus{ left:0; }

/* ── tipografia ─────────────────────────────────────────────────────────── */
.mono{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
}
.h1{ font-size:30px; font-weight:640; letter-spacing:-.022em; line-height:1.14; }
.h2{ font-size:20px; font-weight:620; letter-spacing:-.014em; line-height:1.24; }
.h3{ font-size:15.5px; font-weight:620; letter-spacing:-.006em; }
.lead{ font-size:16px; line-height:1.6; color:var(--text-2); text-wrap:pretty; }
.small{ font-size:13px; color:var(--text-2); }
.tiny{ font-size:12px; color:var(--muted); }
.num{ font-variant-numeric:tabular-nums; }

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }
.wrap-narrow{ max-width:760px; }
.page{ padding:34px 0 88px; }
.stack{ display:flex; flex-direction:column; gap:18px; }
.stack-sm{ display:flex; flex-direction:column; gap:10px; }
.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.grid{ display:grid; gap:14px; }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.spacer{ flex:1; }

.page-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding-bottom:18px; margin-bottom:22px;
  border-bottom:1px solid var(--line);
}

/* ── superfícies ────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.card-pad{ padding:18px; }
.card-head{
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.rows > *{ border-top:1px solid var(--line); }
.rows > *:first-child{ border-top:0; }
.rule{ height:1px; background:var(--line); border:0; }

.empty{
  padding:44px 20px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.empty .h3{ color:var(--text); }
.empty p{ font-size:13px; color:var(--muted); max-width:40ch; }

/* ── botões ─────────────────────────────────────────────────────────────── */
.btn{
  --bg-b:transparent; --fg-b:var(--text); --bd-b:var(--line);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 14px; border-radius:var(--r); cursor:pointer;
  font-size:13.5px; font-weight:550; white-space:nowrap;
  background:var(--bg-b); color:var(--fg-b); border:1px solid var(--bd-b);
  transition:background .13s linear, color .13s linear, border-color .13s linear;
}
.btn:hover{ text-decoration:none; }
.btn svg{ width:15px; height:15px; flex:none; }
.btn-primary{ --bg-b:var(--accent); --fg-b:var(--on-accent); --bd-b:var(--accent); font-weight:600; }
.btn-primary:hover{ --bg-b:var(--accent-ink); --bd-b:var(--accent-ink); }
.btn-outline{ --bg-b:var(--surface); }
.btn-outline:hover{ --bg-b:var(--surface-2); --bd-b:var(--line-2); }
.btn-ghost{ --bd-b:transparent; --fg-b:var(--text-2); }
.btn-ghost:hover{ --bg-b:var(--surface-2); --fg-b:var(--text); }
.btn-danger{ --fg-b:var(--crit); --bd-b:var(--line); --bg-b:var(--surface); }
.btn-danger:hover{ --bg-b:var(--crit-soft); --bd-b:var(--crit); }
.btn-sm{ padding:5px 10px; font-size:12.5px; }
.btn-lg{ padding:11px 22px; font-size:15px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.icon-btn{
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--text-2); cursor:pointer;
  transition:background .13s linear, color .13s linear, border-color .13s linear;
}
.icon-btn:hover{ background:var(--surface-2); color:var(--text); border-color:var(--line-2); }
.icon-btn svg{ width:16px; height:16px; }

/* ── formulários ────────────────────────────────────────────────────────── */
.field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.field > label{ font-size:12.5px; font-weight:550; color:var(--text-2); }
.input{
  width:100%; padding:9px 11px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--r);
  font-size:14px;
  transition:border-color .13s linear, box-shadow .13s linear;
}
.input::placeholder{ color:var(--muted); opacity:.75; }
.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
textarea.input{ resize:vertical; min-height:78px; line-height:1.5; }
select.input{
  appearance:none; cursor:pointer; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2363666F' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 4.75 6 7.75 9 4.75'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:12px;
}
:root[data-theme="dark"] select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238992AE' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 4.75 6 7.75 9 4.75'/%3E%3C/svg%3E");
}
.hint{ font-size:12px; color:var(--muted); }
.check{ display:flex; align-items:flex-start; gap:9px; cursor:pointer; }
.check input[type=checkbox]{ width:16px; height:16px; margin:2px 0 0; flex:none; accent-color:var(--accent); cursor:pointer; }

.pw-wrap{ position:relative; }
.pw-wrap .input{ padding-right:62px; }
.pw-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  padding:4px 8px; border:0; background:transparent; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--muted); border-radius:var(--r);
}
.pw-toggle:hover{ color:var(--text); background:var(--surface-2); }

/* ── etiquetas ──────────────────────────────────────────────────────────── */
.tag{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 7px; border-radius:var(--r);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--text-2); background:var(--surface-2);
}
.tag svg{ width:11px; height:11px; }
.tag-accent{ color:var(--accent-ink); background:var(--accent-soft); border-color:var(--accent-line); }
.tag-good{ color:var(--good); background:var(--good-soft); border-color:currentColor; }
.tag-warn{ color:var(--warn); background:var(--warn-soft); border-color:currentColor; }
.tag-crit{ color:var(--crit); background:var(--crit-soft); border-color:currentColor; }

.mark{
  display:grid; place-items:center; flex:none;
  width:34px; height:34px; border-radius:var(--r);
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-line);
}
.avatar{
  display:grid; place-items:center; flex:none;
  width:30px; height:30px; border-radius:var(--r);
  font-size:11.5px; font-weight:650;
  color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-line);
}

/* ── navegação lateral do app ───────────────────────────────────────────── */
.appbar{
  position:fixed; inset:0 auto 0 0; z-index:30; width:var(--sidebar-w);
  background:var(--surface); border-right:1px solid var(--line);
}
.appbar-in{
  height:100%; width:100%; padding:18px 14px 14px;
  display:flex; flex-direction:column; align-items:stretch; gap:12px;
}
.brand{ display:flex; align-items:center; gap:9px; color:var(--text); font-weight:640; letter-spacing:-.01em; }
.brand:hover{ text-decoration:none; }
.brand-glyph{
  width:26px; height:26px; border-radius:var(--r); display:grid; place-items:center;
  font-family:var(--mono); font-size:13px; font-weight:700;
  background:var(--accent); color:var(--on-accent);
}
/* Logo: texto escuro no tema claro, texto branco no escuro. */
.brand-logo{ display:block; height:26px; width:auto; max-width:none; }
.brand-logo.for-dark{ display:none; }
:root[data-theme="dark"] .brand-logo.for-light{ display:none; }
:root[data-theme="dark"] .brand-logo.for-dark{ display:block; }
.appnav{ display:flex; flex-direction:column; align-items:stretch; gap:4px; flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; }
.appnav a{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r);
  font-size:13.5px; font-weight:550; color:var(--text-2);
  border:1px solid transparent;
}
.appnav a svg{ flex:none; }
.appnav a:hover{ background:var(--surface-2); color:var(--text); text-decoration:none; }
.appnav a[aria-current="page"]{
  color:var(--text); background:var(--surface-2); border-color:var(--line);
}
.mobile-nav-settings{ display:none !important; }
/* Seções do menu lateral. */
.navgroup{ display:flex; flex-direction:column; gap:4px; }
.navgroup-h{ display:flex; align-items:center; gap:8px; width:100%; margin-top:10px; padding:4px 10px; border:0; background:transparent; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.navgroup-h:hover{ color:var(--text-2); }
.navgroup-h span:first-child{ flex:1; text-align:left; }
.navgroup-h svg{ transition:rotate .2s var(--win-in); }
.navgroup-h[aria-expanded="false"] svg{ rotate:-90deg; }
.navgroup-n{ min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent); font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:0; }
.navgroup-items{ display:flex; flex-direction:column; gap:4px; }
.navgroup-items[hidden]{ display:none; }
/* Botão da busca global, com cara de campo de texto. */
.searchbtn{
  display:flex; align-items:center; gap:8px; width:100%; padding:7px 9px; margin-top:6px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--bg); color:var(--muted);
  font:inherit; font-size:13px; cursor:pointer; transition:border-color .13s linear, color .13s linear;
}
.searchbtn:hover{ border-color:var(--line-2); color:var(--text-2); }
.searchbtn span{ flex:1; text-align:left; }
kbd{
  display:inline-block; padding:1px 5px; border:1px solid var(--line-2); border-bottom-width:2px; border-radius:var(--r);
  font-family:var(--mono); font-size:10.5px; line-height:1.4; color:var(--muted); background:var(--surface);
}
.appbar-end{ display:flex; align-items:center; gap:7px; padding-top:12px; border-top:1px solid var(--line); }

.seg{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.seg button{
  padding:6px 10px; border:0; cursor:pointer; background:var(--surface);
  color:var(--muted); font-size:12px; font-weight:600; font-family:var(--mono); letter-spacing:.04em;
}
.seg button + button{ border-left:1px solid var(--line); }
.seg button:hover{ color:var(--text); background:var(--surface-2); }
.seg button[aria-pressed="true"]{ background:var(--accent-soft); color:var(--accent-ink); }

.usermenu{ position:relative; }
.usermenu > button{
  display:flex; align-items:center; gap:8px; padding:4px 8px 4px 4px;
  background:transparent; border:1px solid transparent; border-radius:var(--r); cursor:pointer;
}
.usermenu > button:hover{ background:var(--surface-2); border-color:var(--line); }
.menu{
  position:absolute; left:calc(100% + 9px); bottom:0; min-width:220px; z-index:40;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:5px; display:none;
}
.menu[data-open="1"]{ display:block; animation:win-menu-in .22s var(--win-in) both; }
@keyframes win-menu-in{
  from{ opacity:0; transform:translate3d(-8px,0,0); }
  to  { opacity:1; transform:none; }
}
.menu-head{ padding:8px 9px; border-bottom:1px solid var(--line); margin-bottom:5px; }
.menu a, .menu button{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:7px 9px; border:0; border-radius:var(--r); background:transparent;
  color:var(--text-2); font-size:13.5px; text-align:left; cursor:pointer;
}
.menu a:hover, .menu button:hover{ background:var(--surface-2); color:var(--text); text-decoration:none; }
.menu svg{ width:15px; height:15px; flex:none; }

/* ── formulários em duas colunas e ações de rodapé de janela ──────────────── */
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sub-actions{ display:flex; gap:6px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--line); }
@media (max-width:420px){ .pair{ grid-template-columns:minmax(0,1fr); } }

/* ── barra das páginas do help (sem login) ──────────────────────────────── */
.helpbar{ position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); background:var(--surface); }
.helpbar .lander-in{ height:var(--header-h); display:flex; align-items:center; gap:10px; }
.helpbar .brand{ display:flex; }
.helpnav{ display:flex; gap:2px; margin-left:18px; overflow-x:auto; scrollbar-width:none; }
.helpnav::-webkit-scrollbar{ display:none; }
.helpnav a{ padding:7px 11px; border-radius:var(--r); color:var(--text-2); font-size:13.5px; font-weight:550; white-space:nowrap; }
.helpnav a:hover{ color:var(--text); background:var(--surface-2); text-decoration:none; }
.helpnav a[aria-current="page"]{ color:var(--text); background:var(--surface-2); outline:1px solid var(--line); }
@media (max-width:860px){
  .helpbar .lander-in{ height:auto; flex-wrap:wrap; padding-top:10px; padding-bottom:10px; }
  .helpnav{ order:5; width:100%; margin:0; }
}

/* ── busca global ───────────────────────────────────────────────────────── */
dialog.pal{
  margin:12vh auto auto; padding:0; width:min(620px, calc(100vw - 24px)); max-height:min(70vh, 560px);
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface); color:var(--text);
  overflow:hidden; animation:pal-in .26s var(--win-in) both;
}
dialog.pal::backdrop{ background:rgba(6,8,16,.5); }
@keyframes pal-in{ from{ opacity:0; transform:translate3d(0,-12px,0) scale(.98); } to{ opacity:1; transform:none; } }
.pal-in{ display:flex; flex-direction:column; max-height:inherit; }
.pal-q{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); color:var(--muted); }
.pal-q input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:16px; }
.pal-q input::-webkit-search-cancel-button{ display:none; }
.pal-list{ overflow-y:auto; padding:6px; flex:1; min-height:60px; }
.pal-group{ padding:8px 9px 4px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.pal-item{ display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:var(--r); color:var(--text); }
.pal-item:hover{ text-decoration:none; }
.pal-item.on{ background:var(--accent-soft); outline:1px solid var(--accent-line); }
.pal-ico{ width:28px; height:28px; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--r); color:var(--text-2); background:var(--surface-2); }
.pal-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pal-title{ font-size:14px; font-weight:560; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pal-title mark{ background:transparent; color:var(--accent-ink); font-weight:700; }
.pal-sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pal-empty{ padding:18px 12px; text-align:center; }
.pal-foot{ display:flex; gap:16px; padding:8px 14px; border-top:1px solid var(--line); background:var(--surface-2); }
.pal-foot kbd{ margin-right:2px; }
@media (max-width:780px){ dialog.pal{ margin-top:16px; max-height:calc(100dvh - 110px); } .pal-foot{ display:none; } }

/* ── texto formatado (wiki, notas, ajuda) ───────────────────────────────── */
.md{ font-size:14.5px; line-height:1.65; color:var(--text); overflow-wrap:anywhere; }
.md > :first-child{ margin-top:0; }
.md h1,.md h2,.md h3{ margin:1.3em 0 .45em; line-height:1.25; letter-spacing:-.01em; }
.md h1{ font-size:22px; } .md h2{ font-size:18px; } .md h3{ font-size:15.5px; }
.md p,.md ul,.md ol,.md pre,.md blockquote{ margin:0 0 .8em; }
.md ul,.md ol{ padding-left:1.4em; }
.md ul{ list-style:disc; } .md ol{ list-style:decimal; }
.md li{ margin:.2em 0; }
.md code{ font-family:var(--mono); font-size:.88em; padding:1px 5px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); }
.md pre{ padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); overflow-x:auto; }
.md pre code{ padding:0; border:0; background:none; }
.md blockquote{ padding:4px 14px; border-left:3px solid var(--accent-line); color:var(--text-2); }
.md hr{ border:0; border-top:1px solid var(--line); margin:1.4em 0; }
.md li.todo{ list-style:none; margin-left:-1.3em; }
.md li.todo input{ margin-right:6px; accent-color:var(--accent); }

/* ── faixa de aviso do site ─────────────────────────────────────────────── */
.sitealert{ border-bottom:1px solid; }
.sitealert-in{
  display:flex; align-items:center; gap:9px;
  padding:9px 24px; font-size:13.5px; font-weight:550; line-height:1.45;
}
.sitealert svg{ width:16px; height:16px; flex:none; }
.sitealert-red{
  background:var(--crit-soft); color:var(--crit); border-bottom-color:var(--crit);
}
.sitealert-green{
  background:var(--good-soft); color:var(--good); border-bottom-color:var(--good);
}
@media (max-width:680px){ .sitealert-in{ padding:9px 16px; } }

/* ── anúncios da capa ───────────────────────────────────────────────────── */
.ann{ display:flex; flex-direction:column; }
.ann-item{ padding:16px 0; border-top:1px solid var(--line); display:flex; gap:14px; align-items:flex-start; }
.ann-item:first-child{ border-top:0; padding-top:0; }
.ann-date{
  font-family:var(--mono); font-size:11px; color:var(--muted);
  white-space:nowrap; padding-top:2px; min-width:78px;
}
.ann-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.ann-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.ann-title{ font-size:15px; font-weight:620; letter-spacing:-.008em; }
.ann-body{ font-size:13.5px; line-height:1.55; color:var(--text-2); text-wrap:pretty; }
@media (max-width:680px){
  .ann-item{ flex-direction:column; gap:6px; }
  .ann-date{ padding-top:0; }
}

/* ── abas ───────────────────────────────────────────────────────────────── */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:22px; flex-wrap:wrap; }
.tabs a{
  padding:9px 13px; font-size:13.5px; font-weight:550; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs a:hover{ color:var(--text); text-decoration:none; }
.tabs a[aria-current="page"]{ color:var(--text); border-bottom-color:var(--accent); }

/* ── tabelas ────────────────────────────────────────────────────────────── */
.table-wrap{ overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.data th{
  padding:10px 14px; text-align:left; white-space:nowrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); background:var(--surface-2); border-bottom:1px solid var(--line);
}
table.data td{ padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.data tr:last-child td{ border-bottom:0; }
table.data .right{ text-align:right; }

/* ── estatísticas ───────────────────────────────────────────────────────── */
.stat{ padding:16px 18px; display:flex; flex-direction:column; gap:5px; }
.stat-value{ font-size:28px; font-weight:640; letter-spacing:-.02em; line-height:1.1; }

/* ── grade de jogos ─────────────────────────────────────────────────────── */
.tiles{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(184px, 1fr)); }
.tile{
  display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  color:var(--text); overflow:hidden;
  transition:border-color .13s linear, background .13s linear;
}
.tile:hover{ border-color:var(--accent); text-decoration:none; }
.tile-face{
  aspect-ratio:1 / 1; display:grid; place-items:center;
  background:var(--surface-2); border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.tile-img{ width:100%; height:100%; object-fit:cover; display:block; }
/* O botão só aparece quando o ponteiro entra no quadrado. */
.tile-play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.45); opacity:0; transition:opacity .13s linear;
}
.tile:hover .tile-play, .tile:focus-visible .tile-play{ opacity:1; }
.tile-play span{
  display:grid; place-items:center; width:44px; height:44px; border-radius:999px;
  background:var(--accent); color:var(--on-accent);
}
.tile-play svg{ width:20px; height:20px; margin-left:2px; }
.tile-glyph{
  font-family:var(--mono); font-size:34px; font-weight:700; letter-spacing:.02em;
  color:var(--accent-ink);
}
.tile:hover .tile-face{ background:var(--accent-soft); }
.tile-body{ padding:11px 12px; display:flex; flex-direction:column; gap:3px; }
.tile-title{ font-size:13.5px; font-weight:620; }
.tile-desc{
  font-size:12px; color:var(--muted); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tile-badge{
  position:absolute; top:8px; right:8px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 6px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
}

/* ── lista de links ─────────────────────────────────────────────────────── */
.linkrow{ padding:15px 18px; display:flex; gap:14px; align-items:flex-start; }
.linkrow-thumb{
  width:64px; height:64px; flex:none; border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface-2);
  display:grid; place-items:center; overflow:hidden;
}
.linkrow-thumb img{ width:100%; height:100%; object-fit:cover; }
.linkrow-thumb .mono{ font-size:17px; color:var(--muted); }
@media (max-width:680px){ .linkrow-thumb{ width:52px; height:52px; } }
.linkrow:hover{ background:var(--surface-2); }
.linkrow-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.linkrow-title{ font-size:14.5px; font-weight:620; color:var(--text); }
.linkrow-url{ font-family:var(--mono); font-size:11.5px; color:var(--muted); word-break:break-all; }
.linkrow-desc{ font-size:13px; color:var(--text-2); line-height:1.5; text-wrap:pretty; }

/* ── avisos ─────────────────────────────────────────────────────────────── */
.banner{
  display:flex; gap:9px; align-items:flex-start;
  padding:10px 12px; border-radius:var(--r); font-size:13px; line-height:1.5;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text-2);
}
.banner svg{ width:15px; height:15px; flex:none; margin-top:2px; }
.banner-error{ color:var(--crit); background:var(--crit-soft); border-color:var(--crit); }
.banner-ok{ color:var(--good); background:var(--good-soft); border-color:var(--good); }
.banner-info{ color:var(--accent-ink); background:var(--accent-soft); border-color:var(--accent-line); }

#toast-host{ position:fixed; left:0; right:0; bottom:20px; z-index:9999; display:grid; place-items:center; pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:10px; pointer-events:auto;
  padding:9px 10px 9px 13px; border-radius:var(--r);
  background:var(--text); color:var(--bg); font-size:13.5px;
  border:1px solid var(--text);
  /* Igual à notificação do Windows 8.1: entra deslizando de baixo. */
  animation:win-toast-in .3s cubic-bezier(.1,.9,.2,1) both;
}
@keyframes win-toast-in{
  from{ opacity:0; transform:translate3d(0,22px,0); }
  to  { opacity:1; transform:none; }
}
.toast .btn{ --fg-b:var(--bg); --bd-b:transparent; padding:3px 8px; font-size:12.5px; }
.toast .btn:hover{ --bg-b:rgba(127,127,127,.35); }

/* ── modal ──────────────────────────────────────────────────────────────── */
/* As curvas são as do WinJS (Windows 8.1): entrada com desaceleração forte,
   saída com aceleração. É o que dá o "peso" do Metro — nada de elástico. */
:root{
  --win-in:  cubic-bezier(.1,.9,.2,1);
  --win-out: cubic-bezier(.7,0,1,.5);
}

/* As janelas são como as do Windows 8.1: abrem crescendo de leve, têm barra
   de título com ✕, podem ser arrastadas (o JS mexe em `translate`, que não
   briga com o `transform` da animação) e, soltas do fundo, viram janelas
   flutuantes que convivem com a página e com outras janelas. */
dialog.sheet{
  position:fixed; inset:0; margin:auto; height:fit-content;
  width:min(460px, calc(100vw - 28px)); max-height:calc(100dvh - 28px); padding:0;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--surface); color:var(--text);
  overflow:hidden;

  /* Fechado: um pouco menor e transparente. O allow-discrete é o que
     deixa o navegador animar também o fechamento de um <dialog>. */
  opacity:0;
  transform:scale(.94);
  transition:
    opacity   .18s var(--win-out),
    transform .18s var(--win-out),
    overlay   .18s var(--win-out) allow-discrete,
    display   .18s var(--win-out) allow-discrete;
}
dialog.sheet[open]{
  opacity:1;
  transform:scale(1);
  transition:
    opacity   .26s var(--win-in),
    transform .34s var(--win-in),
    overlay   .3s var(--win-in) allow-discrete,
    display   .3s var(--win-in) allow-discrete;
}
@starting-style{
  dialog.sheet[open]{ opacity:0; transform:scale(.88); }
}

dialog.sheet::backdrop{
  background:rgba(0,0,0,0);
  transition:background .18s var(--win-out), overlay .18s allow-discrete, display .18s allow-discrete;
}
dialog.sheet[open]::backdrop{
  background:rgba(0,0,0,.45);
  transition:background .3s var(--win-in), overlay .3s allow-discrete, display .3s allow-discrete;
}
@starting-style{
  dialog.sheet[open]::backdrop{ background:rgba(0,0,0,0); }
}

/* Navegador antigo, sem @starting-style: entra pelo keyframe, sem saída. */
@supports not (transition-behavior: allow-discrete){
  dialog.sheet{ opacity:1; transform:none; transition:none; }
  dialog.sheet[open]{ animation:win-dialog-in .3s var(--win-in) both; }
  dialog.sheet[open]::backdrop{ animation:win-backdrop-in .3s var(--win-in) both; }
}
@keyframes win-dialog-in{
  from{ opacity:0; transform:scale(.88); }
  to  { opacity:1; transform:none; }
}
@keyframes win-backdrop-in{
  from{ background:rgba(0,0,0,0); }
  to  { background:rgba(0,0,0,.45); }
}

/* Janela solta: sem fundo escuro, com sombra para se destacar da página. */
dialog.sheet.floating{ box-shadow:0 14px 40px rgba(0,0,0,.38); }
dialog.sheet.dragging{ user-select:none; }

/* Barra de título: é por ela que se arrasta. A janela da frente ganha a
   faixa de destaque em cima, como a janela ativa do Windows. */
.sheet-head{
  display:flex; align-items:center; gap:10px; padding:0 0 0 18px; min-height:46px;
  border-bottom:1px solid var(--line); background:var(--surface-2);
  border-top:2px solid var(--line-2); cursor:move; touch-action:none;
}
dialog.sheet.active .sheet-head{ border-top-color:var(--accent); }
.sheet-head .h3{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sheet-x{
  align-self:stretch; width:46px; flex:none; display:grid; place-items:center;
  border:0; background:transparent; color:var(--text-2); cursor:pointer;
  transition:background .12s linear, color .12s linear;
}
.sheet-x:hover{ background:#E81123; color:#FFFFFF; }
.sheet-x svg{ width:14px; height:14px; }

/* O conteúdo entra deslizando da direita logo depois da janela, como o
   "enterContent" do WinJS. */
.sheet-body{ padding:16px 18px; display:flex; flex-direction:column; gap:12px; max-height:64vh; overflow-y:auto; }
dialog.sheet[open] .sheet-body{ animation:win-content-in .42s var(--win-in) .06s both; }
@keyframes win-content-in{
  from{ opacity:0; transform:translate3d(36px,0,0); }
  to  { opacity:1; transform:none; }
}
.sheet-foot{ padding:13px 18px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; }

/* ── carregando ─────────────────────────────────────────────────────────── */
/* Véu branco a 50% com o quadrado do logo girando. Fica no <html> (pseudo-
   elementos) para poder aparecer antes de qualquer pedaço da página existir;
   o app.js liga e desliga a classe .pk-loading. */
html::before, html::after{
  content:""; position:fixed; z-index:10000;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--win-out), visibility 0s linear .22s;
}
html::before{ inset:0; background:rgba(255,255,255,.5); }
html::after{
  left:50%; top:50%; width:38px; height:38px; margin:-19px 0 0 -19px;
  border-radius:7px; background:#546AF5;
  transform:rotate(18deg);
}
html.pk-loading::before, html.pk-loading::after{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .18s var(--win-in), visibility 0s;
}
html.pk-loading::after{ animation:pk-spin 1.05s cubic-bezier(.6,.05,.3,.95) infinite; }
@keyframes pk-spin{
  0%  { transform:rotate(18deg)  scale(1); }
  50% { transform:rotate(198deg) scale(.8); }
  100%{ transform:rotate(378deg) scale(1); }
}

/* ── rodapé ─────────────────────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); padding:22px 0; margin-top:auto; }
.foot-in{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }

/* ── responsivo ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px){
  .wrap{ padding:0 16px; }
  .g2,.g3,.g4{ grid-template-columns:minmax(0,1fr); }
  .h1{ font-size:25px; }
  .page{ padding:24px 0 44px; }
  .page-head{ align-items:stretch; gap:14px; margin-bottom:18px; padding-bottom:15px; }
  .page-head>.row{ width:100%; }
  .page-head .searchbox{ max-width:none; flex:1 1 180px; }
  .card-pad{ padding:15px; }
  .card-head{ padding:12px 14px; }
  #stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #jumps{ grid-template-columns:minmax(0,1fr); }
  .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .tile-body{ padding:9px; }
  .tile-play{ opacity:1; background:linear-gradient(transparent 55%,rgba(0,0,0,.5)); place-items:end center; padding-bottom:9px; }
  .tile-play span{ width:34px; height:34px; }
  .linkrow{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px 12px; padding:12px; }
  .linkrow-thumb{ grid-column:1; grid-row:1; }
  .linkrow-main{ grid-column:2; grid-row:1; }
  .linkrow>.btn,.linkrow>.private-tools{ grid-column:1 / -1; width:100%; }
  .private-tools{ justify-content:flex-end; flex-wrap:wrap; }
  .private-tools .btn{ flex:1; justify-content:center; }
  .sheet-head{ padding:0 0 0 16px; }
  .sheet-body{ padding:14px 16px; max-height:calc(100dvh - 150px); }
  .sheet-foot{ padding:11px 16px; flex-wrap:wrap; }
  .sheet-foot .btn:not(.btn-danger){ flex:1; justify-content:center; }
  #toast-host{ bottom:78px; padding:0 12px; }
}

@media (max-width:780px){
  body.has-sidebar{ padding-left:0; padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  .appbar{
    inset:auto 0 0 0; width:100%; height:calc(64px + env(safe-area-inset-bottom));
    border-right:0; border-top:1px solid var(--line); overflow:hidden;
  }
  .appbar-in{ display:block; width:100%; height:100%; padding:0 0 env(safe-area-inset-bottom); }
  .brand,.appbar-end,.searchbtn{ display:none; }
  .appnav{
    width:100%; height:64px; margin:0; display:flex; flex-direction:row; align-items:stretch;
    gap:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .appnav::-webkit-scrollbar{ display:none; }
  .appnav a{
    flex:1 0 66px; min-width:66px; min-height:63px; padding:7px 4px 5px;
    flex-direction:column; justify-content:center; gap:2px; border:0; border-radius:0;
    font-size:10.5px; line-height:1.15; text-align:center;
  }
  .appnav a span{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .appnav a[aria-current="page"]{ border-top:2px solid var(--accent); padding-top:5px; }
  .mobile-nav-settings{ display:flex !important; }
  /* No celular as seções somem: todos os itens ficam em fila na barra de baixo. */
  .navgroup, .navgroup-items, .navgroup-items[hidden]{ display:contents !important; }
  .navgroup-h{ display:none; }
  .foot{ padding-bottom:18px; }
}

@media (max-width:380px){
  .wrap{ padding:0 12px; }
  #stats{ grid-template-columns:minmax(0,1fr); }
  .tiles{ gap:7px; }
  .tile-title{ font-size:12.5px; }
  .tile-desc{ font-size:11px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
@media print{
  .appbar,.foot,#toast-host{ display:none; }
}