/* Trading Journal — dark theme. Plain CSS port of the original Tailwind design. */

:root {
  color-scheme: dark;

  --bg: #0a0c10;
  --surface: #11141a;
  --raised: #171b23;
  --line: #232834;
  --ink: #e7e9ee;
  --muted: #8a92a6;
  --faint: #5b6274;
  --accent: #5b8cff;
  --accent-hover: #7aa2ff;
  /* Profit/loss pair validated for colorblind separation on the dark surface (deutan ΔE 9.1). */
  --profit: #16a394;
  --loss: #f0566a;
  --warn: #e8b44c;

  --accent-rgb: 91 140 255;
  --profit-rgb: 22 163 148;
  --loss-rgb: 240 86 106;
  --warn-rgb: 232 180 76;

  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; line-height: 1.5; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p { margin: 0; font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
img, svg { display: block; }
table { border-collapse: collapse; text-indent: 0; }
th { font-weight: inherit; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

/* Keep native date-picker icons visible on the dark background. */
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* ---------- Utilities ---------- */

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.strong { font-weight: 600; }
.strong-medium { font-weight: 500; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-muted { color: var(--muted); }
.text-faint { color: var(--faint); }
.text-profit { color: var(--profit); }
.text-loss { color: var(--loss); }
.uppercase { text-transform: uppercase; }
.uppercase::placeholder { text-transform: none; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.clip { overflow: hidden; }
.justify-end { display: flex; justify-content: flex-end; }
.max-w-xs { max-width: 20rem; }
.narrow { max-width: 42rem; margin: 0 auto; }

/* Flex gaps (not sibling margins), so hidden inputs and hidden alerts take no space. */
.stack-4, .stack-5, .stack-6 { display: flex; flex-direction: column; }
.stack-4 { gap: 1rem; }
.stack-5 { gap: 1.25rem; }
.stack-6 { gap: 1.5rem; }

.grid { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-sm-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .span-sm-2 { grid-column: span 2 / span 2; }
}

/* ---------- Icons ---------- */

.icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.icon-sm { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.icon-lg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.icon-xl { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }

/* ---------- Components ---------- */

.card {
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: var(--surface);
}
.pad-6 { padding: 1.5rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition: color .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease), opacity .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:disabled { cursor: not-allowed; opacity: 0.6; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.5); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover:not(:disabled) { background: var(--raised); }
.btn-danger { background: var(--loss); color: #fff; }
.btn-danger:hover:not(:disabled) { background: rgb(var(--loss-rgb) / 0.9); }
.btn-block { width: 100%; }
.btn-compact { padding-top: 0.375rem; padding-bottom: 0.375rem; }

.field {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--ink);
  outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field::placeholder { color: var(--faint); opacity: 1; }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.25); }
.field[aria-invalid="true"] { border-color: rgb(var(--loss-rgb) / 0.7); }
.field-inline { width: auto; padding-top: 0.375rem; padding-bottom: 0.375rem; }
.textarea { resize: vertical; }

.label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: var(--muted);
}
.field-error { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--loss); }
.hint { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--faint); }

.alert {
  border-radius: 0.5rem;
  border: 1px solid;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.alert-error { border-color: rgb(var(--loss-rgb) / 0.3); background: rgb(var(--loss-rgb) / 0.1); color: var(--loss); }
.alert-success { border-color: rgb(var(--profit-rgb) / 0.3); background: rgb(var(--profit-rgb) / 0.1); color: var(--profit); }

.page-header {
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.page-title { font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; }
.page-subtitle { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }

.avatar { flex-shrink: 0; border-radius: 9999px; }
.avatar-sm { width: 2rem; height: 2rem; font-size: 0.75rem; line-height: 1rem; }
.avatar-lg { width: 5rem; height: 5rem; font-size: 1.5rem; line-height: 2rem; }
.avatar-photo { border: 1px solid var(--line); object-fit: cover; }
.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--accent-rgb) / 0.2);
  color: var(--accent);
  font-weight: 600;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}
.badge-dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: currentColor; }
.badge-accent { background: rgb(var(--accent-rgb) / 0.1); color: var(--accent); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.25); }
.badge-profit { background: rgb(var(--profit-rgb) / 0.1); color: var(--profit); box-shadow: inset 0 0 0 1px rgb(var(--profit-rgb) / 0.25); }
.badge-loss { background: rgb(var(--loss-rgb) / 0.1); color: var(--loss); box-shadow: inset 0 0 0 1px rgb(var(--loss-rgb) / 0.25); }
.badge-warn { background: rgb(var(--warn-rgb) / 0.1); color: var(--warn); box-shadow: inset 0 0 0 1px rgb(var(--warn-rgb) / 0.25); }

/* ---------- App shell ---------- */

.app { min-height: 100vh; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: rgb(10 12 16 / 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.topbar-inner {
  margin: 0 auto;
  display: flex;
  height: 4rem;
  max-width: 80rem;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
}
.brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.brand-mark {
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: rgb(var(--accent-rgb) / 0.15);
  color: var(--accent);
}
.brand-mark-lg { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; margin-bottom: 1rem; }
.brand-name { display: none; }

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a {
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--muted);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { background: var(--raised); color: var(--ink); }

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; }
.topbar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--muted);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.topbar-link:hover { background: var(--raised); color: var(--ink); }
.topbar-label { display: none; }

