/* shared/ui.css — identidade visual do MOJ (limpa, moderna, sem framework).
   Tokens e nomes de classe estáveis: as páginas de contest reusam estes. */
:root {
  --blue:#2b6cb0; --blue-dark:#1c4e86; --blue-soft:#e8f0fb; --blue-bg:#f5f8fc;
  --accent:#6d5cff; --purple:#6d5cff; --ink:#19222e; --muted:#64748b; --line:#e6ebf3;
  --ok:#15803d; --ok-bg:#dcfce7; --err:#be1241; --err-bg:#ffe1e8;
  --warn:#9a6700; --warn-bg:#fdf3d3; --card:#ffffff; --radius:14px;
  --page-max:1600px; /* teto da largura da página (container + barras); adapta abaixo, centraliza acima */
  --shadow:0 1px 2px rgba(20,40,80,.04), 0 6px 20px rgba(20,40,80,.06);
  --shadow-sm:0 1px 3px rgba(20,40,80,.07);
  --mono:"JetBrains Mono","Fira Mono","DejaVu Sans Mono",Consolas,monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--ink); line-height:1.6; font-size:16px;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:linear-gradient(180deg,#eef3fb 0%,var(--blue-bg) 240px,var(--blue-bg)) no-repeat; }
a { color:var(--blue); text-decoration:none; } a:hover { color:var(--blue-dark); text-decoration:underline; }
h1,h2,h3 { line-height:1.25; letter-spacing:-.01em; }
.container { max-width:var(--page-max); margin:0 auto; padding:1.4rem 1.2rem 3rem; }

/* topbar */
.topbar { background:linear-gradient(105deg,#163a6b 0%,var(--blue-dark) 45%,var(--blue) 100%);
  color:#fff; box-shadow:0 2px 16px rgba(20,40,80,.18); position:sticky; top:0; z-index:50; }
.topbar .bar { max-width:var(--page-max); margin:0 auto; padding:.7rem 1.2rem; display:flex;
  align-items:center; gap:1rem; flex-wrap:wrap; }
.topbar .brand { display:flex; align-items:center; gap:.55rem; font-weight:800; font-size:1.2rem;
  letter-spacing:-.02em; color:#fff; }
.topbar .brand:hover { text-decoration:none; opacity:.95; }
.topbar .brand img { height:34px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.25)); }
.topbar .slogan { opacity:.8; font-weight:400; font-size:.82rem; }
.topbar .spacer { flex:1; }
.topbar a { color:#eaf2ff; opacity:.92; font-weight:500; } .topbar a:hover { opacity:1; color:#fff; }
.topbar .navlinks a.active { opacity:1; color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; }
.badge-beta { background:var(--accent); color:#fff; font-size:.62rem; padding:.12rem .42rem;
  border-radius:999px; font-weight:800; letter-spacing:.06em; vertical-align:middle;
  box-shadow:0 1px 6px rgba(109,92,255,.5); }
.navlinks { display:flex; gap:1.1rem; flex-wrap:wrap; align-items:center; font-size:.95rem; }
.contest-title { font-weight:800; font-size:1.05rem; }
.countdown { font-variant-numeric:tabular-nums; font-weight:700; }

/* seletor de idioma (sutil, não botões) */
.lang-toggle { display:inline-flex; align-items:center; gap:.1rem; }
.lang-toggle .lang-opt { background:none; border:0; cursor:pointer; color:#eaf2ff; opacity:.5;
  font-size:.8rem; font-weight:600; line-height:1; padding:.15rem .3rem; border-radius:6px;
  transition:opacity .12s, background .12s; }
.lang-toggle .lang-opt:hover { opacity:.85; background:rgba(255,255,255,.08); }
.lang-toggle .lang-opt.active { opacity:1; color:#fff; font-weight:800;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }

/* menu do usuário (avatar ▾ -> dropdown) */
.user-menu { position:relative; display:inline-flex; }
.user-menu-btn { display:inline-flex; align-items:center; gap:.45rem; background:none; border:0;
  color:#fff; font-size:.95rem; font-weight:600; cursor:pointer; padding:.25rem .4rem;
  border-radius:10px; transition:background .12s; }
.user-menu-btn:hover { background:rgba(255,255,255,.14); }
.user-menu-btn .caret { font-size:.7rem; opacity:.8; transition:transform .12s; }
.user-menu-btn[aria-expanded="true"] .caret { transform:rotate(180deg); }
.menu-panel { position:absolute; right:0; top:calc(100% + .4rem); min-width:12.5rem;
  background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); z-index:60; padding:.3rem; display:none; }
.menu-panel.open { display:block; }
.menu-panel .menu-item { display:flex; align-items:center; gap:.5rem; width:100%; box-sizing:border-box;
  text-align:left; background:none; border:0; color:var(--ink); opacity:1; font-size:.9rem;
  font-weight:500; padding:.5rem .6rem; border-radius:8px; cursor:pointer; text-decoration:none; }
.menu-panel .menu-item:hover { background:var(--blue-soft); color:var(--ink); text-decoration:none; opacity:1; }
.menu-panel .menu-sep { height:1px; background:var(--line); margin:.3rem .25rem; }

/* quicknav */
.quicknav { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:52px; z-index:40; }
.quicknav .bar { max-width:var(--page-max); margin:0 auto; padding:.55rem 1.2rem; display:flex; gap:1.3rem; flex-wrap:wrap; }
.quicknav a { color:var(--blue-dark); font-weight:600; font-size:.92rem; }

/* sections / cards */
.section { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.3rem 1.4rem; margin:1.2rem 0; transition:box-shadow .15s; }
.section:hover { box-shadow:0 2px 4px rgba(20,40,80,.05), 0 10px 30px rgba(20,40,80,.09); }
.section > h2 { margin:.05rem 0 .9rem; color:var(--blue-dark); font-size:1.3rem; font-weight:800;
  display:flex; align-items:center; gap:.5rem; }
.section > h3 { color:var(--blue-dark); }
.section-head { background:linear-gradient(90deg,var(--blue-soft),#fff); color:var(--blue-dark);
  font-weight:700; padding:.45rem .9rem; border-left:4px solid var(--blue); border-radius:8px; margin:1.1rem 0 .6rem; }

/* buttons / forms */
.btn { display:inline-flex; align-items:center; gap:.4rem; background:linear-gradient(180deg,var(--blue),var(--blue-dark));
  color:#fff; border:0; border-radius:10px; padding:.58rem 1.1rem; font-size:.95rem; font-weight:650;
  cursor:pointer; transition:transform .08s, box-shadow .15s, filter .15s; box-shadow:0 2px 8px rgba(43,108,176,.28); }
.btn:hover { filter:brightness(1.06); text-decoration:none; box-shadow:0 4px 14px rgba(43,108,176,.36); color:#fff; }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; filter:grayscale(.3); }
.btn.secondary { background:var(--blue-soft); color:var(--blue-dark); box-shadow:none; }
.btn.ghost { background:#fff; color:var(--blue-dark); border:1px solid var(--line); box-shadow:none; }
.btn.ghost:hover { background:var(--blue-soft); }
input,select,textarea { font:inherit; padding:.52rem .7rem; border:1px solid var(--line);
  border-radius:10px; background:#fff; color:var(--ink); transition:border-color .12s, box-shadow .12s; }
input::placeholder { color:#9aa7b8; }
input:focus,textarea:focus,select:focus { outline:0; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(43,108,176,.16); }
.field { display:flex; flex-direction:column; gap:.3rem; margin:.55rem 0; }
.field > label { font-size:.85rem; font-weight:600; color:var(--muted); }
.row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }

/* tables */
table.moj { width:100%; border-collapse:separate; border-spacing:0; background:#fff;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:.93rem; }
table.moj th,table.moj td { padding:.6rem .9rem; text-align:left; border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums; }
table.moj thead th { background:#f3f7fd; color:var(--blue-dark); font-weight:700; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.03em; cursor:pointer; user-select:none; position:sticky; top:0; }
table.moj tbody tr:nth-child(even) td { background:#fafcff; }
table.moj tbody tr:hover td { background:var(--blue-soft); }
table.moj tbody tr:last-child td { border-bottom:0; }
/* embrulho rolável p/ tabelas/gráficos largos (placar, todas-submissões, etc.):
   rola na horizontal em vez de estourar o viewport. Definição única (global). */
.chart-wrap { overflow-x:auto; }

/* status colors (veredictos) — preenchem a célula */
.verdict { display:block; padding:.32rem .6rem; border-radius:7px; font-weight:650; font-size:.88rem; }
.v-ok { background:var(--ok-bg); color:var(--ok); }
.v-err { background:var(--err-bg); color:var(--err); }
.v-warn { background:var(--warn-bg); color:var(--warn); }
.v-pending { background:#eef2f8; color:var(--muted); }
.spin { display:inline-block; width:1em; height:1em; border:2px solid #cbd5e1;
  border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-.15em; }
@keyframes spin { to { transform:rotate(360deg); } }

/* difficulty / tags */
.tag { display:inline-block; background:var(--blue-soft); color:var(--blue-dark); border-radius:999px;
  padding:.15rem .65rem; font-size:.78rem; font-weight:600; margin:.12rem; transition:.12s; }
.tag:hover { background:#d6e6fb; text-decoration:none; transform:translateY(-1px); }
.tags-blur .tag { filter:blur(4px); } .tags-blur:hover .tag { filter:none; }
/* coleções (curso/organização — cor distinta das tags; NUNCA borradas) */
.collection { display:inline-block; background:#efeaff; color:#4a37c9; border-radius:999px;
  padding:.15rem .65rem; font-size:.78rem; font-weight:600; margin:.12rem; transition:.12s; }
.collection:hover { background:#e3dbff; text-decoration:none; transform:translateY(-1px); }
.diff { font-weight:700; } .diff-easy{color:var(--ok);} .diff-med{color:var(--warn);} .diff-hard{color:var(--err);}

/* balloons (ICPC) */
.balloon { position:relative; display:inline-block; width:18px; height:23px; border-radius:50% 50% 50% 50%/55% 55% 45% 45%;
  box-shadow:inset -3px -3px 6px rgba(0,0,0,.18); }
.balloon::after { content:""; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%);
  border-left:3px solid transparent; border-right:3px solid transparent; border-bottom:6px solid currentColor; opacity:.5; }

/* editor */
.cm-mojeditor,.code-fallback { width:100%; min-height:340px; border:1px solid var(--line);
  border-radius:12px; font-family:var(--mono); font-size:.9rem; box-shadow:var(--shadow-sm); }
.cm-mojeditor { overflow:hidden; }
.cm-mojeditor .cm-editor { border-radius:12px; }
.cm-mojeditor .cm-focused { outline:0; }
.code-fallback { padding:.8rem; background:#0d1626; color:#e2e8f0; line-height:1.5; }
.submit-steps { font-size:.86rem; color:var(--muted); margin:.5rem 0; min-height:1.2em; }
/* caixa do editor: altura inicial fixa, redimensionável e com toggle */
.editor-box { height:380px; min-height:120px; max-height:82vh; overflow:hidden; resize:vertical;
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm); background:#fff; transition:height .15s; }
.editor-box .cm-mojeditor,.editor-box .cm-editor { height:100% !important; min-height:0; border:0; box-shadow:none; }
.editor-box .cm-mojeditor .cm-scroller { overflow:auto; }
.editor-box .code-fallback { height:100%; min-height:0; border:0; border-radius:12px; resize:none; }
.editor-box.collapsed { height:0 !important; min-height:0; border-width:0; resize:none; }
.editor-bar { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.5rem; }
.editor-bar .btn { padding:.3rem .7rem; font-size:.85rem; }
/* time limits (chips) na página do problema */
.tl-block { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-top:.7rem; }
.tl-label { font-size:.82rem; font-weight:700; color:var(--blue-dark); margin-right:.15rem; }
.tl-chip { display:inline-flex; align-items:center; gap:.45rem; background:#fafcff; border:1px solid var(--line);
  border-radius:999px; padding:.18rem .65rem; font-size:.82rem; }
.tl-chip b { color:var(--blue-dark); font-weight:700; }
.tl-chip .tl-time { font-variant-numeric:tabular-nums; color:var(--muted); font-family:var(--mono); }

/* statement (enunciado integrado) */
.statement-content { line-height:1.7; font-size:1.04rem; }
.statement-content h1.title { display:none !important; }
.statement-content h1,.statement-content h2,.statement-content h3 { color:var(--blue-dark); }
.statement-content code { font-family:var(--mono); color:var(--blue-dark); background:#eef3fb;
  padding:.05em .35em; border-radius:5px; font-size:.92em; }
.statement-content pre { font-family:var(--mono); background:#0d1626; color:#e2e8f0;
  border-radius:10px; padding:.9em 1.2em; overflow-x:auto; box-shadow:var(--shadow-sm); }
.statement-content pre code { background:none; color:inherit; padding:0; }
.statement-content footer,.statement-content #footer { color:var(--muted); text-align:right; font-size:.95em; margin-top:2em; }
.statement-content img { max-width:100%; border-radius:8px; }
.statement-content h1.moj-title { color:var(--blue-dark); margin:.2rem 0 1rem; }
.statement-content ul,.statement-content ol { padding-left:1.5em; }
.statement-content blockquote { border-left:3px solid var(--border,#d0d7de); margin:.8em 0; padding:.1em .9em; color:var(--muted); }
.statement-content table { border-collapse:collapse; margin:.7rem 0; }
.statement-content th,.statement-content td { border:1px solid var(--border,#d0d7de); padding:.25rem .55rem; }
/* exemplos (mesmo markup do render-statement.sh: .moj-exemplos / .moj-exemplo / .moj-exemplo-nota) */
.statement-content .moj-exemplos h2 { margin-top:1.3rem; }
.statement-content .moj-exemplo { border:1px solid var(--border,#d0d7de); border-radius:8px; padding:.2rem .85rem; margin:.7rem 0; }
.statement-content .moj-exemplo h3,.statement-content .moj-exemplo h4 { margin:.5rem 0 .2rem; color:var(--blue-dark); }
.statement-content .moj-exemplo-nota { margin:.1rem 0 .6rem; color:var(--muted); }

/* utils */
.muted { color:var(--muted); } .center { text-align:center; } .small { font-size:.85rem; }
.hidden { display:none !important; }
.notice { background:var(--warn-bg); color:var(--warn); padding:.6rem .9rem; border-radius:10px; border:1px solid #f2e2a8; }
.error-box { background:var(--err-bg); color:var(--err); padding:.6rem .9rem; border-radius:10px; }
/* hero (home) */
.hero { background:linear-gradient(115deg,#163a6b,var(--blue) 58%,var(--accent)); color:#fff;
  border-radius:18px; padding:2.3rem 2rem; margin:1.4rem 0; display:flex; align-items:center;
  gap:1.8rem; flex-wrap:wrap; box-shadow:0 12px 34px rgba(28,78,134,.28); position:relative; overflow:hidden; }
.hero::after { content:""; position:absolute; right:-70px; top:-70px; width:260px; height:260px;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); pointer-events:none; }
.hero img { height:88px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.32)); }
.hero .hero-text { flex:1; min-width:260px; }
.hero h1 { margin:0; font-size:2.1rem; font-weight:850; letter-spacing:-.02em; }
.hero h1 small { font-weight:500; opacity:.85; font-size:1.05rem; }
.hero p { margin:.4rem 0 0; opacity:.92; font-size:1.05rem; max-width:52ch; }
.hero .cta { margin-top:1.1rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.hero .btn.ghost { background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.45); box-shadow:none; }
.hero .btn.ghost:hover { background:rgba(255,255,255,.26); }
/* topo da home: hero compacto + notícia em destaque (no lugar do hero gigante) */
.home-top { display:grid; grid-template-columns:1.05fr 1fr; gap:1.2rem; margin:1.4rem 0; align-items:stretch; }
.hero-slim { display:flex; align-items:center; gap:1.1rem; color:#fff; border-radius:16px; padding:1.25rem 1.5rem;
  background:linear-gradient(115deg,#163a6b,var(--blue) 60%,var(--accent)); box-shadow:0 10px 28px rgba(28,78,134,.24); }
.hero-slim img { height:58px; filter:drop-shadow(0 3px 9px rgba(0,0,0,.30)); }
.hero-slim h1 { margin:0 0 .55rem; font-size:1.5rem; font-weight:850; letter-spacing:-.02em; }
.hero-slim h1 small { font-weight:500; opacity:.85; font-size:.85rem; }
.hero-slim .cta { display:flex; gap:.5rem; flex-wrap:wrap; }
.hero-slim .btn.ghost { background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.42); box-shadow:none; }
.hero-slim .btn.ghost:hover { background:rgba(255,255,255,.27); }
.featured-news { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.15rem 1.3rem;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.25rem; min-width:0; justify-content:center; }
.featured-news .fn-tag { font-size:.7rem; font-weight:800; color:var(--accent); letter-spacing:.05em; text-transform:uppercase; }
.featured-news .fn-title { font-size:1.15rem; font-weight:800; color:var(--ink); text-decoration:none; line-height:1.25; }
.featured-news .fn-title:hover { color:var(--blue); }
.featured-news .fn-sum { color:var(--muted); font-size:.92rem; margin-top:.15rem; }
@media (max-width:760px){ .home-top { grid-template-columns:1fr; } }
/* página de notícias: lista (cards) + detalhe (markdown renderizado) */
.news-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:1rem; }
.news-card { display:flex; flex-direction:column; gap:.3rem; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:1.05rem 1.2rem; box-shadow:var(--shadow-sm); color:inherit; transition:.12s; }
.news-card:hover { text-decoration:none; box-shadow:var(--shadow); transform:translateY(-2px); }
.news-card-title { font-size:1.1rem; font-weight:800; color:var(--ink); line-height:1.25; }
.news-card-sum { font-size:.92rem; }
.news-card-more { color:var(--blue); font-weight:700; margin-top:.25rem; font-size:.85rem; }
.news-body { font-size:1.02rem; line-height:1.7; }
.news-body h1,.news-body h2,.news-body h3,.news-body h4 { line-height:1.25; margin:1.5rem 0 .6rem; }
.news-body h1 { font-size:1.55rem; } .news-body h2 { font-size:1.28rem; } .news-body h3 { font-size:1.1rem; }
.news-body p { margin:.7rem 0; } .news-body ul,.news-body ol { margin:.7rem 0 .7rem 1.3rem; }
.news-body a { color:var(--blue); }
.news-body img { max-width:100%; height:auto; border-radius:8px; }
.news-body pre { background:#f6f8fb; border:1px solid var(--line); border-radius:8px; padding:.8rem 1rem; overflow-x:auto; font-size:.9em; }
.news-body code { background:#eef3fb; padding:.1em .35em; border-radius:4px; font-size:.9em; }
.news-body pre code { background:none; padding:0; }
.news-body blockquote { border-left:3px solid var(--blue-soft); margin:.8rem 0; padding:.2rem 1rem; color:var(--muted); }
.news-body table { border-collapse:collapse; margin:1rem 0; } .news-body th,.news-body td { border:1px solid var(--line); padding:.4rem .6rem; }
/* editor de markdown (admin de notícias): editor + preview lado a lado */
.news-editor-split { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
@media (max-width:820px){ .news-editor-split { grid-template-columns:1fr; } }
.md-toolbar { display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:.35rem; }
.md-toolbar .btn { font-weight:700; line-height:1; }

/* problema: enunciado + envio lado a lado (telas largas) */
.problem-cols { display:grid; grid-template-columns:1fr; gap:1.2rem; align-items:start; }
@media (min-width:992px){
  .problem-cols { grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
  .problem-cols .submit-col { position:sticky; top:72px; }
}

/* cartões da home (treino: top10 + recentes) */
.two-col { display:grid; grid-template-columns:1fr; gap:1.2rem; }
@media (min-width:760px){ .two-col { grid-template-columns:1fr 1fr; } }
.subcard { background:#fafcff; border:1px solid var(--line); border-radius:12px; padding:.9rem 1.1rem; }
.subcard > h3 { margin:.1rem 0 .7rem; font-size:.98rem; color:var(--blue-dark); display:flex; align-items:center; gap:.4rem; }
.rank-list { display:flex; flex-direction:column; gap:.12rem; }
.rank-row { display:flex; align-items:center; gap:.7rem; padding:.4rem .5rem; border-radius:10px; color:inherit; }
.rank-row:hover { background:var(--blue-soft); text-decoration:none; }
.rank-num { flex:0 0 1.7rem; height:1.7rem; display:grid; place-items:center; border-radius:50%;
  background:var(--blue-soft); color:var(--blue-dark); font-weight:800; font-size:.78rem; }
.rank-row.r1 .rank-num { background:#fde68a; color:#92560a; }
.rank-row.r2 .rank-num { background:#e5e9f0; color:#475569; }
.rank-row.r3 .rank-num { background:#fcd9b6; color:#9a4a16; }
.rank-name { flex:1; min-width:0; display:flex; flex-direction:column; }
.rank-name .rn-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.ed-tag { font-size:.68rem; color:var(--muted); line-height:1.15; }
.rank-chip { background:var(--ok-bg); color:var(--ok); font-weight:700; font-size:.76rem; padding:.1rem .55rem; border-radius:999px; white-space:nowrap; }
/* avatar mini + chip de usuário (topbar / listas do treino) */
.avatar-mini { display:inline-block; border-radius:50%; overflow:hidden; flex:0 0 auto; vertical-align:middle;
  background:#cbd5e1; line-height:0; box-shadow:0 1px 3px rgba(20,40,80,.25); }
.avatar-mini img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.avatar-mini.ini { display:inline-grid; place-items:center; color:#fff; font-weight:800; line-height:1; }
.user-chip { display:inline-flex; align-items:center; gap:.45rem; font-weight:600; }
.topbar .user-chip { color:#fff; }
.user-chip:hover { text-decoration:none; opacity:.92; }
.recent-row { display:flex; flex-direction:column; gap:.05rem; padding:.4rem .5rem; border-radius:10px; color:inherit; }
.recent-row:hover { background:var(--blue-soft); text-decoration:none; }
.recent-row .ttl { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recent-row .who { font-size:.78rem; color:var(--muted); }
/* grade de cards do treino (home): top10 / semana passada / recentes */
.tcards { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1rem; align-items:start; }
.tcol { display:flex; flex-direction:column; gap:1rem; }       /* empilha 2 cards numa coluna */
.subcard-sm { padding:.75rem .95rem; }
.subcard-sm > h3 { margin-bottom:.45rem; }
.card-foot-link { display:inline-block; margin-top:.55rem; font-size:.82rem; font-weight:700; }
/* "mais resolvidos na semana passada": ranking de problemas */
.week-row { display:flex; align-items:center; gap:.6rem; padding:.42rem .5rem; border-radius:10px; color:inherit; }
.week-row:hover { background:var(--blue-soft); text-decoration:none; }
.week-row.editor-top { background:var(--blue-soft); }
.week-row.editor-top .wk-ttl { font-weight:800; }
.wk-rank { flex:0 0 1.5rem; height:1.5rem; display:grid; place-items:center; border-radius:7px;
  background:#fff3d6; color:#92560a; font-weight:800; font-size:.74rem; }
.wk-ttl { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
/* feed "resolvidos recentemente": problema + quem resolveu + quando */
.feed { display:flex; flex-direction:column; gap:.1rem; }
.feed-item { display:flex; align-items:flex-start; gap:.55rem; padding:.45rem .5rem; border-radius:10px; color:inherit; }
.feed-item:hover { background:var(--blue-soft); text-decoration:none; }
.feed-ic { flex:0 0 auto; font-size:.92rem; line-height:1.45; }
.feed-body { min-width:0; flex:1; display:flex; flex-direction:column; gap:.12rem; }
.feed-ttl { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feed-sub { display:flex; align-items:center; gap:.35rem; font-size:.78rem; color:var(--muted); }
.feed-who { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feed-time { margin-left:auto; padding-left:.4rem; white-space:nowrap; opacity:.85; }

/* lista de contests (home): cartões com status */
.contest-group { margin:.4rem 0 1.2rem; }
.contest-group .gh { display:flex; align-items:center; gap:.5rem; font-weight:800; color:var(--blue-dark);
  font-size:1.02rem; margin:.8rem 0 .55rem; padding-bottom:.32rem; border-bottom:2px solid var(--line); }
.contest-group .gh .count { background:var(--blue-soft); color:var(--blue-dark); border-radius:999px;
  font-size:.74rem; padding:.05rem .55rem; font-weight:800; }
.contest-card { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; background:#fff;
  border:1px solid var(--line); border-left:4px solid #cbd5e1; border-radius:12px;
  padding:.65rem .9rem; margin:.45rem 0; transition:box-shadow .12s, transform .12s; }
.contest-card:hover { box-shadow:var(--shadow-sm); transform:translateX(2px); }
.contest-card.open { border-left-color:var(--ok); }
.contest-card.upcoming { border-left-color:var(--accent); }
.contest-card .cc-main { flex:1 1 240px; min-width:0; }
.contest-card .cc-title { font-weight:700; font-size:1.03rem; }
.contest-card .cc-meta { display:flex; gap:.9rem; flex-wrap:wrap; font-size:.8rem; color:var(--muted); margin-top:.15rem; }
.contest-card .cc-when { font-weight:700; color:var(--blue-dark); }
.contest-card .cc-actions { display:flex; gap:.4rem; flex-wrap:wrap; }
.cc-badge { font-size:.72rem; font-weight:800; padding:.2rem .55rem; border-radius:999px; white-space:nowrap; flex:0 0 auto; }
.cc-badge.open { background:var(--ok-bg); color:var(--ok); }
.cc-badge.upcoming { background:#ece9ff; color:var(--accent); }
.cc-badge.closed { background:#eef2f8; color:var(--muted); }

@media (max-width:820px){
  .topbar .bar{flex-direction:column; align-items:flex-start;}
  .quicknav{ top:0; position:static; }
  .container{ padding:1rem .8rem 2rem; }
  .hero{ padding:1.6rem 1.2rem; }
  .hero h1{ font-size:1.6rem; }
}

/* gráficos (lib/charts.js): legenda da pizza + barras horizontais. Centralizado
   aqui para que qualquer página que use charts.js renderize legível (antes só a
   página de stat do treino definia .legend, e as demais saíam como texto corrido). */
.legend{ display:flex; flex-wrap:wrap; gap:.35rem .9rem; justify-content:center; margin-top:.5rem; font-size:.85rem; color:var(--ink); }
.legend .sw{ display:inline-block; width:.8em; height:.8em; border-radius:3px; margin-right:.3em; vertical-align:-.05em; }
.hbars{ display:flex; flex-direction:column; gap:.32rem; margin:.4rem 0; }
.hbar-row{ display:grid; grid-template-columns:minmax(64px,32%) 1fr auto; align-items:center; gap:.55rem; font-size:.86rem; }
.hbar-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
.hbar-track{ background:var(--blue-soft); border-radius:6px; height:.9rem; overflow:hidden; }
.hbar-fill{ height:100%; border-radius:6px; min-width:2px; }
.hbar-val{ font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap; font-size:.82rem; }