/* Mohun rewards console — self-hosted, dependency-free UI. */
:root {
  color-scheme: light;
  --navy: #142b3d;
  --navy-dark: #102333;
  --navy-muted: #98abb9;
  --bg: #f3f6f8;
  --surface: #fff;
  --text: #233746;
  --muted: #7b8995;
  --line: #e5ebef;
  --accent: #108b81;
  --accent-dark: #08746c;
  --accent-soft: #e7f5f2;
  --gold: #c0913b;
  --gold-soft: #fff7e5;
  --danger: #c84949;
  --radius: 12px;
  --shadow: 0 3px 16px rgba(25, 48, 68, .035);
}
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; color: var(--text); font: 14px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled, input:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid rgba(16,139,129,.32); outline-offset: 3px; }
svg { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.4; }
h2 { font-size: 17px; font-weight: 650; }
h3 { font-size: 15px; }
hr { height: 1px; border: 0; background: var(--line); margin: 24px 0; }
[hidden] { display: none !important; }
.app-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 33px 20px 22px; color: #fff; background: var(--navy); }
.brand { display: flex; align-items: center; gap: 12px; min-height: 50px; color: #fff; margin: 0 8px 40px; }
.brand:hover { color: #fff; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid rgba(140,221,206,.26); border-radius: 12px; color: #86d6c3; background: rgba(115,199,185,.09); }
.brand-mark svg { width: 23px; height: 23px; }
.brand strong { display: block; font-size: 19px; font-weight: 650; letter-spacing: .08em; }
.brand small { display: block; color: var(--navy-muted); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.sidebar nav { display: flex; flex-direction: column; gap: 8px; }
.nav-link { display: flex; align-items: center; gap: 13px; position: relative; padding: 13px 17px; border: 1px solid transparent; border-radius: 8px; color: #aebfcb; font-size: 14px; transition: background .15s, color .15s; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.045); }
.nav-link.active { color: #b7e8dd; background: #214640; border-color: rgba(142,217,193,.12); font-weight: 600; }
.nav-link.active::before { content: ""; position: absolute; left: -20px; width: 3px; height: 22px; background: #81cbb7; border-radius: 0 3px 3px 0; }
.nav-label { margin: 20px 17px 10px; color: #718c9e; font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.sidebar-note { margin: auto 8px 0; padding-top: 30px; color: #91a6b5; font-size: 11px; line-height: 1.9; }
.sidebar-note strong { display: block; color: #b3c5d1; font-size: 12px; font-weight: 500; margin-bottom: 7px; }
.sidebar-note svg { width: 14px; height: 14px; margin-right: 6px; }
.main { min-width: 0; padding: 0 40px 24px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 87px; border-bottom: 1px solid var(--line); margin-bottom: 34px; font-size: 12px; }
.topbar > div { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topbar .button { min-height: 32px; padding: 5px 12px; font-size: 12px; }
.topbar form { margin: 0; }
.breadcrumb { color: #98a3ad; }
.breadcrumb span:last-child { color: #536574; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; width: fit-content; color: #6f8190; background: #edf1f4; padding: 5px 10px; border-radius: 20px; font-size: 11px; white-space: nowrap; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-pill.ok { color: #43866f; background: #eaf4ee; }
.status-pill.warn { color: #aa7b2b; background: #fff4db; }
.page-title { margin: 0 0 7px; color: #203747; font-size: 27px; font-weight: 650; letter-spacing: .015em; }
.muted { color: var(--muted); }
.hero-line { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.hero-line p { margin: 0; font-size: 12px; }
.hero-line > .muted { font-size: 11px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 28px; }
.stat-card { display: flex; justify-content: space-between; gap: 12px; position: relative; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.stat-label { display: block; color: #7b8a96; font-size: 12px; margin-bottom: 12px; }
.stat-value { display: block; color: #263f4e; font-size: 30px; font-weight: 650; line-height: 1.1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-value small { color: #96a1a9; font-size: 12px; font-weight: 400; margin-left: 5px; letter-spacing: 0; }
.stat-card > svg, .stat-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; padding: 9px; color: #5b8f9d; background: #edf4f6; }
.stat-card.gold .stat-value, .stat-value.gold { color: #b28635; }
.stat-card.gold > svg, .stat-card.gold .stat-icon { color: #b58a34; background: var(--gold-soft); }
.stat-card.green > svg, .stat-card.green .stat-icon { color: #398c79; background: var(--accent-soft); }
.stat-card small.muted { display: block; margin-top: 10px; font-size: 10px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr); gap: 24px; align-items: start; }
.content-grid > * { min-width: 0; }
.card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); margin-bottom: 24px; }
.card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 21px 25px; border-bottom: 1px solid #edf1f3; }
.card-header h2, .card-header h3, .card-header p { margin: 0; }
.card-header h2 { display: flex; align-items: center; gap: 9px; }
.card-header h2 > svg { width: 18px; height: 18px; color: #587787; }
.card-header .muted { font-size: 11px; }
.card-body { padding: 25px; }
.card-body > :last-child { margin-bottom: 0; }
.field { margin-bottom: 21px; }
.field > label, label.field-label { display: block; margin-bottom: 8px; color: #4b606d; font-size: 12px; font-weight: 600; }
.field .hint, .field > small { display: block; margin-top: 7px; color: #8b98a2; font-size: 11px; }
.input, .select, .textarea { width: 100%; min-width: 0; color: #29414f; background: #fff; border: 1px solid #dbe4e9; border-radius: 7px; padding: 11px 13px; line-height: 1.5; outline: none; transition: border-color .15s, box-shadow .15s; }
.input::placeholder, .textarea::placeholder { color: #a6afb6; font-size: 12px; opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: #b5c6cf; }
.input:focus, .select:focus, .textarea:focus { border-color: #53a69c; box-shadow: 0 0 0 3px rgba(16,139,129,.09); }
.input:disabled, .select:disabled, .textarea:disabled { color: #94a0a9; background: #f5f7f9; }
.textarea { min-height: 90px; resize: vertical; }
.select { padding-right: 30px; }
.required { color: var(--danger); margin-left: 3px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; padding: 10px 18px; border: 1px solid transparent; border-radius: 7px; color: #fff; background: var(--accent); font-size: 13px; font-weight: 600; line-height: 1.5; text-align: center; transition: background .15s, border-color .15s, box-shadow .15s; white-space: nowrap; }
.button:hover { color: #fff; background: var(--accent-dark); box-shadow: 0 3px 7px rgba(16,139,129,.12); }
.button svg { width: 17px; height: 17px; }
.button.secondary { color: #687d8a; background: #fff; border-color: #dce5ea; }
.button.secondary:hover { color: #294c5c; background: #f5f8fa; border-color: #bccdd6; box-shadow: none; }
.button.danger { color: #bd4949; background: #fff; border-color: #efcdcd; }
.button.danger:hover { background: #fff3f3; border-color: #e4aaaa; box-shadow: none; }
.button:disabled { opacity: .5; box-shadow: none; }
.button.full, [data-reward-form] .button[type="submit"] { width: 100%; }
.search-row { display: flex; align-items: start; gap: 10px; }
.search-row .input { flex: 1; }
.search-row .button { flex-shrink: 0; }
.search-row .field { flex: 1; min-width: 0; margin: 0; }
.alert { padding: 13px 16px; border: 1px solid #d7e5f0; border-radius: 8px; margin-bottom: 22px; color: #46677c; background: #f2f8fc; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.alert.success { color: #357762; background: #eff8f2; border-color: #cee8d8; }
.alert.error { color: #ae4545; background: #fff3f3; border-color: #f0d4d4; }
.alert.warning { color: #95722e; background: #fff9eb; border-color: #f0e2bf; }
.alert p { margin: 0; }
.table-wrap { width: 100%; overflow: auto; overscroll-behavior-x: contain; }
.table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; white-space: nowrap; }
.table th { color: #8a97a1; background: #fafbfd; padding: 13px 24px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 500; }
.table td { color: #546a78; padding: 16px 24px; border-bottom: 1px solid #edf1f4; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fcfdfd; }
.table td strong { color: #354f60; font-weight: 600; }
.table .amount { color: #ad8231; font-weight: 650; font-variant-numeric: tabular-nums; }
.table .wrap { white-space: normal; min-width: 150px; max-width: 360px; overflow-wrap: anywhere; }
.empty-state { padding: 47px 22px; color: #94a0aa; text-align: center; font-size: 12px; }
.empty-state > svg, .empty-icon { display: block; width: 40px; height: 40px; padding: 8px; margin: 0 auto 14px; border-radius: 10px; color: #9aafbb; background: #f0f5f7; }
.empty-state strong { display: block; margin-bottom: 6px; color: #607684; font-size: 13px; font-weight: 500; }
.empty-state p { margin: 0; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 24px; border-top: 1px solid var(--line); color: #92a0aa; font-size: 11px; }
.pagination nav, .pagination > div { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.pagination .button { min-height: 30px; padding: 5px 11px; font-size: 11px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 5px; color: #4c8973; background: #edf6f0; font-size: 10px; font-weight: 500; white-space: nowrap; }
.badge.warning { color: #a57d32; background: #fff6e4; }
.badge.error { color: #b95353; background: #fceeee; }
.badge.neutral { color: #7a8c98; background: #eef3f6; }
.reward-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 18px; margin: 0 0 23px; border: 1px solid #f1e7cc; border-radius: 8px; color: #957838; background: #fffbf2; font-size: 12px; }
.reward-summary strong { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.reward-summary svg { width: 18px; height: 18px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.detail-grid dt { margin-bottom: 5px; color: #94a0a9; font-size: 11px; }
.detail-grid dd { margin: 0; color: #475f6e; font-size: 13px; overflow-wrap: anywhere; }
.account-result { margin-top: 23px; padding: 20px; border: 1px solid #dfeee8; border-radius: 9px; background: #f8fcfa; }
.account-result h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 17px; color: #355e51; }
.account-result .detail-grid { margin: 0; }
.account-result .button { margin-top: 19px; min-height: 36px; font-size: 12px; }
.account-avatar { display: grid; place-items: center; width: 36px; height: 36px; color: #4d907f; background: #e6f2ed; border-radius: 9px; }
.amount-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.amount-chip { min-width: 57px; border: 1px solid #e3e9ed; border-radius: 5px; padding: 5px 10px; color: #7e8d97; background: #fafbfd; font-size: 11px; line-height: 1.5; }
.amount-chip:hover, .amount-chip[aria-pressed="true"] { color: var(--accent); border-color: #8dc5bd; background: #f0f8f5; }
.tabs { display: flex; align-items: center; gap: 24px; min-height: 53px; padding: 0 24px; border-bottom: 1px solid var(--line); }
.tabs a, .tab { display: inline-flex; align-items: center; gap: 7px; position: relative; padding: 16px 0; color: #8b98a2; font-size: 12px; white-space: nowrap; }
.tabs a.active, .tab.active { color: var(--accent); font-weight: 600; }
.tabs a.active::after, .tab.active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--accent); }
.filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; padding: 21px 24px; }
.filters .field { flex: 1; min-width: 160px; margin: 0; }
.filters .input, .filters .select { min-height: 40px; }
.filter-note { padding: 0 24px 17px; color: #95a0a8; font-size: 11px; }
.demo-banner { padding: 10px 16px; color: #967738; background: #fff8e6; border: 1px solid #eedda9; border-radius: 7px; margin-bottom: 24px; font-size: 12px; }
.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding-top: 19px; border-top: 1px solid var(--line); color: #a1abb2; font-size: 10px; letter-spacing: .02em; }
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 34px 20px; background: radial-gradient(ellipse at 50% 15%, #edf4f3, transparent 60%), #f1f5f7; }
.login-card { width: 100%; max-width: 420px; padding: 36px; border: 1px solid #e0e9eb; border-radius: 15px; background: #fff; box-shadow: 0 12px 50px rgba(24,57,76,.07); }
.login-card .brand { justify-content: center; margin: 0 0 30px; color: var(--text); }
.login-card .brand-mark { color: #4d927e; border-color: #d6e8e1; background: #eff7f3; }
.login-card .brand strong { color: #2b4554; font-size: 20px; }
.login-card .brand small { color: #98a8b0; }
.login-card h1 { margin-bottom: 8px; font-size: 22px; text-align: center; }
.login-card > .muted { margin-bottom: 30px; font-size: 12px; text-align: center; }
.login-card .button[type="submit"] { width: 100%; margin-top: 3px; }
.login-card .footer { display: block; margin-top: 25px; text-align: center; line-height: 1.9; }
/* Bind the shared visual language to the production PHP markup. */
.page-content { width: 100%; max-width: 1440px; margin: 0 auto; }
.topbar-actions { justify-content: flex-end; min-width: 0; }
.topbar-actions > span:not(.status-pill) { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { display: none; }
.sidebar .brand > span:last-child { font-size: 23px; font-weight: 600; line-height: 1.5; letter-spacing: .08em; }
.sidebar .brand > span:last-child > .muted { display: block; color: #a0b5c3; font-size: 10px; font-weight: 400; letter-spacing: .08em; }
.sidebar-label { margin: 0 17px 12px; color: #718c9e; font-size: 10px; letter-spacing: .15em; }
.eyebrow { margin-bottom: 8px !important; color: #789991; font-size: 10px !important; font-weight: 650; letter-spacing: .14em; }
.step-number { display: inline-grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; color: #669185; background: #eef6f3; border-radius: 6px; font-size: 10px; font-weight: 650; letter-spacing: .02em; }
.stats-grid > .stat-card { flex-direction: column; gap: 0; }
.stats-grid > .stat-card > .muted { margin-top: 13px; font-size: 10px; }
label.field { display: block; color: #4b606d; font-size: 12px; font-weight: 500; }
label.field > .input, label.field > .textarea { display: block; margin-top: 8px; font-size: 13px; font-weight: 400; }
.account-heading { display: flex; align-items: center; gap: 11px; padding-bottom: 18px; border-bottom: 1px solid #e3eee8; }
.account-heading > div { min-width: 0; }
.account-heading strong { display: block; overflow-wrap: anywhere; font-size: 14px; font-weight: 650; }
.account-heading p { margin: 2px 0 0; font-size: 10px; }
.account-heading .badge { margin-left: auto; flex-shrink: 0; }
.avatar { display: grid; place-items: center; width: 37px; height: 37px; flex: 0 0 37px; color: #5f9481; background: #e5f2eb; border: 1px solid #d8e9df; border-radius: 10px; font-size: 17px; font-weight: 500; text-transform: uppercase; }
.account-result .detail-grid { padding-top: 18px; }
.detail-grid > div > .muted { display: block; margin-bottom: 5px; font-size: 11px; }
.detail-grid > div > strong { display: block; color: #496170; font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gold, .detail-grid > div > strong.gold { color: var(--gold); }
.input-suffix { position: relative; margin-top: 8px; }
.input-suffix .input { padding-right: 58px; font-size: 14px; font-weight: 400; }
.input-suffix > span { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #97a4ac; font-size: 11px; font-weight: 400; pointer-events: none; }
[data-reward-form] > .amount-options { margin: -10px 0 22px; }
[data-reward-form] > p.muted { margin: -3px 0 20px; font-size: 11px; line-height: 1.8; }
.amount-chip:disabled { opacity: .5; color: #94a0aa; border-color: #e3e9ed; background: #fafbfd; }
.button.full-width { width: 100%; }
.button.small { min-height: 32px; padding: 5px 12px; font-size: 11px; }
.request-id { margin: 12px 0 0; color: #a0abb3; font-size: 10px; line-height: 1.7; text-align: center; overflow-wrap: anywhere; }
.card-body > .reward-summary { align-items: flex-start; flex-direction: column; gap: 5px; margin: 24px 0 0; padding: 16px; }
.card-body > .reward-summary > strong { font-size: 12px; font-weight: 600; }
.card-body > .reward-summary > p { margin: 0; color: #aa9360; font-size: 11px; line-height: 1.8; }
.card-header > div > p { margin-top: 5px; font-size: 11px; }
.history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 25px; border-bottom: 1px solid var(--line); }
.history-toolbar .tabs { flex-shrink: 0; padding: 0; border-bottom: 0; }
.history-toolbar .search-row { width: 100%; max-width: 385px; min-width: 0; padding: 13px 0; align-items: center; }
.history-toolbar .input { min-height: 36px; padding: 8px 11px; font-size: 12px; }
.history-toolbar .button { min-height: 36px; padding: 8px 13px; font-size: 11px; }
.tab { font-weight: 500; }
.text-link { font-size: 12px; white-space: nowrap; }
.table .text-link { font-weight: 500; }
.table td > small.muted { display: block; margin-top: 3px; font-size: 10px; }
.table .gold { color: var(--gold); font-weight: 650; font-variant-numeric: tabular-nums; }
.reason-cell { min-width: 150px; max-width: 320px; white-space: normal; overflow-wrap: anywhere; line-height: 1.7; }
.alert ul { padding-left: 19px; margin: 6px 0 0; }
.login-card > .brand-mark { width: 46px; height: 46px; margin: 0 auto 14px; }
.login-card > .brand-mark + .muted { margin-bottom: 12px; color: #7f9d94; font-size: 9px; letter-spacing: .17em; }
.login-card > h1 + .muted { margin-bottom: 28px; }
.login-card .field { margin-bottom: 20px; }
.login-card .button[type="submit"] { min-height: 44px; margin-top: 4px; }
.login-card .footer svg { width: 13px; height: 13px; margin-right: 4px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
@media (min-width: 1600px) { .main { padding-left: 56px; padding-right: 56px; } .content-grid { grid-template-columns: minmax(0, 1.4fr) minmax(370px, .9fr); } }
@media (max-width: 1180px) { .app-shell { grid-template-columns: 212px minmax(0, 1fr); } .sidebar { padding-left: 15px; padding-right: 15px; } .nav-link.active::before { left: -15px; } .brand { gap: 9px; } .brand strong { font-size: 17px; } .main { padding-left: 25px; padding-right: 25px; } .content-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .stats-grid { gap: 14px; } .stat-card { padding: 20px; } .stat-value { font-size: 26px; } }
@media (max-width: 760px) { .app-shell { grid-template-columns: minmax(0, 1fr); } .sidebar { position: static; height: auto; padding: 18px 20px 0; } .brand { margin: 0 0 18px; min-height: 40px; } .brand-mark { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; } .brand strong { font-size: 17px; } .brand small { font-size: 9px; } .sidebar nav { flex-direction: row; gap: 6px; overflow-x: auto; } .nav-link { flex-shrink: 0; padding: 12px 16px; border-radius: 7px 7px 0 0; font-size: 12px; } .nav-link.active::before, .sidebar-note, .nav-label { display: none; } .nav-link svg { width: 16px; height: 16px; } .main { padding: 0 20px 20px; } .topbar { min-height: 65px; margin-bottom: 25px; font-size: 11px; gap: 10px; } .topbar > div { gap: 9px; } .topbar .breadcrumb { display: none; } .hero-line { align-items: flex-start; margin-bottom: 22px; } .hero-line > .muted { display: none; } .page-title { font-size: 23px; } .stats-grid { gap: 10px; margin-bottom: 22px; } .stat-card { padding: 15px 13px; } .stat-label { font-size: 10px; margin-bottom: 10px; } .stat-value { font-size: 22px; } .stat-value small { font-size: 9px; margin-left: 2px; } .stat-card > svg, .stat-icon { display: none; } .stat-card small.muted { font-size: 9px; } .card { margin-bottom: 20px; } .card-header { padding: 18px 20px; } .card-body { padding: 20px; } .card-header h2 { font-size: 15px; } .table th, .table td { padding-left: 20px; padding-right: 20px; } .pagination { padding: 15px 20px; } .tabs { gap: 20px; padding: 0 20px; overflow-x: auto; } .filters { padding: 20px; } .filters .field { min-width: 130px; } .filter-note { padding-left: 20px; padding-right: 20px; } .footer { margin-top: 22px; } }
@media (max-width: 440px) { .main { padding-left: 14px; padding-right: 14px; } .sidebar { padding-left: 14px; padding-right: 14px; } .stats-grid { gap: 8px; } .stat-card { padding: 14px 10px; } .stat-value { font-size: 20px; } .stat-value small { display: block; margin: 7px 0 0; } .stat-card small.muted { display: none; } .topbar { font-size: 10px; } .status-pill { padding: 4px 8px; font-size: 10px; } .card-header, .card-body { padding: 18px; } .search-row { gap: 8px; } .search-row .button { padding-left: 12px; padding-right: 12px; } .detail-grid { gap: 15px 12px; } .account-result { padding: 16px; } .login-card { padding: 28px 24px; } .pagination { align-items: flex-start; flex-direction: column; } }
@media (max-width: 1000px) { .history-toolbar { flex-wrap: wrap; gap: 0; } .history-toolbar .tabs { width: 100%; } .history-toolbar .search-row { max-width: none; border-top: 1px solid var(--line); } }
@media (max-width: 760px) { .sidebar-label { display: none; } .sidebar .brand > span:last-child { font-size: 19px; } .sidebar .brand > span:last-child > .muted { font-size: 9px; } .topbar > .muted { max-width: 95px; line-height: 1.6; } .topbar-actions { column-gap: 8px; row-gap: 6px; } .topbar-actions > span:not(.status-pill) { max-width: 80px; } .stats-grid > .stat-card > .muted { font-size: 9px; line-height: 1.6; } .history-toolbar { padding-left: 20px; padding-right: 20px; } .history-toolbar .tabs { min-height: 48px; } .history-toolbar .tab { padding-top: 14px; padding-bottom: 14px; } .account-heading .badge { padding: 3px 6px; font-size: 9px; } .history-toolbar .search-row > .text-link { font-size: 11px; } }
@media (max-width: 440px) { .topbar { flex-wrap: wrap; align-content: center; padding: 12px 0; gap: 8px; } .topbar > .muted { max-width: none; width: 100%; font-size: 10px; } .topbar-actions { width: 100%; justify-content: space-between; } .topbar-actions > span:not(.status-pill) { max-width: 130px; margin-left: auto; } .stats-grid > .stat-card > .muted { display: none; } .stat-label { font-size: 10px; } .stat-value { font-size: 19px; } .account-heading { gap: 8px; } .account-heading strong { font-size: 12px; } .avatar { width: 32px; height: 32px; flex-basis: 32px; font-size: 15px; } .account-heading .badge { font-size: 8px; } .history-toolbar { padding-left: 18px; padding-right: 18px; } .history-toolbar .search-row { gap: 7px; } .history-toolbar .button { padding-left: 10px; padding-right: 10px; } .hero-line .badge { font-size: 9px; margin-top: 2px; } .hero-line { gap: 10px; } .page-title { font-size: 22px; } .login-card { max-width: 360px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media print { .sidebar, .topbar, .button, .amount-options, .filters { display: none !important; } .app-shell { display: block; } .main { padding: 0; } .card, .stat-card { box-shadow: none; break-inside: avoid; } body, html { background: #fff; } }