/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

img,
canvas,
svg {
  display: block;
}

/* ---------- design system ---------- */
:root {
  --black: #000;
  --bg-opacity: 0.6;
  --font-mono: "Noto Sans Mono", "Courier New", monospace;
  --font-title: "VT323", var(--font-mono);

  /* paleta do dia: o app.js põe data-dia="0..6" no <html> (0 = domingo) */
  --accent: #800080;        /* cor principal */
  --accent-dim: #4a124a;    /* glifos da chuva, bordas discretas */
  --accent-head: #9a3a9a;   /* glifo na ponta da gota, topo dos degradês */

  /* derivadas da cor do dia */
  --accent-text: color-mix(in srgb, var(--accent-head) 60%, #fff);  /* links e destaques legíveis no preto */
  --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-wash: color-mix(in srgb, var(--accent) 18%, transparent); /* fundo de código inline, linhas de tabela */
  --titlebar: linear-gradient(180deg, var(--accent-head) 0%, var(--accent) 45%, var(--accent-dim) 100%);

  --text: #d2d2d2;
  --text-dim: #8c8c8c;
  --panel: rgba(0, 0, 0, 0.86);
  --panel-2: rgba(14, 14, 14, 0.8);
  --bevel-light: rgba(255, 255, 255, 0.35);
  --bevel-dark: rgba(0, 0, 0, 0.55);

  --page-w: 980px;
  --page-w-wide: 1180px;  /* com o menu lateral (rail2) a página ganha a largura dele */
  --rail-w: 280px;
  --rail2-w: 184px;
  --gap: 16px;
  --radius-window: 6px 6px 0 0;
}

/* domingo: roxo do web2 (também é o padrão acima) */
:root[data-dia="1"] { --accent: #00a651; --accent-dim: #0b4a26; --accent-head: #3ccf7f; } /* segunda: verde terminal */
:root[data-dia="2"] { --accent: #c08000; --accent-dim: #4d3405; --accent-head: #e0a830; } /* terça: âmbar */
:root[data-dia="3"] { --accent: #008b8b; --accent-dim: #073f40; --accent-head: #30b8b8; } /* quarta: ciano */
:root[data-dia="4"] { --accent: #b02020; --accent-dim: #4a0e0e; --accent-head: #d85050; } /* quinta: vermelho */
:root[data-dia="5"] { --accent: #3060c0; --accent-dim: #12264d; --accent-head: #6090e8; } /* sexta: azul */
:root[data-dia="6"] { --accent: #c0307a; --accent-dim: #4d1031; --accent-head: #e868a8; } /* sábado: magenta */

html {
  scrollbar-color: var(--accent-dim) var(--black);
}

body {
  min-height: 100vh;
  background: var(--black);
  color: var(--text);
  font: 14px/1.55 var(--font-mono);
}

::selection {
  background: var(--accent);
  color: var(--black);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 1px dashed var(--accent-text);
  outline-offset: 2px;
}

/* texto só para leitor de tela (o Joomla usa esta classe no login) */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- bg: chuva matrix (desenhada pelo app.js) ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: var(--bg-opacity);
  pointer-events: none;
}

/* ---------- tags tipadas ---------- */
.h1,
.h2,
.h3 {
  font-family: var(--font-title);
  font-weight: 400;
}

.t1 {
  color: var(--text);
  font-size: 14px;
}

.t2 {
  color: var(--text-dim);
  font-size: 12px;
}

.t3 {
  color: var(--text-dim);
  font-size: 11px;
}

.lnk,
:where(.card-body) a,
.mod-login__options a,
.mod-login-logout__options a {
  color: var(--accent-text);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.lnk:hover,
:where(.card-body) a:hover,
.mod-login__options a:hover,
.mod-login-logout__options a:hover {
  background: var(--accent);
  color: var(--black);
  text-decoration: none;
}

.lnk.is-disabled {
  color: var(--text-dim);
  opacity: 0.5;
  text-decoration: none;
}

.lnk.is-disabled:hover {
  background: none;
}

/* ---------- ico: ícones pixel-art ----------
   Desenhos em ferramentas/icones.py, embutidos aqui como data URI.
   Entram como máscara, então pegam a cor do texto e mudam com a paleta do dia.
   No Joomla: "Classe do link" do item de menu (ico-home…) e "Classe do módulo" (ico-server…). */
/* icones:inicio (gerado por ferramentas/icones.py, não edite à mão) */
.ico-home { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M7 0h2v1h-2zM6 1h4v1h-4zM5 2h2v1h-2zM9 2h2v1h-2zM4 3h2v1h-2zM10 3h2v1h-2zM3 4h2v1h-2zM11 4h2v1h-2zM2 5h2v1h-2zM12 5h2v1h-2zM1 6h14v1h-14zM2 7h1v1h-1zM13 7h1v1h-1zM2 8h1v1h-1zM5 8h3v1h-3zM13 8h1v1h-1zM2 9h1v1h-1zM5 9h1v1h-1zM7 9h1v1h-1zM10 9h2v1h-2zM13 9h1v1h-1zM2 10h1v1h-1zM5 10h1v1h-1zM7 10h1v1h-1zM10 10h2v1h-2zM13 10h1v1h-1zM2 11h1v1h-1zM5 11h1v1h-1zM7 11h1v1h-1zM13 11h1v1h-1zM2 12h1v1h-1zM5 12h1v1h-1zM7 12h1v1h-1zM13 12h1v1h-1zM2 13h12v1h-12z'/%3E%3C/svg%3E"); }
.ico-book { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M1 2h5v1h-5zM10 2h5v1h-5zM0 3h1v1h-1zM6 3h1v1h-1zM9 3h1v1h-1zM15 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM9 4h1v1h-1zM11 4h3v1h-3zM15 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM9 5h1v1h-1zM15 5h1v1h-1zM0 6h1v1h-1zM2 6h3v1h-3zM6 6h1v1h-1zM9 6h1v1h-1zM11 6h3v1h-3zM15 6h1v1h-1zM0 7h1v1h-1zM6 7h1v1h-1zM9 7h1v1h-1zM15 7h1v1h-1zM0 8h1v1h-1zM2 8h3v1h-3zM6 8h1v1h-1zM9 8h1v1h-1zM11 8h3v1h-3zM15 8h1v1h-1zM0 9h1v1h-1zM6 9h1v1h-1zM9 9h1v1h-1zM15 9h1v1h-1zM0 10h1v1h-1zM7 10h2v1h-2zM15 10h1v1h-1zM1 11h6v1h-6zM9 11h6v1h-6z'/%3E%3C/svg%3E"); }
.ico-server { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M1 0h14v1h-14zM1 1h1v1h-1zM14 1h1v1h-1zM1 2h1v1h-1zM3 2h2v1h-2zM10 2h1v1h-1zM12 2h1v1h-1zM14 2h1v1h-1zM1 3h1v1h-1zM14 3h1v1h-1zM1 4h14v1h-14zM1 5h1v1h-1zM14 5h1v1h-1zM1 6h1v1h-1zM3 6h2v1h-2zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM1 7h1v1h-1zM14 7h1v1h-1zM1 8h14v1h-14zM1 9h1v1h-1zM14 9h1v1h-1zM1 10h1v1h-1zM3 10h2v1h-2zM10 10h1v1h-1zM12 10h1v1h-1zM14 10h1v1h-1zM1 11h1v1h-1zM14 11h1v1h-1zM1 12h14v1h-14z'/%3E%3C/svg%3E"); }
.ico-key { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 3h4v1h-4zM2 4h1v1h-1zM7 4h1v1h-1zM1 5h1v1h-1zM4 5h2v1h-2zM8 5h1v1h-1zM1 6h1v1h-1zM4 6h2v1h-2zM8 6h8v1h-8zM1 7h1v1h-1zM8 7h1v1h-1zM12 7h1v1h-1zM14 7h2v1h-2zM2 8h1v1h-1zM7 8h1v1h-1zM12 8h1v1h-1zM3 9h4v1h-4z'/%3E%3C/svg%3E"); }
.ico-folder,
.section { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M1 2h5v1h-5zM1 3h1v1h-1zM5 3h10v1h-10zM1 4h1v1h-1zM14 4h1v1h-1zM1 5h14v1h-14zM1 6h1v1h-1zM14 6h1v1h-1zM1 7h1v1h-1zM14 7h1v1h-1zM1 8h1v1h-1zM14 8h1v1h-1zM1 9h1v1h-1zM14 9h1v1h-1zM1 10h1v1h-1zM14 10h1v1h-1zM1 11h14v1h-14z'/%3E%3C/svg%3E"); }
.ico-calendar,
.card2 time { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 1h1v1h-1zM10 1h1v1h-1zM1 2h14v1h-14zM1 3h14v1h-14zM1 4h1v1h-1zM14 4h1v1h-1zM1 5h1v1h-1zM3 5h2v1h-2zM6 5h2v1h-2zM9 5h2v1h-2zM12 5h1v1h-1zM14 5h1v1h-1zM1 6h1v1h-1zM14 6h1v1h-1zM1 7h1v1h-1zM3 7h2v1h-2zM6 7h2v1h-2zM9 7h2v1h-2zM12 7h1v1h-1zM14 7h1v1h-1zM1 8h1v1h-1zM14 8h1v1h-1zM1 9h1v1h-1zM3 9h2v1h-2zM6 9h2v1h-2zM14 9h1v1h-1zM1 10h1v1h-1zM14 10h1v1h-1zM1 11h14v1h-14z'/%3E%3C/svg%3E"); }
.nav .prompt { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M1 1h14v1h-14zM1 2h14v1h-14zM1 3h1v1h-1zM14 3h1v1h-1zM1 4h1v1h-1zM3 4h1v1h-1zM14 4h1v1h-1zM1 5h1v1h-1zM4 5h1v1h-1zM14 5h1v1h-1zM1 6h1v1h-1zM5 6h1v1h-1zM14 6h1v1h-1zM1 7h1v1h-1zM4 7h1v1h-1zM14 7h1v1h-1zM1 8h1v1h-1zM3 8h1v1h-1zM7 8h4v1h-4zM14 8h1v1h-1zM1 9h1v1h-1zM14 9h1v1h-1zM1 10h1v1h-1zM14 10h1v1h-1zM1 11h14v1h-14z'/%3E%3C/svg%3E"); }
.mod-login__username label { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M6 1h4v1h-4zM5 2h6v1h-6zM5 3h6v1h-6zM5 4h6v1h-6zM6 5h4v1h-4zM4 7h8v1h-8zM3 8h10v1h-10zM2 9h12v1h-12zM2 10h12v1h-12zM2 11h12v1h-12z'/%3E%3C/svg%3E"); }
.mod-login__password label { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 1h6v1h-6zM4 2h2v1h-2zM10 2h2v1h-2zM4 3h1v1h-1zM11 3h1v1h-1zM4 4h1v1h-1zM11 4h1v1h-1zM3 5h10v1h-10zM3 6h4v1h-4zM9 6h4v1h-4zM3 7h4v1h-4zM9 7h4v1h-4zM3 8h5v1h-5zM9 8h4v1h-4zM3 9h5v1h-5zM9 9h4v1h-4zM3 10h10v1h-10zM3 11h10v1h-10z'/%3E%3C/svg%3E"); }
.input-password-toggle .icon-eye { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 4h6v1h-6zM3 5h2v1h-2zM11 5h2v1h-2zM2 6h1v1h-1zM7 6h2v1h-2zM13 6h1v1h-1zM1 7h1v1h-1zM6 7h4v1h-4zM14 7h1v1h-1zM1 8h1v1h-1zM6 8h4v1h-4zM14 8h1v1h-1zM2 9h1v1h-1zM7 9h2v1h-2zM13 9h1v1h-1zM3 10h2v1h-2zM11 10h2v1h-2zM5 11h6v1h-6z'/%3E%3C/svg%3E"); }
.input-password-toggle .icon-eye-slash { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M13 2h1v1h-1zM12 3h1v1h-1zM5 4h7v1h-7zM3 5h2v1h-2zM10 5h3v1h-3zM2 6h1v1h-1zM7 6h3v1h-3zM13 6h1v1h-1zM1 7h1v1h-1zM6 7h4v1h-4zM14 7h1v1h-1zM1 8h1v1h-1zM6 8h4v1h-4zM14 8h1v1h-1zM2 9h1v1h-1zM6 9h3v1h-3zM13 9h1v1h-1zM3 10h3v1h-3zM11 10h2v1h-2zM4 11h7v1h-7zM3 12h1v1h-1zM2 13h1v1h-1z'/%3E%3C/svg%3E"); }
/* icones:fim */

.nav2 a[class*="ico-"]::before,
.section > .h2::before,
.card[class*="ico-"] > .h2::before,
.nav .prompt::before,
.card2 time::before,
.mod-login__username label::before,
.mod-login__password label::before,
.input-password-toggle [class*="icon-eye"]::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

/* ícone pequeno nos textos de 11-12px */
.nav .prompt::before,
.card2 time::before,
.mod-login__username label::before,
.mod-login__password label::before {
  width: 12px;
  height: 12px;
  margin-right: 5px;
  vertical-align: -1px;
}

/* na barra de título o ícone fica um pouco maior, como nas janelas do XP */
.section > .h2::before,
.card[class*="ico-"] > .h2::before {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  filter: drop-shadow(1px 1px 0 var(--black));
}

/* ---------- página ---------- */
.page {
  width: min(var(--page-w), 100% - 32px);
  margin: 0 auto;
  padding-bottom: 8px;
}

.page:has(> .cols.has-rail2) {
  --page-w: var(--page-w-wide);
}

/* ---------- nav: topbar ----------
   Sempre ".page > .nav": o mod_menu do Joomla também usa a classe "nav" nas listas. */
.page > .nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--accent-dim);
}

.page > .nav .prompt {
  color: var(--accent-text);
}

.page > .nav .clock {
  margin-left: auto;
}

/* ---------- hero: logo ASCII ---------- */
.hero {
  padding: 22px 0 14px;
}

.logo {
  display: inline-block;
  max-width: 100%;
  text-decoration: none;
}

.hero .img {
  margin: 0;
  overflow: hidden;
  color: var(--accent-head);
  font: clamp(4px, 1.55vw, 13px)/1 var(--font-mono);  /* 93 colunas cabem em 375px */
  text-shadow: 0 0 8px var(--accent-glow);
}

.slogan {
  margin: 10px 0 0;
  color: var(--text);
  font-size: 13px;
}

.slogan::after {
  content: "▌";
  margin-left: 2px;
  color: var(--accent-text);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- nav2: abas do menu ---------- */
.nav2 .mod-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0 8px;
  list-style: none;
  border-bottom: 2px solid var(--accent);
}

.nav2 a {
  display: block;
  padding: 5px 16px 4px;
  border: 1px solid var(--accent-dim);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: var(--panel);
  color: var(--accent-text);
  font: 14px/1.4 var(--font-mono);  /* o "~" da VT323 parece um N levantado */
  text-decoration: none;
}

.nav2 a:hover {
  background: var(--accent-dim);
  color: #fff;
}

/* aba ativa = [btn:] do wireframe */
.nav2 .current > a,
.nav2 .active > a,
.nav2 a[aria-current="page"] {
  border-color: var(--accent);
  background: var(--titlebar);
  color: #fff;
  text-shadow: 1px 1px 0 var(--black);
}

/* ---------- colunas: [rail2] main rail ---------- */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  align-items: start;
  gap: var(--gap);
  margin-top: var(--gap);
}

.cols.has-rail2 {
  grid-template-columns: var(--rail2-w) minmax(0, 1fr) var(--rail-w);
}

.main,
.rail,
.rail2 {
  min-width: 0;
}

.rail,
.rail2 {
  display: grid;
  gap: var(--gap);
}

/* ---------- section3: linhas de janelas no meio da página ----------
   Grade de 12 colunas: cada janela ocupa col-1 a col-11 (sem classe = linha inteira)
   e a linha quebra sozinha quando a soma passa de 12. No Joomla o número vem do
   campo "Tamanho Bootstrap" do módulo. */
.section3 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.main > .section3:last-child {
  margin: var(--gap) 0 0;
}

.section3 > * {
  grid-column: span var(--span, 12);
  min-width: 0;
}

.col-1 { --span: 1; }
.col-2 { --span: 2; }
.col-3 { --span: 3; }
.col-4 { --span: 4; }
.col-5 { --span: 5; }
.col-6 { --span: 6; }
.col-7 { --span: 7; }
.col-8 { --span: 8; }
.col-9 { --span: 9; }
.col-10 { --span: 10; }
.col-11 { --span: 11; }

/* ---------- janelas: section e card ---------- */
.section,
.card {
  border: 1px solid var(--accent);
  border-radius: var(--radius-window);
  background: var(--panel);
  box-shadow:
    0 0 0 1px var(--black),
    4px 4px 0 var(--bevel-dark),
    0 0 22px var(--accent-glow);
}

/* barra de título estilo janela do XP: ícone | título ... [-][x] */
.section > .h2,
.card > .h2 {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 3px 8px 1px 10px;
  border-bottom: 1px solid var(--black);
  border-radius: 5px 5px 0 0;
  background: var(--titlebar);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 var(--black);
  text-transform: uppercase;
}

.section > .h2::after,
.card > .h2::after {
  content: "[-][x]";
  margin-left: auto;
  padding-left: 8px;
  font-size: 18px;
  letter-spacing: 0;
  opacity: 0.75;
}

.card-body {
  padding: 10px 12px 12px;
}

.section {
  padding-bottom: 12px;
}

/* ---------- card2: Bizu na lista ---------- */
.card2 {
  margin: 12px 12px 0;
  padding: 10px 12px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  background: var(--panel-2);
}

.card2:hover {
  border-style: solid;
}

.card2 > .t2 {
  margin: 0;
}

.card2 .h3 {
  margin: 2px 0 6px;
  font-size: 26px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.card2 .h3 a {
  color: var(--accent-text);
  text-decoration: none;
}

.card2 .h3 a:hover {
  color: #fff;
  text-shadow: 0 0 8px var(--accent);
}

.card2 > .t1 {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.readmore {
  font-size: 13px;
}

/* lista vazia */
.section > .empty {
  margin: 12px 12px 0;
}

/* paginação */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 14px 12px 0;
  font-size: 13px;
}

/* ---------- Bizu aberto ---------- */
.article-body {
  padding: 14px 18px 4px;
}

.article-body .h1 {
  margin: 0 0 4px;
  color: var(--accent-text);
  font-size: 40px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.article-body > .meta {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--accent-dim);
}

.back {
  margin: 18px 0 8px;
  font-size: 13px;
}

/* conteúdo vindo do editor do Joomla */
.article-content {
  font-size: 14.5px;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.article-content > :first-child {
  margin-top: 0;
}

.article-content p {
  margin: 0 0 12px;
}

.article-content a {
  color: var(--accent-text);
  text-underline-offset: 3px;
}

.article-content a:hover {
  background: var(--accent);
  color: var(--black);
}

.article-content strong,
.article-content b {
  color: #fff;
}

.article-content em {
  color: var(--accent-text);
}

/* títulos com cara de markdown no terminal */
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5 {
  margin: 26px 0 10px;
  color: var(--accent-text);
  font-family: var(--font-title);
  font-weight: 400;
  line-height: 1.1;
}

.article-content h2 { font-size: 32px; padding-bottom: 4px; border-bottom: 1px solid var(--accent-dim); }
.article-content h3 { font-size: 28px; }
.article-content h4 { font-size: 23px; margin-top: 20px; }
.article-content h5 { font-size: 20px; }

.article-content h2::before { content: "# "; color: var(--text-dim); }
.article-content h3::before { content: "## "; color: var(--text-dim); }
.article-content h4::before { content: "### "; color: var(--text-dim); }

/* listas: "> " no lugar da bolinha */
.article-content ul,
.article-content ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.article-content ul {
  list-style: none;
}

.article-content ul > li::before {
  content: ">";
  display: inline-block;
  width: 18px;
  margin-left: -18px;
  color: var(--accent-text);
}

.article-content ol > li::marker {
  color: var(--accent-text);
}

.article-content li {
  margin-bottom: 4px;
}

.article-content li > ul,
.article-content li > ol {
  margin: 4px 0 0;
}

/* código */
.article-content code {
  padding: 1px 5px;
  border: 1px solid var(--accent-dim);
  background: var(--accent-wash);
  color: var(--accent-text);
  font: 0.9em var(--font-mono);
}

.article-content pre {
  margin: 0 0 14px;
  padding: 12px 14px;
  overflow-x: auto;
  border: 1px solid var(--accent-dim);
  border-left: 3px solid var(--accent);
  background: var(--black);
  color: #e2e2e2;
  font: 13px/1.5 var(--font-mono);
  tab-size: 4;
  white-space: pre;
}

.article-content pre code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

/* tabelas (as do editor vêm com table-striped / table-bordered) */
.article-content table {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.5;
}

.article-content th,
.article-content td {
  padding: 6px 10px;
  border: 1px solid var(--accent-dim);
  text-align: left;
  vertical-align: top;
}

.article-content th {
  background: var(--accent-dim);
  color: #fff;
  font-weight: 700;
}

.article-content tbody tr:nth-child(odd) {
  background: var(--accent-wash);
}

.article-content td code {
  white-space: nowrap;
}

.article-content blockquote {
  margin: 0 0 14px;
  padding: 6px 14px;
  border-left: 3px solid var(--accent);
  background: var(--panel-2);
  color: var(--text-dim);
}

.article-content hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px dashed var(--accent-dim);
}

.article-content img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--accent-dim);
}

/* ---------- card: conteúdo das janelas ---------- */
.card-body > :first-child {
  margin-top: 0;
}

.card-body > :last-child {
  margin-bottom: 0;
}

.card-body p {
  margin: 0 0 8px;
}

/* listas de links (mod_menu, últimos artigos…: todas usam mod-list no Joomla) */
.card .mod-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.card .mod-list li {
  padding: 2px 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.card .mod-list li::before {
  content: "> ";
  color: var(--text-dim);
}

/* item da página aberta no menu lateral */
.card .mod-list .current::before {
  color: var(--accent-text);
}

.card .mod-list .current > a {
  color: #fff;
  text-decoration: none;
}

/* ---------- form: login (markup do mod_login do Joomla 6) ---------- */
.mod-login .form-group {
  margin-bottom: 10px;
}

.mod-login__username > label,
.mod-login__password > label {
  display: block;
  margin-bottom: 3px;
  color: var(--text-dim);
  font-size: 12px;
}

.mod-login .form-control {
  width: 100%;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--accent-dim);
  border-radius: 0;
  background: var(--black);
  box-shadow: inset 2px 2px 0 var(--bevel-dark);
  color: var(--text);
  font: 13px var(--font-mono);
}

.mod-login .form-control::placeholder {
  color: var(--text-dim);
  opacity: 0.6;
}

.mod-login .form-control:focus {
  border-color: var(--accent-head);
  outline: none;
  box-shadow: inset 2px 2px 0 var(--bevel-dark), 0 0 8px var(--accent-glow);
}

/* senha + botão de mostrar */
.mod-login .input-group {
  display: flex;
}

.mod-login .input-group .form-control {
  flex: 1;
}

.input-password-toggle {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  padding: 0;
  border: 1px solid var(--accent-dim);
  border-left: 0;
  background: var(--panel-2);
  color: var(--accent-text);
  cursor: pointer;
}

.input-password-toggle:hover {
  background: var(--accent-dim);
  color: #fff;
}

.input-password-toggle [class*="icon-eye"]::before {
  margin: 0;
  vertical-align: middle;
}

/* lembrar-me */
.mod-login .form-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.mod-login .form-check-input {
  margin: 0;
  accent-color: var(--accent);
}

.mod-login .form-check-label {
  color: var(--text-dim);
}

/* botão com chanfro de janela antiga */
.btn2,
.mod-login .btn-primary,
.mod-login-logout .btn-primary {
  padding: 4px 22px 2px;
  border: 1px solid var(--black);
  border-radius: 0;
  background: var(--titlebar);
  box-shadow: inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-dark);
  color: #fff;
  font: 22px/1 var(--font-title);
  text-shadow: 1px 1px 0 var(--black);
  cursor: pointer;
}

.btn2:hover,
.mod-login .btn-primary:hover,
.mod-login-logout .btn-primary:hover {
  filter: brightness(1.15);
}

.btn2:active,
.mod-login .btn-primary:active,
.mod-login-logout .btn-primary:active {
  box-shadow: inset -1px -1px 0 var(--bevel-light), inset 1px 1px 0 var(--bevel-dark);
}

/* botões extras do login (passkey e afins) */
.mod-login .btn-secondary:not(.input-password-toggle) {
  width: 100%;
  padding: 5px 10px;
  border: 1px solid var(--accent-dim);
  border-radius: 0;
  background: var(--panel-2);
  color: var(--accent-text);
  font: 13px var(--font-mono);
  cursor: pointer;
}

.mod-login .btn-secondary:not(.input-password-toggle):hover {
  border-color: var(--accent);
  color: #fff;
}

.mod-login .btn-secondary svg,
.mod-login .btn-secondary img {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  fill: currentColor;
}

.mod-login__options,
.mod-login-logout__options {
  margin: 4px 0 0;
  padding: 0;
  font-size: 12px;
  list-style: none;
}

.mod-login__options li + li {
  margin-top: 2px;
}

.mod-login__pretext,
.mod-login__posttext {
  color: var(--text-dim);
  font-size: 12px;
}

/* logado: "Olá, fulano" + Sair */
.mod-login-logout .login-greeting {
  margin-bottom: 10px;
  color: var(--text);
}

.mod-login-logout__options {
  margin: 0 0 10px;
}

/* =================================================_
   Estilização do Componente de Feed RSS (com_newsfeeds)
   Template: Simioni Terminal
   ================================================= */

.com-newsfeeds-newsfeed {
    border: 1px solid var(--accent);
    border-radius: var(--radius-window);
    background: var(--panel);
    box-shadow: 
        0 0 0 1px var(--black), 
        4px 4px 0 var(--bevel-dark), 
        0 0 22px var(--accent-glow);
    padding-bottom: 12px;
}

/* Título principal do Feed RSS (estilizado como barra de título de janela .h2) */
.com-newsfeeds-newsfeed > h2 {
    display: flex;
    align-items: center;
    margin: 0 0 12px 0;
    padding: 3px 8px 1px 10px;
    border-bottom: 1px solid var(--black);
    border-radius: 5px 5px 0 0;
    background: var(--titlebar);
    color: #fff;
    font-family: var(--font-title);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 var(--black);
    text-transform: uppercase;
}

.com-newsfeeds-newsfeed > h2::after {
    content: "[-][x]";
    margin-left: auto;
    padding-left: 8px;
    font-size: 18px;
    letter-spacing: 0;
    opacity: 0.75;
}

.com-newsfeeds-newsfeed > h2 a {
    color: inherit;
    text-decoration: none;
}

.com-newsfeeds-newsfeed > h2 a:hover {
    text-decoration: underline;
}

/* Descrição geral do feed (dentro do corpo) */
.com-newsfeeds-newsfeed__description,
.com-newsfeeds-newsfeed > p {
    margin: 0 12px 12px 12px;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.5;
}

/* Lista de itens do feed (estilizada em blocos semelhantes ao .card2) */
.com-newsfeeds-newsfeed__items {
    list-style: none;
    padding: 0 12px 0 12px;
    margin: 0;
}

.com-newsfeeds-newsfeed__items li {
    margin: 12px 0 0 0;
    padding: 10px 12px 12px 12px;
    border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
    background: var(--panel-2);
}

.com-newsfeeds-newsfeed__items li:hover {
    border-style: solid;
}

.com-newsfeeds-newsfeed__items li:last-child {
    margin-bottom: 12px;
}

/* Títulos dos itens individuais do feed (commits / links) */
.com-newsfeeds-newsfeed__items .feed-link a,
.com-newsfeeds-newsfeed__items h3 a {
    color: var(--accent-text);
    text-decoration: none;
    font-family: var(--font-title);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.com-newsfeeds-newsfeed__items .feed-link a:hover,
.com-newsfeeds-newsfeed__items h3 a:hover {
    color: #fff;
    text-shadow: 0 0 8px var(--accent);
    background: none;
}

/* Descrição / Conteúdo detalhado de cada commit */
.com-newsfeeds-newsfeed__items .feed-item-description {
    margin: 6px 0 0 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Links internos dentro das descrições dos commits (hashes) */
.com-newsfeeds-newsfeed__items .feed-item-description a {
    color: var(--accent-text);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.com-newsfeeds-newsfeed__items .feed-item-description a:hover {
    background: var(--accent);
    color: var(--black);
    text-decoration: none;
}

/* ---------- section2: footer ---------- */
.section2 {
  margin-top: 28px;
  padding: 12px 0 8px;
  border-top: 1px solid var(--accent-dim);
  text-align: center;
}

.section2 p {
  margin: 2px 0;
}

.section2 .t2 {
  color: var(--accent-text);
  font-style: italic;
}

/* ---------- tela média: a coluna da direita desce e vira uma linha ---------- */
@media (max-width: 1000px) {
  .cols.has-rail2 {
    grid-template-columns: var(--rail2-w) minmax(0, 1fr);
  }

  .cols.has-rail2 > .rail {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: start;
  }
}

/* ---------- celular ---------- */
@media (max-width: 760px) {
  .cols,
  .cols.has-rail2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .section3 > * {
    grid-column: 1 / -1;
  }

  .page > .nav .clock {
    margin-left: 0;
  }

  .nav2 a {
    padding: 4px 10px 2px;
  }

  .card2 {
    margin: 10px 8px 0;
  }

  .article-body {
    padding: 12px 12px 4px;
  }

  .article-body .h1 {
    font-size: 32px;
  }

  /* tabela larga rola dentro dela em vez de estourar a página */
  .article-content table {
    display: block;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slogan::after {
    animation: none;
  }
}