.cabinet-heading, .history-heading, .compare-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.cabinet .hidden, .history-dialog .hidden { display:none !important; }
.cabinet-heading { margin-bottom:28px; }
.cabinet .cabinet-heading h1 { margin:6px 0 10px; }
.cabinet-heading .lead { margin:0; overflow-wrap:anywhere; }
.cabinet-eyebrow { display:block; margin:0; color:var(--sepia, var(--muted)); font-size:12px; letter-spacing:.09em; text-transform:uppercase; }
.cabinet .secondary-btn, .history-dialog .secondary-btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; border:1px solid var(--border); border-radius:999px; color:var(--text); background:var(--surface); font:inherit; font-size:14px; text-decoration:none; cursor:pointer; white-space:nowrap; }
.cabinet .secondary-btn:hover, .history-dialog .secondary-btn:hover { border-color:var(--sepia, var(--accent)); }
.cabinet button:focus-visible, .history-dialog button:focus-visible, .history-dialog a:focus-visible { outline:2px solid var(--sepia, var(--accent)); outline-offset:4px; }
.cabinet .balance-card { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px; }
.cabinet .balance-card .value { margin:4px 0 0; }
.cabinet .account-links { display:flex; flex-wrap:wrap; gap:12px 20px; }
.cabinet #customerHistory { margin:36px 0 48px; }
.cabinet .history-heading h2 { margin:0 0 6px; }
.history-heading p { margin:0; font-size:14px; }
.history-note { color:var(--muted); font-size:13px; line-height:1.6; }
#historyStatus:not(:empty) { padding:24px 0; color:var(--muted); }
.history-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:20px 0; }
.cabinet button.history-card { min-width:0; padding:0; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); text-align:left; cursor:pointer; overflow:hidden; font:inherit; transition:border-color .15s; }
.cabinet button.history-card:hover { border-color:var(--sepia, var(--accent)); }
.history-photo { position:relative; aspect-ratio:4/3; background:#111214; }
.history-photo img { width:100%; height:100%; object-fit:contain; display:block; color:var(--muted); font-size:13px; }
.history-badge { position:absolute; bottom:10px; left:10px; border:1px solid #ffffff26; border-radius:999px; padding:3px 10px; background:#101114d9; color:#fff; font-size:11px; }
.history-caption { padding:16px; }
.history-caption strong, .history-caption span { display:block; }
.history-caption strong { font-size:14px; font-weight:600; }
.history-caption span { color:var(--muted); font-size:12px; margin-top:5px; }
#topup { scroll-margin-top:150px; }
.history-dialog { width:min(1100px,calc(100% - 24px)); max-height:92dvh; padding:24px; border:1px solid var(--border); border-radius:18px; background:var(--bg); color:var(--text); overflow:auto; }
.history-dialog::backdrop { background:#000b; backdrop-filter:blur(5px); }
.compare-heading { align-items:flex-start; margin-bottom:16px; }
.cabinet .compare-heading h2 { margin:0; font-size:23px; }
.compare-heading p { margin:5px 0 0; font-size:13px; }
.compare-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.compare-toolbar span { font-size:12px; margin-left:6px; }
.history-dialog button[aria-pressed="true"] { border-color:var(--sepia, var(--accent)); color:var(--sepia, var(--accent)); }
.compare-viewport { max-height:55dvh; overflow:auto; background:#111214; border:1px solid var(--border); border-radius:10px; overscroll-behavior:contain; }
.compare-stage { --split:50%; position:relative; width:min(100%,var(--fit-width)); aspect-ratio:var(--ratio); margin:auto; touch-action:pan-y; user-select:none; cursor:ew-resize; }
.compare-stage.actual { width:var(--image-width); max-width:none; margin:0; cursor:default; }
.compare-stage img { display:block; width:100%; height:100%; object-fit:fill; }
#compareBefore { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--split)) 0 0); }
.compare-divider { position:absolute; top:0; bottom:0; left:var(--split); width:2px; transform:translateX(-1px); background:#fff; pointer-events:none; box-shadow:0 0 4px #0008; }
.compare-divider::after { content:'↔'; display:grid; place-items:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:36px; height:36px; border-radius:50%; background:#fff; color:#222; font-size:22px; box-shadow:0 2px 8px #0005; }
.compare-label { position:absolute; top:12px; padding:4px 10px; border-radius:6px; background:#0009; color:#fff; font-size:12px; pointer-events:none; }
.compare-label.before { left:12px; }
.compare-label.after { right:12px; }
.before-only .compare-divider, .before-only .compare-label.after { display:none; }
.before-only #compareBefore { clip-path:none; }
.compare-slider { display:flex; align-items:center; gap:14px; font-size:13px; margin:18px 0; }
.compare-slider input { flex:1; width:100%; min-width:0; accent-color:var(--sepia, var(--accent)); }
.compare-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; }
@media(max-width:720px) {
  .cabinet-heading { flex-direction:column; align-items:flex-start; gap:16px; }
  .history-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .cabinet .balance-card { align-items:flex-start; flex-direction:column; }
  .history-heading { align-items:flex-start; gap:10px; }
  .history-heading h2 { font-size:25px; }
  .history-caption { padding:12px; }
  .history-dialog { padding:16px; }
  .compare-heading h2 { font-size:20px; }
  .compare-heading { gap:10px; }
  .compare-heading button { padding:8px 12px; }
  .compare-toolbar span { flex-basis:100%; margin:0; }
}
@media(prefers-reduced-motion:reduce) { .cabinet button.history-card { transition:none; } }