.page { margin: 0 auto; max-width: 80rem; padding: 2rem 1rem; }

@media (min-width: 640px) {
  .topbar-inner { gap: 2rem; padding: 0 1.5rem; }
  .brand-name { display: inline; }
  .topbar-actions { gap: 0.5rem; }
  .page { padding: 2rem 1.5rem; }
}
@media (min-width: 768px) {
  .topbar-label { display: inline; }
}

/* ---------- Login ---------- */

.auth {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}
.auth-box { width: 100%; max-width: 24rem; }
.auth-head { margin-bottom: 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.auth-title { font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; }

/* ---------- Dashboard ---------- */

.range-row { margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.segmented {
  display: inline-flex;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0.25rem;
}
.segmented button {
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--muted);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--raised); color: var(--ink); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.segmented button:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.5); }

.custom-range { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.custom-range label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }

.range-label { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
@media (min-width: 640px) { .range-label { margin-left: auto; } }

.range-content { transition: opacity .2s var(--ease); }
.range-content[aria-busy="true"] { opacity: 0.5; }

.stats-grid { gap: 1rem; }
@media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.stat { padding: 1.25rem; min-width: 0; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.stat-label { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.stat-icon { display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 0.5rem; }
.tone-neutral { background: rgb(var(--accent-rgb) / 0.15); color: var(--accent); }
.tone-profit { background: rgb(var(--profit-rgb) / 0.15); color: var(--profit); }
.tone-loss { background: rgb(var(--loss-rgb) / 0.15); color: var(--loss); }
.stat-value {
  margin-top: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
}
.tone-text-neutral { color: var(--ink); }
.tone-text-profit { color: var(--profit); }
.tone-text-loss { color: var(--loss); }
.stat-hint { margin-top: 0.25rem; height: 1rem; font-size: 0.75rem; line-height: 1rem; color: var(--faint); }

.charts-grid { margin-top: 1.5rem; }
@media (min-width: 1024px) {
  .charts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chart-wide { grid-column: span 2 / span 2; }
}

.chart-card { display: flex; flex-direction: column; padding: 1.25rem; min-width: 0; }
.chart-head { margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.chart-tools { display: flex; align-items: center; gap: 1rem; }
.legend { display: flex; align-items: center; gap: 1rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 0.375rem; }
.swatch { width: 0.625rem; height: 0.625rem; border-radius: 0.125rem; flex-shrink: 0; }
.swatch-profit { background: var(--profit); }
.swatch-loss { background: var(--loss); }
.chip-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.chip-btn:hover { background: var(--raised); color: var(--ink); }
.chart-empty {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px dashed var(--line);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--muted);
  min-height: 260px;
}

.plot { position: relative; height: 260px; }
.plot svg { overflow: visible; }
.plot text { font-family: var(--font-sans); font-size: 11px; fill: var(--faint); font-variant-numeric: tabular-nums; }
.plot .gridline { stroke: var(--line); }
.plot .gridline-zero { stroke: rgb(91 98 116 / 0.6); }
.plot .bar-profit { fill: var(--profit); }
.plot .bar-loss { fill: var(--loss); }
.plot .band-hover { fill: rgb(231 233 238 / 0.04); }
.plot .hit { fill: transparent; outline: none; }

.tooltip {
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 10;
  width: 12rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: var(--raised);
  padding: 0.625rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
}
.tooltip-title { margin-bottom: 0.5rem; font-weight: 500; color: var(--muted); }
.tooltip-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.125rem 0; }
.tooltip-row > span:first-child { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); }
.tooltip-row .val { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.tooltip-line { width: 0.75rem; height: 0.125rem; border-radius: 9999px; }
.tooltip-net { margin-top: 0.5rem; display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 0.5rem; }

.bucket-table { max-height: 260px; overflow: auto; border-radius: 0.5rem; border: 1px solid var(--line); }
.bucket-table table { width: 100%; font-size: 0.875rem; line-height: 1.25rem; font-variant-numeric: tabular-nums; }
.bucket-table thead { position: sticky; top: 0; background: var(--raised); }
.bucket-table th { padding: 0.5rem 0.75rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.025em; color: var(--faint); text-align: right; }
.bucket-table th:first-child { text-align: left; }
.bucket-table td { padding: 0.5rem 0.75rem; text-align: right; }
.bucket-table td:first-child { text-align: left; color: var(--muted); }
.bucket-table td:last-child { font-weight: 500; }
.bucket-table tbody tr + tr { border-top: 1px solid var(--line); }

.donut-body { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; }
.donut { position: relative; width: 184px; height: 184px; }
.donut path { outline: none; transition: opacity .15s var(--ease); }
.donut .dim { opacity: 0.4; }
.donut-center {
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.donut-center .caption { font-size: 0.75rem; line-height: 1rem; color: var(--muted); }
.donut-center .value { margin-top: 0.125rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.donut-center .empty-caption { padding: 0 2.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted); }
.donut-legend { width: 100%; font-size: 0.875rem; line-height: 1.25rem; }
.donut-legend > li + li { margin-top: 0.5rem; }
.donut-legend li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  transition: background-color .15s var(--ease);
}
.donut-legend li.is-active { background: var(--raised); }
.donut-legend .name { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); }
.donut-legend .amount { color: var(--ink); font-variant-numeric: tabular-nums; }
.donut-legend .pct { margin-left: 0.25rem; color: var(--faint); }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 1rem 1.25rem;
}
.link-accent { display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--accent); }
.link-accent:hover { color: var(--accent-hover); }

