/* ============================================================
   FRAMEWORK-LAYOUT · core.css
   Design system extraído do padrão "html_campeonato".
   Importe este arquivo em qualquer projeto novo e sobrescreva
   as variáveis de :root para trocar o tema (cor de destaque etc).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500;600;700&family=Work+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg:#0e1410;
  --surface:#161e19;
  --surface-2:#1d2721;
  --line:#2a352e;
  --text:#e9ede8;
  --text-dim:#9fb0a3;
  --text-faint:#6b7d6e;
  --accent:#e3a53a;
  --accent-dim:#9c7226;
  --accent-ink:#1a1206;
  --blue:#5b9bf0;
  --red:#e0625a;
  --green:#5fbf7a;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f4f1e9; --surface:#fffdf7; --surface-2:#ece6d6; --line:#d9d0b8;
    --text:#1c2119; --text-dim:#4b5748; --text-faint:#7a8577;
    --accent:#b9791c; --accent-dim:#e3a53a; --accent-ink:#fff9ec;
    --blue:#2f5fb0; --red:#a53a33; --green:#2f7a4c;
  }
}
:root[data-theme="light"]{
  --bg:#f4f1e9; --surface:#fffdf7; --surface-2:#ece6d6; --line:#d9d0b8;
  --text:#1c2119; --text-dim:#4b5748; --text-faint:#7a8577;
  --accent:#b9791c; --accent-dim:#e3a53a; --accent-ink:#fff9ec;
  --blue:#2f5fb0; --red:#a53a33; --green:#2f7a4c;
}
:root[data-theme="dark"]{
  --bg:#0e1410; --surface:#161e19; --surface-2:#1d2721; --line:#2a352e;
  --text:#e9ede8; --text-dim:#9fb0a3; --text-faint:#6b7d6e;
  --accent:#e3a53a; --accent-dim:#9c7226; --accent-ink:#1a1206;
  --blue:#5b9bf0; --red:#e0625a; --green:#5fbf7a;
}

*{box-sizing:border-box;}
body{ background:var(--bg); color:var(--text); font-family:'Work Sans', system-ui, sans-serif; margin:0; line-height:1.5; }
h1,h2,h3,.display{ font-family:'Teko', 'Oswald', sans-serif; font-weight:600; letter-spacing:0.01em; text-wrap:balance; margin:0; }
.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }
a{ color:var(--blue); }

.wrap{ max-width:min(1800px, 96vw); margin:0 auto; padding:0 clamp(16px,2.5vw,40px) 80px; }

/* ---------- HERO ---------- */
.hero{
  background:
    radial-gradient(ellipse 900px 400px at 15% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent),
    linear-gradient(180deg, var(--surface), var(--bg) 85%);
  border-bottom:1px solid var(--line);
  padding:56px 28px 40px;
}
.hero-inner{ max-width:min(1800px, 96vw); margin:0 auto; }
.hero-top{ display:flex; align-items:center; gap:20px; }
.hero-logo{ width:76px; height:76px; object-fit:contain; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); padding:6px; flex-shrink:0; }
@media (max-width:520px){ .hero-logo{ width:56px; height:56px; } }
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:8px; height:8px; background:var(--accent); display:inline-block; border-radius:1px; }
.hero h1{ font-size:clamp(48px, 8vw, 92px); line-height:0.92; margin-top:8px; color:var(--text); }
.hero h1 span{ color:var(--accent); }
.hero p.lede{ color:var(--text-dim); font-size:17px; max-width:60ch; margin-top:14px; }

.stat-row{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:32px; border-radius:6px; overflow:hidden;
}
.stat{ background:var(--surface); padding:16px 18px; }
.stat .n{ font-family:'Teko', sans-serif; font-size:38px; color:var(--accent); line-height:1; }
.stat .l{ font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.08em; margin-top:4px; }

