:root {
  --nx-brand: #0B8A5B;
  --nx-brand-dark: #086B47;
  --nx-brand-soft: #E7F5EF;
  --nx-gain: #0B8A5B;
  --nx-loss: #C0392B;
  --nx-ink: #0F172A;
  --nx-ink-2: #334155;
  --nx-muted: #64748B;
  --nx-line: #E4E9F0;
  --nx-surface: #FFFFFF;
  --nx-bg: #F4F7FA;
  --nx-sidebar: #0E1B2A;
  --nx-sidebar-2: #16293D;
  --nx-radius: 14px;
  --nx-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.18);
  --nx-shadow-lg: 0 2px 4px rgba(15, 23, 42, 0.05), 0 18px 40px -18px rgba(15, 23, 42, 0.28);
  --nx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

body, input, button, select, textarea, .adminjs_Text, .adminjs_Label {
  font-family: var(--nx-font);
  -webkit-font-smoothing: antialiased;
}

/* ── Shell ──────────────────────────────────────────────────────────────── */

[data-css="app-content"], section[data-css="app"] { background: var(--nx-bg); }

[data-css="sidebar"] {
  background: linear-gradient(180deg, var(--nx-sidebar) 0%, var(--nx-sidebar-2) 100%) !important;
  border-right: none !important;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04);
}
[data-css="sidebar"] * { color: #CBD5E1; }
[data-css="sidebar-logo"] {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 22px 24px !important;
}
[data-css="sidebar-logo"] h1 {
  color: #FFFFFF !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
[data-css="sidebar-resources"] .adminjs_Label {
  color: #64748B !important;
  font-size: 10px !important;
  letter-spacing: 0.12em;
  padding-left: 24px !important;
  margin-bottom: 4px;
}
[data-css="sidebar-resources"] ul a {
  border-radius: 10px;
  margin: 2px 12px;
  padding: 9px 12px !important;
  transition: background 120ms ease, color 120ms ease;
}
[data-css="sidebar-resources"] ul a:hover { background: rgba(255, 255, 255, 0.07); }
[data-css="sidebar-resources"] ul a:hover * { color: #FFFFFF; }
/* AdminJS marks the open group/resource by tinting its background; the
   generated class is unstable, so this keys off the inline style it sets. */
[data-css="sidebar-resources"] ul a.selected,
[data-css="sidebar-resources"] ul a[class*="selected"] {
  background: rgba(11, 138, 91, 0.22);
}
[data-css="sidebar-resources"] ul a.selected *,
[data-css="sidebar-resources"] ul a[class*="selected"] * { color: #FFFFFF; }
[data-css="sidebar-resources"] svg { stroke: #94A3B8; }
[data-css="sidebar-resources"] a:hover svg { stroke: #FFFFFF; }
[data-css="sidebar-footer"] { border-top: 1px solid rgba(255, 255, 255, 0.08); }
[data-css="version"], [data-css="version"] * { color: #475569 !important; font-size: 11px; }

[data-css="topbar"], .adminjs_NavBar {
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--nx-line) !important;
  box-shadow: none !important;
}
[data-css="logged-in"] span { color: var(--nx-ink-2); font-weight: 500; }

.adminjs_Breadcrumbs, .adminjs_Breadcrumbs * { color: var(--nx-muted); font-size: 12px; }
.adminjs_Breadcrumbs a:hover { color: var(--nx-brand); }

/* The User list is our own screen, so AdminJS's action header above it — a
   generic "List" title and a Filter button that would filter a table we no
   longer render — is dead chrome. The breadcrumb above it stays. */
[data-css="User-list-action-header"] { display: none; }

/* ── Typography ─────────────────────────────────────────────────────────── */

.adminjs_H2 { color: var(--nx-ink); font-weight: 680; letter-spacing: -0.02em; }
.adminjs_H3, .adminjs_H5 { color: var(--nx-ink); font-weight: 620; letter-spacing: -0.01em; }

/* ── Cards, tables, controls (AdminJS's own screens) ────────────────────── */

.adminjs_Box[class*="white"] {
  border-radius: var(--nx-radius) !important;
  border: 1px solid var(--nx-line) !important;
  box-shadow: var(--nx-shadow) !important;
}

.adminjs_Table { border-collapse: separate; border-spacing: 0; }
.adminjs_TableHead .adminjs_TableCell,
.adminjs_TableHead .adminjs_TableCell * {
  color: var(--nx-muted) !important;
  font-size: 11px !important;
  font-weight: 620 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.adminjs_TableHead .adminjs_TableRow {
  background: #FAFBFD;
  border-bottom: 1px solid var(--nx-line) !important;
}
.adminjs_TableBody .adminjs_TableRow { transition: background 110ms ease; }
.adminjs_TableBody .adminjs_TableRow:hover { background: #F7FAF9 !important; }
.adminjs_TableCell { border-bottom: 1px solid #EEF2F7 !important; color: var(--nx-ink-2); }
.adminjs_SortLink:hover, .adminjs_SortLink:hover * { color: var(--nx-brand) !important; }

.adminjs_Button {
  border-radius: 10px !important;
  font-weight: 560 !important;
  letter-spacing: 0;
  transition: transform 90ms ease, box-shadow 140ms ease, background 140ms ease;
}
.adminjs_Button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(11, 138, 91, 0.6); }
.adminjs_Button:active { transform: translateY(0); }

.adminjs_Input, .adminjs_Select > div {
  border-radius: 10px !important;
  border-color: var(--nx-line) !important;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.adminjs_Input:focus, .adminjs_Input:focus-within {
  border-color: var(--nx-brand) !important;
  box-shadow: 0 0 0 3px var(--nx-brand-soft) !important;
}

.adminjs_Badge {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  padding: 3px 10px !important;
}

.adminjs_PaginationLink { border-radius: 9px !important; }
.adminjs_Drawer { border-radius: 16px 0 0 16px; box-shadow: var(--nx-shadow-lg); }

/* ── Login ──────────────────────────────────────────────────────────────── */

.nx-login-bg {
  min-height: 100vh;
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(11, 138, 91, 0.16), transparent 62%),
    radial-gradient(760px 420px at 96% 108%, rgba(15, 118, 110, 0.14), transparent 60%),
    #F4F7FA;
}

/* ── Our own screens ────────────────────────────────────────────────────── */

.nx-page { padding: 28px 32px 56px; background: var(--nx-bg); min-height: 100%; }
.nx-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.nx-page-head h1 {
  margin: 0; font-size: 26px; font-weight: 680;
  letter-spacing: -0.025em; color: var(--nx-ink);
}
.nx-sub { margin: 6px 0 0; color: var(--nx-muted); font-size: 13px; }
.nx-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.nx-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--nx-line); background: var(--nx-surface);
  color: var(--nx-ink-2); border-radius: 10px;
  padding: 8px 14px; font-size: 13px; font-weight: 560; cursor: pointer;
  /* Some of these are <a> elements (the back links, the dashboard shortcuts);
     AdminJS underlines anchors globally, which made them read as links inside
     a button shape. */
  text-decoration: none; white-space: nowrap;
  transition: border-color 120ms ease, background 120ms ease, transform 90ms ease, box-shadow 140ms ease;
}
a.nx-btn:hover { text-decoration: none; color: var(--nx-ink-2); }
a.nx-btn-primary, a.nx-btn-primary:hover { color: #FFFFFF; }
.nx-btn:hover { border-color: #CBD5E1; background: #FBFDFC; transform: translateY(-1px); box-shadow: var(--nx-shadow); }
.nx-btn:active { transform: translateY(0); }
.nx-btn-primary {
  background: var(--nx-brand); border-color: var(--nx-brand); color: #FFFFFF;
}
.nx-btn-primary:hover { background: var(--nx-brand-dark); border-color: var(--nx-brand-dark); }
.nx-btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.nx-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow);
  margin-bottom: 20px;
  overflow: hidden;
}
.nx-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 16px 20px; border-bottom: 1px solid var(--nx-line);
}
.nx-card-head h2 {
  margin: 0; font-size: 14px; font-weight: 640;
  letter-spacing: -0.01em; color: var(--nx-ink);
}
.nx-card-body { padding: 18px 20px; overflow-x: auto; }
/* Design-system tables (the user activity and competition pages still use
   them) are dense enough that a narrow column breaks "MARKET" across two
   lines. Inside our cards they keep their cells on one line and scroll the
   card instead. Scoped to nx-card-body so AdminJS's own list pages, which
   have cells holding long free text, are untouched. */
.nx-card-body .adminjs_TableCell { white-space: nowrap; }
.nx-card-foot {
  padding: 12px 20px; border-top: 1px solid var(--nx-line);
  background: #FAFBFD; color: var(--nx-muted); font-size: 12px;
}

.nx-grid { display: grid; gap: 14px; margin-bottom: 20px; }
.nx-grid-kpi { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Both screens show exactly six KPIs. Left to auto-fit they land 5 + 1 on a
   typical laptop, which reads as a mistake; pinned to 3 then 6 they always
   form a complete block. */
@media (min-width: 900px)  { .nx-grid-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1380px) { .nx-grid-kpi { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.nx-grid-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); align-items: start; }

.nx-kpi {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  transition: transform 140ms ease, box-shadow 160ms ease;
}
.nx-kpi:hover { transform: translateY(-2px); box-shadow: var(--nx-shadow-lg); }
.nx-kpi::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--nx-accent, var(--nx-brand)); opacity: 0.85;
}
.nx-kpi-label {
  display: block; font-size: 11px; font-weight: 620; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--nx-muted);
}
.nx-kpi-value {
  display: block; margin-top: 8px; font-size: 20px; font-weight: 680;
  letter-spacing: -0.025em; color: var(--nx-ink);
  font-variant-numeric: tabular-nums;
  /* Six KPIs across a laptop leaves ~190px a card, which is narrow enough to
     break "NPR 4.18 Cr" across two lines. A wrapped figure reads as two
     numbers, so it shrinks to fit instead. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Values that are not short numbers — a timestamp, "Real portfolio" — would
   otherwise be cut off by that ellipsis. They get to wrap, smaller. */
.nx-kpi-value.is-long {
  font-size: 16px; line-height: 1.3; letter-spacing: -0.005em;
  white-space: normal; overflow: visible;
}
.nx-kpi-hint { display: block; margin-top: 5px; font-size: 12px; color: var(--nx-muted); }

.nx-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--nx-line);
}
.nx-search {
  flex: 1 1 260px; min-width: 200px;
  border: 1px solid var(--nx-line); border-radius: 10px;
  padding: 9px 13px; font-size: 13px; color: var(--nx-ink);
  background: #FBFCFE;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.nx-search:focus {
  outline: none; background: #FFFFFF;
  border-color: var(--nx-brand); box-shadow: 0 0 0 3px var(--nx-brand-soft);
}

.nx-segments { display: flex; gap: 6px; flex-wrap: wrap; }
.nx-seg {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; background: transparent;
  color: var(--nx-muted); border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 560; cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.nx-seg:hover { background: #F1F5F9; color: var(--nx-ink-2); }
.nx-seg.is-active {
  background: var(--nx-brand-soft); border-color: rgba(11, 138, 91, 0.25); color: var(--nx-brand-dark);
}
.nx-seg-count {
  font-size: 11px; font-weight: 640; font-variant-numeric: tabular-nums;
  background: rgba(15, 23, 42, 0.06); color: inherit;
  border-radius: 999px; padding: 1px 7px;
}
.nx-seg.is-active .nx-seg-count { background: rgba(11, 138, 91, 0.16); }

.nx-table-wrap { overflow-x: auto; }
.nx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.nx-table th {
  position: sticky; top: 0; z-index: 1;
  background: #FAFBFD; border-bottom: 1px solid var(--nx-line);
  color: var(--nx-muted); font-size: 10.5px; font-weight: 640;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 11px 14px; text-align: left; white-space: nowrap;
}
.nx-table th.nx-sortable { cursor: pointer; user-select: none; }
.nx-table th.nx-sortable:hover { color: var(--nx-brand); }
.nx-table th.is-sorted { color: var(--nx-brand); }
.nx-table td {
  padding: 10px 12px; border-bottom: 1px solid #EEF2F7;
  color: var(--nx-ink-2); vertical-align: middle; white-space: nowrap;
}
.nx-table tbody tr { transition: background 110ms ease; }
.nx-table tbody tr:hover { background: #F7FAF9; }
.nx-table tbody tr:last-child td { border-bottom: none; }
.nx-num { text-align: right; font-variant-numeric: tabular-nums; }
.nx-gain { color: var(--nx-gain); font-weight: 600; }
.nx-loss { color: var(--nx-loss); font-weight: 600; }
.nx-dim { color: var(--nx-muted); }

.nx-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nx-avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 640; color: #FFFFFF;
  background: linear-gradient(135deg, var(--nx-brand) 0%, #14B87E 100%);
  letter-spacing: 0.02em;
}
.nx-user-main { min-width: 0; }
.nx-user-name {
  display: block; font-weight: 580; color: var(--nx-ink);
  overflow: hidden; text-overflow: ellipsis; max-width: 185px;
}
.nx-user-mail {
  display: block; font-size: 11.5px; color: var(--nx-muted);
  overflow: hidden; text-overflow: ellipsis; max-width: 185px;
}

.nx-pill {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 2px 9px;
  font-size: 11px; font-weight: 620; letter-spacing: 0.01em;
  background: #F1F5F9; color: var(--nx-ink-2);
}
.nx-pill-ok { background: rgba(11, 138, 91, 0.12); color: var(--nx-brand-dark); }
.nx-pill-warn { background: rgba(217, 119, 6, 0.13); color: #B45309; }
.nx-pill-bad { background: rgba(192, 57, 43, 0.12); color: #B0392B; }
.nx-pill-info { background: rgba(37, 99, 235, 0.11); color: #1D4ED8; }
.nx-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Sub-line under a table cell's main value — a baseline under a portfolio
   figure, a buy/sell split under an order count. Keeps a column's worth of
   context without costing a column. */
.nx-cell-sub { display: block; font-size: 11px; color: var(--nx-muted); font-weight: 400; margin-top: 2px; }
.nx-cell-main { font-weight: 580; color: var(--nx-ink); }

.nx-expand {
  border: 1px solid var(--nx-line); background: var(--nx-surface); color: var(--nx-muted);
  border-radius: 8px; padding: 4px 9px; font-size: 11.5px; font-weight: 580;
  cursor: pointer; white-space: nowrap;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.nx-expand:hover { border-color: var(--nx-brand); color: var(--nx-brand-dark); background: var(--nx-brand-soft); }
.nx-expand.is-open { border-color: var(--nx-brand); color: var(--nx-brand-dark); background: var(--nx-brand-soft); }

.nx-rank {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; font-size: 11.5px; font-weight: 680;
  background: #F1F5F9; color: var(--nx-ink-2);
}
.nx-rank-1 { background: #FDF3D3; color: #92700E; }
.nx-rank-2 { background: #EDF1F5; color: #526075; }
.nx-rank-3 { background: #F9E8DC; color: #A05A2C; }

/* The expanded entrant panel. Sits inside a full-width cell of the row above,
   so it is tinted and inset to read as a drawer rather than another row. */
.nx-detail { background: #F7F9FC; border-top: 1px solid var(--nx-line); padding: 18px 20px 20px; }
.nx-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.nx-detail-title { font-size: 13.5px; font-weight: 640; color: var(--nx-ink); }
.nx-detail h4 {
  margin: 20px 0 4px; font-size: 11px; font-weight: 640;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--nx-muted);
}
.nx-detail h4:first-of-type { margin-top: 0; }
.nx-detail-note { margin: 0 0 10px; font-size: 12px; color: var(--nx-muted); }

/* Money split — cash + holdings = total, stated as three tiles so the figures
   are visibly reconcilable rather than one opaque "current value". */
.nx-tiles { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.nx-tile {
  background: var(--nx-surface); border: 1px solid var(--nx-line);
  border-radius: 10px; padding: 9px 14px; min-width: 132px;
}
.nx-tile-label {
  display: block; font-size: 10.5px; font-weight: 620; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--nx-muted);
}
.nx-tile-value {
  display: block; margin-top: 3px; font-size: 15px; font-weight: 660;
  color: var(--nx-ink); font-variant-numeric: tabular-nums;
}
.nx-tile-op { align-self: center; color: var(--nx-muted); font-size: 15px; font-weight: 600; }

/* Tables nested inside a detail panel: white card on the tinted background. */
.nx-table-inner {
  background: var(--nx-surface); border: 1px solid var(--nx-line);
  border-radius: 10px; overflow: hidden;
}
.nx-table-inner table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.nx-table-inner th {
  background: #FAFBFD; border-bottom: 1px solid var(--nx-line);
  color: var(--nx-muted); font-size: 10px; font-weight: 640;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 12px; text-align: left; white-space: nowrap;
}
.nx-table-inner td {
  padding: 9px 12px; border-bottom: 1px solid #EEF2F7;
  color: var(--nx-ink-2); white-space: nowrap;
}
.nx-table-inner tbody tr:hover { background: #F7FAF9; }
.nx-table-inner tfoot td {
  border-top: 1px solid var(--nx-line); border-bottom: none;
  background: #FAFBFD; font-weight: 620; color: var(--nx-ink);
}
.nx-table-inner tfoot tr.nx-total td { font-size: 13px; }

/* Share of the entrant's portfolio, as a number plus a bar — the bar is what
   makes an over-concentrated position obvious at a glance. */
.nx-weight { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.nx-weight-bar { width: 54px; height: 6px; border-radius: 999px; background: #EEF2F7; overflow: hidden; }
.nx-weight-bar > span { display: block; height: 100%; background: var(--nx-brand); opacity: 0.8; }
.nx-weight-pct { font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }

.nx-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--nx-line); background: #FAFBFD;
}
.nx-pager-info { color: var(--nx-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.nx-pager-btns { display: flex; gap: 6px; }

.nx-empty { padding: 40px 20px; text-align: center; color: var(--nx-muted); font-size: 13px; }

.nx-bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.nx-bar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 3px; }
.nx-bar > span {
  display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0;
  background: var(--nx-brand); opacity: 0.85;
  transition: opacity 120ms ease, transform 120ms ease;
}
.nx-bar:hover > span { opacity: 1; transform: scaleY(1.02); transform-origin: bottom; }
.nx-axis {
  display: flex; justify-content: space-between;
  margin-top: 8px; font-size: 11px; color: var(--nx-muted);
  font-variant-numeric: tabular-nums;
}
.nx-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--nx-muted); }
.nx-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 6px; }

.nx-split { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; margin-bottom: 7px; }
.nx-split b { font-weight: 620; color: var(--nx-ink); font-variant-numeric: tabular-nums; }
.nx-stack { display: grid; gap: 16px; }

.nx-meter { height: 8px; border-radius: 999px; background: #EEF2F7; overflow: hidden; display: flex; }
.nx-meter > span { display: block; height: 100%; }

.nx-feed { list-style: none; margin: 0; padding: 0; }
.nx-feed li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; border-bottom: 1px solid #EEF2F7; font-size: 13px;
}
.nx-feed li:last-child { border-bottom: none; }
.nx-feed-side {
  flex: none; width: 42px; text-align: center; border-radius: 7px;
  padding: 3px 0; font-size: 10.5px; font-weight: 680; letter-spacing: 0.04em;
}
.nx-feed-main { flex: 1 1 auto; min-width: 0; }
.nx-feed-when { flex: none; color: var(--nx-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }

a.nx-link { color: var(--nx-brand-dark); text-decoration: none; font-weight: 560; }
a.nx-link:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .nx-page { padding: 20px 16px 48px; }
  .nx-page-head h1 { font-size: 22px; }
}