/* ---------- Trades table ---------- */

.empty { padding: 4rem 1.5rem; text-align: center; }
.empty-text { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }

.table-scroll { overflow-x: auto; }
.trades-table { width: 100%; font-size: 0.875rem; line-height: 1.25rem; }
.trades-table thead { border-bottom: 1px solid var(--line); background: rgb(23 27 35 / 0.4); }
.trades-table th {
  white-space: nowrap;
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--faint);
}
.trades-table td { white-space: nowrap; padding: 0.75rem 1rem; }
.trades-table .r { text-align: right; }
.trades-table td.n {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.trades-table td.sl { color: rgb(var(--loss-rgb) / 0.9); }
.trades-table td.tp { color: rgb(var(--profit-rgb) / 0.9); }
.trades-table tbody tr { transition: background-color .15s var(--ease); }
.trades-table tbody tr + tr { border-top: 1px solid var(--line); }
.trades-table tbody tr:hover { background: rgb(23 27 35 / 0.4); }
.trades-table td.reason { max-width: 18rem; white-space: normal; }
.trades-table td.reason p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.direction { font-size: 0.75rem; line-height: 1rem; }
.direction.is-long { color: rgb(var(--profit-rgb) / 0.8); }
.direction.is-short { color: rgb(var(--loss-rgb) / 0.8); }

.chip {
  border-radius: 0.375rem;
  background: var(--raised);
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted);
}

.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }
.icon-btn {
  border-radius: 0.375rem;
  padding: 0.375rem;
  color: var(--faint);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.icon-btn-edit:hover { background: rgb(var(--accent-rgb) / 0.1); color: var(--accent); }
.icon-btn-delete:hover { background: rgb(var(--loss-rgb) / 0.1); color: var(--loss); }
.icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.5); }

/* ---------- Pagination ---------- */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--line);
  padding: 0.75rem 1.25rem;
}
.pager-summary { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.pager-summary .num { color: var(--ink); }
.pager-controls { display: flex; align-items: center; gap: 0.25rem; }
.pager-pages { display: none; align-items: center; gap: 0.25rem; }
.pager-btn,
.pager-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 2rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--muted);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.pager-btn { padding: 0 0.625rem; }
.pager-page { min-width: 2rem; padding: 0 0.5rem; }
a.pager-btn:hover,
a.pager-page:hover { background: var(--raised); color: var(--ink); }
.pager-btn:focus-visible,
.pager-page:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.5); }
.pager-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.pager-page[aria-current="page"] { background: rgb(var(--accent-rgb) / 0.15); color: var(--accent); }
.pager-gap { min-width: 1.5rem; text-align: center; font-size: 0.875rem; color: var(--faint); }
.pager-compact { padding: 0 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
@media (min-width: 640px) {
  .pager-pages { display: flex; }
  .pager-compact { display: none; }
}

/* ---------- Trade filters ---------- */

.filters { margin-bottom: 1rem; display: grid; gap: 0.75rem; padding: 1rem; }
@media (min-width: 640px) { .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .filters { grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)) auto; } }
.search { position: relative; }
.search .field { padding-left: 2.25rem; }
.search-icon { pointer-events: none; position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--faint); }
.filters-actions { display: flex; align-items: flex-end; gap: 0.5rem; }
.filters-actions .btn-primary { flex: 1 1 0%; }
@media (min-width: 1024px) { .filters-actions .btn-primary { flex: none; } }

/* ---------- Modal ---------- */

.modal {
  width: calc(100% - 2rem);
  max-height: 90vh;
  overflow-y: auto;
  margin: auto;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 1.5rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
}
.modal:focus { outline: none; }
.modal::backdrop { background: rgb(0 0 0 / 0.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-sm { max-width: 24rem; }
.modal-md { max-width: 32rem; }
.modal-lg { max-width: 42rem; }
.modal-head { margin-bottom: 1.25rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.modal-title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.modal-desc { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.modal-close {
  border-radius: 0.375rem;
  padding: 0.25rem;
  color: var(--muted);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.modal-close:hover { background: var(--raised); color: var(--ink); }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.modal .alert + .modal-actions { margin-top: 1rem; }
.form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }

/* ---------- Account ---------- */

.section-title { margin-bottom: 1.25rem; font-weight: 600; }
.section-desc { margin: 0.25rem 0 1.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.photo-row { margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1.25rem; }
.photo-current { display: flex; }
.file-btn { cursor: pointer; }
.file-btn:focus-within { box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.5); }