/* ---------- TABS ---------- */
nav.tabs{
  position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.tabs-inner{ max-width:min(1800px, 96vw); margin:0 auto; padding:0 clamp(16px,2.5vw,40px); display:flex; gap:4px; overflow-x:auto; }
.tab-btn{
  font-family:'JetBrains Mono', monospace; font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--text-faint); background:none; border:none; padding:16px 14px 14px; cursor:pointer;
  border-bottom:2px solid transparent; white-space:nowrap; flex:1 1 0; min-width:fit-content; text-align:center;
}
.tab-btn:hover{ color:var(--text); }
.tab-btn.active{ color:var(--accent); border-bottom-color:var(--accent); }
.tab-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

section.panel{ display:none; padding-top:44px; }
section.panel.active{ display:block; }

h2.section-title{ font-size:34px; color:var(--text); display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
h2.section-title .num{ color:var(--accent-dim); font-size:22px; }
.section-sub{ color:var(--text-dim); font-size:14.5px; max-width:65ch; margin-bottom:28px; }

/* ---------- CARDS / GRIDS ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:22px 24px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:900px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

.card h3{ font-size:20px; color:var(--accent); margin-bottom:10px; display:flex; align-items:center; gap:8px; justify-content:space-between; }
.card ul{ margin:0; padding-left:18px; color:var(--text-dim); font-size:14.5px; }
.card li{ margin-bottom:6px; }
.card li strong{ color:var(--text); font-weight:600; }
.card p{ color:var(--text-dim); font-size:14.5px; margin:0 0 10px; }

.stack{ display:flex; flex-direction:column; gap:18px; }

/* ---------- BANNERS / HIGHLIGHTS ---------- */
.today-banner{
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface));
  border:1px solid var(--accent-dim); border-radius:8px; padding:14px 20px; margin-top:24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.today-banner .label{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); }
.today-banner .info{ color:var(--text); font-size:15px; margin-top:2px; }
.countdown{ font-family:'JetBrains Mono',monospace; color:var(--accent); font-size:15px; }

.highlight-card{
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface));
  border:1px solid var(--accent-dim); border-radius:10px; padding:20px 24px; margin-top:24px;
  display:flex; align-items:center; gap:16px;
}
.highlight-card .icon{ font-family:'Teko',sans-serif; font-size:44px; color:var(--accent); line-height:1; }
.highlight-card .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; }
.highlight-card .name{ font-family:'Teko',sans-serif; font-size:30px; color:var(--text); line-height:1; }
.highlight-card .texto{ color:var(--text-dim); font-size:14px; margin-top:4px; }

/* ---------- MODAL ---------- */
.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:200; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.show{ display:flex; }
.modal-box{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:26px; width:100%; max-width:640px; max-height:88vh; overflow-y:auto; }
.modal-box .modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px; }
.modal-box .modal-head h3{ font-size:28px; color:var(--accent); display:flex; align-items:center; gap:10px; }
.modal-box .modal-head img{ width:32px; height:32px; object-fit:contain; border-radius:6px; }
.modal-box .modal-close{ background:none; border:none; color:var(--text-faint); font-size:24px; cursor:pointer; line-height:1; padding:0 4px; }
.modal-box .modal-close:hover{ color:var(--text); }
.modal-section{ margin-bottom:18px; }
.modal-section h4{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px; }
.modal-actions{ display:flex; gap:8px; margin-top:18px; }
.clickable{ cursor:pointer; }
.clickable:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

.share-btn{
  background:var(--surface-2); border:1px solid var(--line); color:var(--text); border-radius:6px;
  padding:8px 14px; font-size:13px; cursor:pointer; font-family:'Work Sans',sans-serif;
}
.share-btn:hover{ border-color:var(--accent-dim); }

.callout{ border-left:3px solid var(--accent); background:var(--surface-2); padding:14px 18px; border-radius:0 6px 6px 0; font-size:14px; color:var(--text-dim); }
.callout strong{ color:var(--text); }
.callout.warn{ border-left-color:var(--red); }
.callout.warn strong{ color:var(--red); }

/* ---------- TABLE ---------- */
table{ width:100%; border-collapse:collapse; font-size:14px; }
th{
  text-align:left; font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--text-faint); padding:10px 12px; border-bottom:1px solid var(--line);
}
td{ padding:11px 12px; border-bottom:1px solid var(--line); color:var(--text-dim); }
tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:8px; }
.table-wrap table{ min-width:560px; }
td.num, th.num{ text-align:center; font-variant-numeric:tabular-nums; }
.pos{ font-family:'JetBrains Mono', monospace; color:var(--text-faint); width:28px; display:inline-block; }
.badge{ display:inline-block; font-family:'JetBrains Mono', monospace; font-size:10.5px; padding:2px 7px; border-radius:4px; letter-spacing:0.04em; }
.badge.final{ background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--accent); }
.badge.zone{ background:color-mix(in srgb, var(--blue) 20%, transparent); color:var(--blue); }
.badge.ok{ background:color-mix(in srgb, var(--green) 20%, transparent); color:var(--green); }
.badge.muted{ background:color-mix(in srgb, var(--text-faint) 25%, transparent); color:var(--text-dim); }
.badge.warn{ background:color-mix(in srgb, var(--red) 20%, transparent); color:var(--red); }
.crest{ width:18px; height:18px; object-fit:contain; vertical-align:middle; margin:0 6px 2px 0; border-radius:3px; }
tr.highlight-row td:first-child{ box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- CALENDAR ---------- */
.cal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cal-header h3{ font-size:22px; color:var(--text); text-transform:capitalize; }
.cal-nav{
  background:var(--surface-2); border:1px solid var(--line); color:var(--text);
  width:32px; height:32px; border-radius:6px; cursor:pointer; font-size:18px; line-height:1;
}
.cal-nav:hover{ border-color:var(--accent-dim); color:var(--accent); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-dow{ font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--text-faint); text-transform:uppercase; text-align:center; padding-bottom:6px; }
.cal-day{
  min-height:150px; border-radius:6px; background:var(--surface-2); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:stretch; padding:6px 5px;
  font-size:12.5px; color:var(--text-dim); cursor:default;
}
.cal-day.empty{ background:transparent; border-color:transparent; }
.cal-day.has-item{ border-color:var(--accent-dim); cursor:pointer; }
.cal-day.has-item:hover{ border-color:var(--accent); background:var(--surface); }
.cal-day.selected{ background:color-mix(in srgb, var(--accent) 16%, var(--surface-2)); border-color:var(--accent); }
.cal-day .daynum{ font-family:'JetBrains Mono', monospace; color:var(--text); font-weight:600; align-self:flex-start; }
.cal-day.today .daynum{ color:var(--accent); }
.cal-chip{
  margin-top:4px; background:color-mix(in srgb, var(--accent) 18%, var(--surface)); color:var(--text);
  border-radius:4px; padding:2px 5px; font-size:10.5px; line-height:1.35; font-family:'JetBrains Mono', monospace;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
}
.cal-chip.done{ background:color-mix(in srgb, var(--green) 20%, var(--surface)); }
.cal-chip.special{ background:color-mix(in srgb, var(--blue) 22%, var(--surface)); color:var(--text); font-family:'Work Sans',sans-serif; font-weight:600; white-space:normal; }
#cal-day-detail{ margin-top:14px; }
#cal-day-detail .card{ padding:16px 18px; }
#cal-day-detail h4{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px; }
@media (max-width:600px){ .cal-day{ font-size:9.5px; min-height:110px; } .cal-day .daynum{ font-size:11px; } .cal-chip{ font-size:8px; } }

/* ---------- STEP LIST ---------- */
.step-list{ counter-reset:step; list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0; }
.step-list li{ counter-increment:step; display:grid; grid-template-columns:40px 1fr; gap:14px; padding:16px 0; }
.step-list li + li{ border-top:1px solid var(--line); }
.step-list li::before{ content:counter(step); font-family:'Teko', sans-serif; font-size:28px; color:var(--accent-dim); line-height:1; }
.step-list h4{ color:var(--text); font-size:15.5px; margin:0 0 4px; font-weight:600; }
.step-list p{ color:var(--text-dim); font-size:14px; margin:0; }

/* ---------- KANBAN (com drag & drop) ---------- */
.kanban-wrap{ overflow-x:auto; padding-bottom:8px; width:100%; }
.kanban{ display:flex; gap:8px; align-items:flex-start; width:100%; min-width:min-content; }
.kanban-col{
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  flex:1 1 0; min-width:140px; display:flex; flex-direction:column; max-height:600px;
}
.kanban-col.pool{ border-color:var(--accent-dim); }
.kanban-col-head{ padding:9px 10px 8px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:5px; }
.kanban-col-head img{ width:16px; height:16px; object-fit:contain; border-radius:3px; flex-shrink:0; }
.kanban-col-head h4{ font-size:13.5px; color:var(--text); line-height:1.15; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-col-head .count{
  font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--text-faint);
  background:var(--surface-2); border-radius:9px; padding:1px 6px; flex-shrink:0;
}
.kanban-col.pool .kanban-col-head h4{ color:var(--accent); }
.kanban-search{ padding:6px 8px 0; }
.kanban-search input{
  width:100%; background:var(--surface-2); border:1px solid var(--line); color:var(--text);
  border-radius:5px; padding:5px 8px; font-size:11.5px; font-family:'Work Sans',sans-serif;
}
.kanban-search input::placeholder{ color:var(--text-faint); }
.kanban-body{ padding:8px; display:flex; flex-direction:column; gap:5px; overflow-y:auto; min-height:50px; }
.kanban-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:5px 7px; font-size:11.5px; color:var(--text); line-height:1.3; }
.kanban-card .title{ display:block; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-card .sub{ display:block; font-family:'JetBrains Mono', monospace; font-size:9px; color:var(--text-faint); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-empty{ color:var(--text-faint); font-size:11px; font-style:italic; padding:4px 2px; }
.kanban-card[draggable="true"]{ cursor:grab; }
.kanban-card.dragging{ opacity:0.4; }
.kanban-col-head[draggable="true"]{ cursor:grab; }
.kanban-col.drag-over{ border-color:var(--accent); }
.kanban-body.drag-over{ background:color-mix(in srgb, var(--accent) 8%, transparent); outline:1px dashed var(--accent); }

/* ---------- BRACKET ---------- */
.bracket{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; align-items:center; }
.bracket-col{ display:flex; flex-direction:column; gap:16px; justify-content:center; height:100%; }
.bracket-col.round1{ justify-content:space-between; }
.match-box{ background:var(--surface-2); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.match-box .slot{ padding:9px 12px; font-size:13.5px; color:var(--text-dim); display:flex; justify-content:space-between; }
.match-box .slot + .slot{ border-top:1px solid var(--line); }
.match-box .slot.seed-top{ color:var(--text); }
.match-box .tag{ font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--text-faint); }
.match-box.final{ border-color:var(--accent-dim); }
.match-box.final .slot.seed-top{ color:var(--accent); }
.bracket-label{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint); text-align:center; margin-bottom:10px; }
@media (max-width:760px){ .bracket{ grid-template-columns:1fr; } }

/* ---------- RANK LIST ---------- */
.rank-list{ display:flex; flex-direction:column; }
.rank-row{ display:grid; grid-template-columns:32px 1fr 70px; gap:10px; align-items:center; padding:10px 4px; font-size:14.5px; border-top:1px solid var(--line); }
.rank-row:first-child{ border-top:none; }
.rank-row .n{ font-family:'JetBrains Mono', monospace; color:var(--text-faint); }
.rank-row .who{ color:var(--text); }
.rank-row .who .club{ color:var(--text-faint); font-size:12px; margin-left:6px; }
.rank-row .v{ font-family:'Teko', sans-serif; font-size:22px; color:var(--accent); text-align:right; }

/* ---------- FORMS (admin) ---------- */
input,select,button{ font-family:'Work Sans', sans-serif; font-size:14px; }
input,select{
  background:var(--surface-2); border:1px solid var(--line); color:var(--text);
  border-radius:5px; padding:8px 10px; width:100%;
}
button{
  background:var(--accent); color:var(--accent-ink); border:none; border-radius:5px;
  padding:9px 16px; font-weight:600; cursor:pointer;
}
button.secondary{ background:var(--surface-2); color:var(--text); border:1px solid var(--line); }
button.danger{ background:var(--red); color:#2a0a08; }
button:hover{ filter:brightness(1.08); }
.grid-form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; align-items:end; }
.grid-form .field label{ font-size:11px; color:var(--text-faint); text-transform:uppercase; display:block; margin-bottom:4px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; }
.row-actions{ display:flex; gap:6px; }
.row-actions button{ padding:5px 10px; font-size:12px; }

/* ---------- LOGIN SCREEN (admin) ---------- */
#login-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-box{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:36px 32px; width:100%; max-width:380px; }
.login-box img{ width:56px; height:56px; display:block; margin-bottom:14px; border-radius:8px; }
.login-box h1{ font-size:30px; margin-bottom:4px; }
.login-box p{ color:var(--text-dim); font-size:13px; margin:0 0 20px; }
.error-msg{ color:var(--red); font-size:13px; margin-top:10px; min-height:16px; }

header.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 28px; border-bottom:1px solid var(--line); background:var(--surface);
}
header.topbar .brand{ display:flex; align-items:center; gap:10px; }
header.topbar img{ width:32px; height:32px; border-radius:6px; }
header.topbar h1{ font-size:22px; }
nav.admin-tabs{ display:flex; gap:6px; margin-bottom:24px; flex-wrap:wrap; }
nav.admin-tabs .tab-btn{
  background:var(--surface); border:1px solid var(--line); color:var(--text-dim);
  padding:9px 14px; border-radius:6px; cursor:pointer; font-size:13px; flex:none;
}
nav.admin-tabs .tab-btn.active{ color:var(--accent); border-color:var(--accent-dim); }
.admin-panel{ display:none; }
.admin-panel.active{ display:block; }

/* ---------- CONFIRMAÇÃO (FW.confirm) ---------- */
.fw-confirm-overlay{ z-index:400; }
.fw-confirm-box{ max-width:460px; text-align:center; padding:26px 26px 22px; border:1px solid var(--accent-dim); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent), 0 20px 50px rgba(0,0,0,.5); animation:fwConfirmIn .16s ease-out; }
@keyframes fwConfirmIn{ from{ transform:translateY(8px) scale(.97); opacity:0; } to{ transform:none; opacity:1; } }
.fw-confirm-icon{ font-size:34px; line-height:1; margin-bottom:6px; }
.fw-confirm-box h3{ font-size:26px; color:var(--accent); margin-bottom:8px; }
.fw-confirm-msg{ color:var(--text-dim); font-size:14.5px; margin:0 0 20px; white-space:pre-line; }
.fw-confirm-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.fw-confirm-actions button{ min-width:130px; padding:9px 18px; }
.fw-confirm-box.danger .fw-confirm-yes{ background:var(--red); color:#fff; }

/* ---------- TOAST ---------- */
.toast{
  position:fixed; bottom:20px; right:20px; background:var(--surface); border:1px solid var(--accent-dim);
  color:var(--text); padding:12px 18px; border-radius:8px; font-size:13.5px; display:none; z-index:300;
}
.toast.show{ display:block; }
.toast.error{ border-color:var(--red); }
.empty-note{ color:var(--text-faint); font-size:13px; font-style:italic; }

footer{ text-align:center; color:var(--text-faint); font-size:12.5px; padding:40px 0 10px; font-family:'JetBrains Mono', monospace; }
.updated-note{ text-align:center; color:var(--text-faint); font-size:11.5px; font-family:'JetBrains Mono', monospace; padding-top:6px; }