:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --canvas: #09090e;
  --panel: #111116;
  --panel-raised: #17151e;
  --ink: #f1eff9;
  --muted: #aba5ba;
  --subtle: #92899f;
  --line: #292532;
  --purple: #a675ff;
  --purple-light: #ceb2ff;
  --purple-bright: #8742f6;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color: var(--ink);
  background: var(--canvas);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(ellipse 65% 36% at 78% 0%, #6226a71b, transparent 90%), var(--canvas);
}
button, select, input { font: inherit; }
button, a, select, input { -webkit-tap-highlight-color: transparent; outline-offset: 5px; }
button { cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s, transform .18s; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid #c6a4ff; }
button:active:not(:disabled) { transform: translateY(1px); }
a { color: inherit; }
p { line-height: 1.65; }
[hidden] { display: none !important; }
::selection { background: #773cbe; color: #fff; }
.topbar { border-bottom: 1px solid #ffffff0b; background: #0c0b11d9; }
.topbar-inner { max-width: 1416px; height: 88px; margin: auto; padding: 0 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #2d1b49, #17101f); border: 1px solid #7841a8; box-shadow: inset 0 1px 0 #ffffff15, 0 0 24px #963fff18; font-size: 29px; color: #d3b4ff; }
.brand strong { font-size: 22px; letter-spacing: -1px; font-weight: 600; }
.brand-slash { color: #6c586d; font-weight: 300; margin: 0 3px; }
.brand-usage { color: #aaa3b9; font-weight: 400; }
.topbar-end { display: flex; align-items: center; gap: 28px; }
.workspace-label { font: 12px var(--mono); letter-spacing: 1.4px; color: #a59aaf; }
.local-badge { font: 12px var(--mono); display: flex; gap: 9px; align-items: center; white-space: nowrap; color: #c7bed2; border-left: 1px solid #36303f; padding-left: 28px; }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: #b087ff; box-shadow: 0 0 9px #ab6aff80; }
main { max-width: 1416px; margin: auto; padding: 50px 56px 0; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 34px; }
.eyebrow { font: 12px var(--mono); letter-spacing: 1.7px; color: #b8a6cc; display: flex; align-items: center; gap: 11px; line-height: 1.6; }
.eyebrow-line { width: 22px; height: 1px; background: #a369fc; box-shadow: 0 0 8px #b785ff; }
h1 { font-size: clamp(42px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -2.8px; font-weight: 520; margin: 19px 0 18px; }
h1 span { background: linear-gradient(100deg, #ecddff 4%, #b779ff 55%, #8f62fb 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-heading p { font-size: 16px; color: var(--muted); margin: 0; }
.heading-action { display: flex; align-items: flex-end; flex-direction: column; gap: 13px; padding-bottom: 3px; }
.refresh-caption { color: #9c8eac; font: 12px var(--mono); letter-spacing: 1.7px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 12px 17px; min-height: 46px; border-radius: 8px; border: 1px solid #41334f; background: #19131f; color: #e1d1f8; font-size: 13px; font-weight: 550; white-space: nowrap; }
.button:hover:not(:disabled) { border-color: #a778e7; background: #281a38; box-shadow: 0 0 20px #9f4bff14; }
.refresh { background: linear-gradient(110deg, #2b1744, #17111f); border-color: #7745a2; box-shadow: inset 0 1px 0 #cfa2ff18, 0 0 24px #9740e80a; }
.refresh > span { font-size: 22px; line-height: 1; }
.button-dark { background: linear-gradient(115deg, #a570ff, #7838e6); border-color: #b17df8; box-shadow: inset 0 1px 0 #ffffff23, 0 4px 20px #7b2bde26; color: #fff; }
.button-dark:hover:not(:disabled) { background: linear-gradient(115deg, #b286ff, #8b49ef); border-color: #d4b3ff; box-shadow: 0 0 26px #913ffe35; }
.connection-banner { display: flex; justify-content: space-between; align-items: center; gap: 20px; border: 1px solid #2f243e; border-radius: 9px; background: linear-gradient(100deg, #1d132aa6, #101016); padding: 17px 22px; margin-bottom: 36px; }
.connection-copy { display: flex; align-items: center; gap: 15px; min-width: 0; }
.connection-copy > div { min-width: 0; }
.connection-icon { width: 32px; flex-shrink: 0; color: #b993f4; font-size: 28px; text-shadow: 0 0 13px #8844c7; }
.connection-copy strong { font-size: 13px; font-weight: 500; color: #d2c7e2; overflow-wrap: anywhere; }
.connection-copy p { color: #a79ab6; margin: 4px 0 0; font-size: 12px; }
.sync-status { font: 12px var(--mono); color: #a995be; white-space: nowrap; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.section-heading h2 { display: flex; gap: 12px; align-items: center; font-size: 16px; margin: 0; letter-spacing: -.3px; font-weight: 500; }
.section-index { color: #a891c0; font: 12px var(--mono); letter-spacing: 1px; }
#account-count { font: 12px var(--mono); letter-spacing: 0; color: #ae9ec2; background: #21172f; border: 1px solid #3a284d; border-radius: 4px; padding: 4px 7px; margin-left: 1px; }
.section-note { font-size: 12px; color: #9c91ab; }
.section-actions { display: flex; align-items: center; gap: 20px; min-width: 0; }
.add-account-button { min-height: 42px; padding: 10px 15px; font-size: 13px; border-color: #794f9b; background: #24162f; }
.add-account-button > span { font-size: 20px; line-height: 1; font-weight: 400; }
.account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; }
.account-card { position: relative; isolation: isolate; display: flex; flex-direction: column; background: linear-gradient(145deg, #17131e, #111116 70%); border: 1px solid #302837; border-radius: 13px; padding: 23px; min-width: 0; min-height: 424px; }
.account-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border-top: 1px solid #ffffff0a; }
.account-card.active { background: radial-gradient(ellipse at 100% 0%, #63328f30, transparent 65%), linear-gradient(140deg, #21132f, #14111c 80%); border-color: #8451b0; box-shadow: 0 0 0 1px #aa66ff0b, 0 8px 44px -15px #883bed45; }
.account-card.active::after { content: ""; height: 2px; width: 42%; position: absolute; left: 29%; top: -1px; background: linear-gradient(90deg, transparent, #d8acff, transparent); box-shadow: 0 0 17px 2px #b470ff4d; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 23px; }
.card-origin { display: flex; align-items: center; gap: 12px; }
.account-number { color: #a395b0; font: 12px var(--mono); }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #392449; color: #dfc4ff; border: 1px solid #724c902e; font-size: 12px; letter-spacing: .5px; font-weight: 600; }
.avatar.purple { background: #2a203f; color: #d6bdff; }
.avatar.blue { background: #211f39; color: #c6b7f6; }
.status-pill { display: flex; align-items: center; gap: 7px; border: 1px solid #72449b; border-radius: 5px; background: #6d379326; color: #d7b4ff; font: 12px var(--mono); padding: 6px 8px; white-space: nowrap; }
.status-pill.saved { background: #ffffff03; color: #a99bb8; border-color: #413349; }
.status-pill.saved .dot { background: #887d93; box-shadow: none; width: 4px; height: 4px; }
.card-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-bottom: 7px; }
.card-name h3 { margin: 0; min-width: 0; font-weight: 520; font-size: 18px; letter-spacing: -.4px; overflow-wrap: anywhere; }
.plan { flex-shrink: 0; color: #c3a7de; border: 1px solid #46304f; background: #ad62df0a; border-radius: 4px; padding: 3px 5px; font: 12px var(--mono); letter-spacing: .7px; text-transform: uppercase; }
.email { font-size: 12px; color: #a399b1; margin: 0 0 27px; overflow-wrap: anywhere; }
.meter { margin-bottom: 22px; }
.account-limits, .limit-bucket { min-width: 0; }
.account-card.pending { background: linear-gradient(150deg, #1a1224, #111016 75%); border-color: #49305d; }
.pending-state { padding: 7px 0 27px; }
.pending-symbol { color: #b58bd6; font-size: 32px; display: inline-block; margin-bottom: 7px; }
.pending-state h4 { font-size: 15px; font-weight: 500; color: #d0bcdf; margin: 0 0 9px; line-height: 1.5; }
.pending-state p { font-size: 13px; color: #aa96ba; margin: 0 0 12px; line-height: 1.75; }
.empty-workspace { grid-column: 1 / -1; min-height: 320px; }
.meter-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.meter-label { display: flex; flex-direction: column; gap: 6px; color: #b2a4c1; font-size: 14px; }
.meter-value { font-size: 42px; line-height: 1; font-weight: 430; letter-spacing: -2px; color: #f0e7ff; font-variant-numeric: tabular-nums; }
.active .meter-value { color: #ebd7ff; text-shadow: 0 0 20px #9e51ec24; }
.meter-value small { font-size: 17px; margin-left: 3px; letter-spacing: 0; color: #b29acb; }
.meter-value.low, .active .meter-value.low { color: #e7afbb; text-shadow: none; }
.meter-value.low small { color: #c991a1; }
.low-label { font: 12px var(--mono); color: #dca6b4; }
.meter-track { height: 6px; position: relative; background: #ffffff08; border-radius: 2px; margin-bottom: 11px; }
.meter-track::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 2px), #121017 calc(10% - 2px), #121017 10%); border-radius: inherit; pointer-events: none; }
.meter-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #713bd7, #ca9cff); box-shadow: 0 0 13px #a663ff48; transition: width .3s; }
.meter-fill.low { background: linear-gradient(90deg, #a66c87, #e5a6bd); box-shadow: 0 0 10px #d279a624; }
.meter-fill.saved-fill { background: #7a638e; box-shadow: none; }
.reset { color: #9e91ae; font-size: 12px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.card-footer { margin-top: auto; padding-top: 15px; border-top: 1px solid #ffffff0a; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #a799b5; font: 12px var(--mono); }
.text-button { border: 0; background: transparent; padding: 7px 0; font-size: 12px; font-weight: 500; color: #c3a1e4; }
.text-button:hover:not(:disabled) { color: #e3ceff; }
.text-button span { display: inline-block; margin-left: 4px; }
.empty-card { background: #111017; border-style: dashed; border-color: #3d2b4d; align-items: center; justify-content: center; text-align: center; }
.empty-index { position: absolute; top: 26px; left: 24px; color: #927ba7; font: 12px var(--mono); }
.add-avatar { border: 1px solid #69408b; background: #281738; color: #c390fa; border-radius: 14px; display: grid; place-items: center; width: 48px; height: 48px; font-size: 30px; font-weight: 250; margin-bottom: 20px; box-shadow: 0 0 25px #7936a714; }
.empty-card h3 { font-size: 16px; font-weight: 500; margin: 0 0 10px; }
.empty-card p { font-size: 13px; color: #a597b3; max-width: 250px; margin: 0 0 23px; }
.empty-card .button { font-size: 12px; }
.loading-card { grid-column: 1/-1; border: 1px solid var(--line); background: var(--panel); border-radius: 13px; padding: 36px; color: var(--muted); min-height: 424px; }
.switch-panel { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 52px; margin-top: 28px; padding: 30px; border: 1px solid #382541; border-radius: 13px; background: radial-gradient(ellipse 45% 130% at 100% 100%, #8c35cd14, transparent), linear-gradient(110deg, #17121f, #101015); }
.switch-panel::before { content: ""; position: absolute; left: -1px; top: 24%; bottom: 24%; width: 2px; background: linear-gradient(transparent, #a160ec, transparent); box-shadow: 0 0 13px #a564f538; }
.switch-intro h2 { font-weight: 450; font-size: 23px; letter-spacing: -.65px; margin: 12px 0 11px; }
.switch-intro p { font-size: 13px; color: #b2a5bf; max-width: 465px; margin: 0; }
.small-note { font-size: 12px; line-height: 1.7; margin-top: 14px; color: #b19bbf; }
.small-note span { margin-right: 4px; color: #c499f2; }
.switch-control { min-width: 0; display: flex; flex-direction: column; }
.switch-control label { font-size: 13px; color: #cdbbdc; margin-bottom: 11px; }
.select-row { display: flex; gap: 9px; }
.select-row select { min-width: 0; width: 100%; border: 1px solid #463151; border-radius: 8px; background: #0e0b14; color: #d2c3e0; padding: 13px 10px; font-size: 12px; cursor: pointer; }
.select-row select:hover { border-color: #7c5499; }
.select-row select option { background: #15101e; color: #e4d6f5; }
.control-hint { font-size: 12px; line-height: 1.6; color: #a793b6; margin: 12px 0 0; }
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 32px 3px; }
.detail-block { display: flex; gap: 14px; }
.detail-icon { color: #bd98db; font-size: 24px; width: 25px; line-height: 1.1; flex-shrink: 0; }
.detail-block h3 { color: #cabbda; font-size: 13px; font-weight: 500; margin: 0 0 8px; }
.detail-block p { font-size: 12px; line-height: 1.8; color: #9e90ad; max-width: 480px; margin: 0; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 23px 0 28px; border-top: 1px solid #2b2332; color: #aa9ab9; font-size: 12px; }
.footer-mark { color: #bc97e2; font-size: 18px; margin-right: 9px; vertical-align: middle; }
.footer-divider { color: #745986; margin: 0 8px; }
footer .text-button { font-size: 12px; }
.error-banner { color: #ecc3ce; background: #381d2a; border: 1px solid #704255; border-radius: 8px; padding: 16px 20px; font-size: 13px; line-height: 1.7; margin: -18px 0 25px; }
.bucket-label { color: #d1b2ed; font: 12px var(--mono); letter-spacing: .8px; padding-bottom: 14px; margin-top: 4px; }
.unavailable { font-size: 13px; color: #ae9dbe; line-height: 1.7; margin: 8px 0 24px; }
.toast { position: fixed; z-index: 10; bottom: 28px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 36px); border: 1px solid #8654aa; border-radius: 10px; padding: 15px 23px; background: #271633; color: #ead7f9; box-shadow: 0 10px 50px #0009, 0 0 24px #9a43d520; font-size: 13px; line-height: 1.7; }
dialog { color: var(--ink); background: radial-gradient(ellipse at 100% 0%, #773fa024, transparent 60%), #14101c; border: 1px solid #79499e; border-radius: 16px; padding: 26px 29px; width: min(530px, calc(100vw - 32px)); max-height: 85vh; box-shadow: 0 25px 110px #000a, 0 0 60px #8b34c820; }
dialog::backdrop { background: #05030bba; backdrop-filter: blur(8px); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #baa6c9; font-size: 24px; flex-shrink: 0; }
.icon-button:hover:not(:disabled) { background: #ffffff06; border-color: #684279; color: #eedcff; }
dialog h2 { font-size: 26px; font-weight: 480; letter-spacing: -.8px; line-height: 1.2; margin: 0 0 18px; }
dialog p, dialog li { font-size: 14px; color: #c2b0cf; line-height: 1.8; overflow-wrap: anywhere; }
dialog strong { color: #f0e4fc; font-weight: 550; }
dialog ol { padding-left: 23px; }
dialog li { padding: 4px 0; }
dialog li::marker { color: #c49cf1; }
dialog .callout { color: #ccb3de; background: #291a38; border: 1px solid #4c2e60; border-radius: 8px; padding: 14px 16px; font-size: 13px; line-height: 1.8; margin: 21px 0; }
dialog a { color: #d1a9fd; }
dialog label { font-size: 13px; color: #c4abd5; }
dialog label span { color: #a18dab; }
dialog input { display: block; width: 100%; margin: 10px 0 20px; padding: 13px; border: 1px solid #68457b; border-radius: 8px; background: #0e0a14; color: #eadcf5; font-size: 14px; }
dialog input::placeholder { color: #a693b3; }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 17px; flex-wrap: wrap; margin-top: 22px; }
.add-description { margin: 0 0 23px; }
.add-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: #22172d; border: 1px solid #443052; border-radius: 8px; }
.add-note > span { color: #be98e4; font-size: 25px; line-height: 1.3; }
.add-note p { font-size: 13px; line-height: 1.7; margin: 0; color: #bca6ca; }
.form-error { border: 1px solid #754559; border-radius: 7px; color: #efb9ce; background: #351a2a; padding: 12px 14px; margin: 16px 0 0; }
dialog .form-error { color: #efb9ce; }
#add-account-form { min-width: 0; }
#add-account-form input { min-width: 0; font-size: 16px; }
.danger-text { color: #e9a1b3; }
.identity-box { border: 1px solid #573768; border-radius: 9px; padding: 15px 18px; background: #25152f; font-size: 14px; color: #c7b1d8; line-height: 1.8; overflow-wrap: anywhere; }
.waiting { display: flex; align-items: center; gap: 9px; color: #c29feb; font-size: 13px; }
.spinner { display: inline-block; animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 1500px) {
  main { padding-top: 60px; }
  .page-heading { margin-bottom: 40px; }
  .account-card { min-height: 438px; padding: 26px; }
}
@media (max-width: 1150px) {
  main { padding: 40px 30px 0; }
  .topbar-inner { padding: 0 30px; }
  .account-grid { gap: 14px; }
  .account-card { padding: 19px; }
  .card-origin { gap: 8px; }
  .status-pill { font-size: 12px; padding: 6px; }
  .card-name { flex-wrap: wrap; gap: 6px; }
  .card-name h3 { font-size: 17px; }
  .switch-panel { gap: 30px; padding: 26px; grid-template-columns: .9fr 1fr; }
  .select-row { flex-direction: column; }
  .select-row .button { align-self: flex-start; }
  .select-row select { min-height: 47px; }
}
@media (max-width: 850px) {
  .workspace-label { display: none; }
  .local-badge { border: 0; padding: 0; }
  .topbar-inner { height: 76px; }
  .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-card { padding: 22px; }
  .status-pill { font-size: 12px; padding: 6px 8px; }
  .sync-status { display: none; }
  .switch-panel { grid-template-columns: 1fr; gap: 26px; }
  .select-row { flex-direction: row; }
  .select-row .button { align-self: stretch; }
  .details-grid { gap: 30px; }
  .refresh-caption { display: none; }
  .heading-action { padding-bottom: 5px; }
}
@media (max-width: 600px) {
  main { padding: 30px 20px 0; }
  .topbar-inner { padding: 0 20px; height: 72px; }
  .brand strong { font-size: 20px; }
  .brand-icon { width: 33px; height: 33px; font-size: 25px; }
  .brand { gap: 10px; }
  .local-badge { font-size: 12px; gap: 7px; }
  .page-heading { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 24px; }
  .eyebrow { font-size: 12px; letter-spacing: 1.25px; }
  h1 { font-size: 48px; letter-spacing: -2px; margin: 17px 0 16px; }
  .page-heading p { font-size: 14px; max-width: 310px; }
  .heading-action { padding: 0; }
  .button { min-height: 45px; }
  .refresh { min-height: 42px; font-size: 12px; padding: 10px 14px; }
  .connection-banner { padding: 15px; margin-bottom: 29px; }
  .connection-copy { gap: 11px; }
  .connection-icon { width: 22px; font-size: 26px; }
  .connection-copy strong { font-size: 12px; }
  .connection-copy p { font-size: 12px; }
  .section-heading { align-items: flex-start; gap: 9px; flex-direction: column; margin-bottom: 18px; }
  .section-heading h2 { font-size: 16px; }
  .section-note { font-size: 12px; padding-left: 27px; }
  .section-heading { gap: 15px; }
  .section-actions { width: 100%; justify-content: space-between; gap: 12px; }
  .section-actions .section-note { padding-left: 0; font-size: 12px; }
  .add-account-button { min-height: 44px; padding: 10px 12px; }
  #add-account-form .dialog-actions { gap: 10px; }
  #add-account-form .dialog-actions .button { flex: 1; min-width: 0; }
  .pending-state h4 { font-size: 16px; }
  .pending-state p { font-size: 14px; }
  .account-grid { grid-template-columns: 1fr; gap: 18px; }
  .account-card { padding: 25px; min-height: 422px; }
  .card-name h3 { font-size: 20px; }
  .email { font-size: 13px; }
  .meter-label { font-size: 14px; }
  .meter-value { font-size: 46px; }
  .reset { font-size: 12px; }
  .card-footer { font-size: 12px; }
  .text-button { font-size: 13px; }
  .empty-card { min-height: 290px; }
  .empty-index { top: 25px; left: 25px; }
  .switch-panel { padding: 25px; margin-top: 24px; }
  .switch-intro h2 { font-size: 23px; }
  .switch-intro p { font-size: 14px; }
  .switch-control label { font-size: 14px; }
  .select-row { flex-direction: column; }
  .select-row select { font-size: 14px; min-height: 47px; }
  .select-row .button { align-self: stretch; }
  .control-hint, .small-note { font-size: 12px; }
  .details-grid { grid-template-columns: 1fr; gap: 25px; padding: 30px 3px; }
  .detail-block h3 { font-size: 14px; }
  .detail-block p { font-size: 13px; }
  footer { align-items: flex-start; font-size: 12px; padding-top: 22px; }
  .footer-divider { margin: 0 4px; }
  .footer-mark { margin-right: 4px; }
  footer .text-button { font-size: 12px; white-space: nowrap; }
  dialog { padding: 23px; }
  dialog h2 { font-size: 25px; }
  .toast { width: max-content; }
}
@media (min-width: 851px) {
  .account-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 850px) {
  .account-card:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 320px; }
  .account-card:last-child:nth-child(odd) .limit-bucket { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .account-card:last-child:nth-child(odd) .bucket-label { grid-column: 1 / -1; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 380px) {
  .topbar-inner { gap: 12px; }
  .brand { gap: 8px; }
  .brand strong { font-size: 18px; }
  .local-badge { font-size: 11px; }
  h1 { font-size: 43px; }
  .account-card { padding: 21px; }
  .status-pill { font-size: 11px; }
}

/* Next reset: the first working surface, above the account dashboard. */
.reset-hero { position:relative; margin:0 0 38px; padding:30px 36px; border:1px solid #744798; border-radius:16px; background:radial-gradient(ellipse at 85% 0%,#6b28a43b,transparent 65%),linear-gradient(125deg,#21132f,#100d17 80%); box-shadow:0 0 44px #823cc614; min-width:0; }
.reset-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.reset-source { color:#ccb0e4; font-size:12px; border:1px solid #614276; background:#3a20484d; border-radius:5px; padding:6px 10px; }
.reset-options { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; margin-top:22px; }
.reset-modes { display:flex; gap:4px; padding:4px; margin:0; min-width:0; border:1px solid #67407f; border-radius:9px; background:#0c0812; }
.reset-modes label { position:relative; cursor:pointer; margin:0; }
.reset-modes input { position:absolute; opacity:0; width:1px; height:1px; }
.reset-modes span { display:block; padding:10px 14px; border-radius:6px; font-size:13px; color:#bca9cc; }
.reset-modes input:checked + span { background:#7136a2; color:#fff; box-shadow:0 0 18px #a348e536,inset 0 1px #dca4ff38; }
.reset-modes input:focus-visible + span { outline:2px solid #e1b9ff; outline-offset:3px; }
#reset-scope { margin:0; color:#c1a8d3; font-size:12px; line-height:1.6; }
.reset-modes legend.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.reset-hero h2 { margin:23px 0 7px; font-size:clamp(22px,3vw,34px); font-weight:500; letter-spacing:-.7px; overflow-wrap:anywhere; }
.reset-context { color:#bca9cc; font-size:14px; margin:0; overflow-wrap:anywhere; }
.reset-digits { display:flex; align-items:flex-start; justify-content:center; gap:clamp(8px,2.5vw,34px); margin:30px 0; font-variant-numeric:tabular-nums; }
.reset-digits > div { min-width:0; display:flex; flex-direction:column; align-items:center; gap:10px; }
.reset-digits strong { font-family:var(--mono); font-size:clamp(34px,7vw,92px); letter-spacing:-3px; line-height:1; font-weight:450; color:#e5caff; text-shadow:0 0 30px #ae5eff3b; }
.reset-digits b { font-size:clamp(24px,5vw,66px); line-height:1.2; font-weight:300; color:#795094; }
.reset-digits span { font:12px var(--mono); letter-spacing:2px; color:#b9a2cf; }
.reset-calendar { display:flex; flex-wrap:wrap; align-items:baseline; gap:9px 18px; padding-top:22px; border-top:1px solid #5835697a; }
.reset-calendar > span { color:#bba3ce; font-size:12px; }
.reset-calendar time { color:#efddff; font-size:16px; line-height:1.7; }
.reset-calendar #reset-timezone { width:100%; }
.reset-footnote { font-size:12px; color:#baa5ca; margin:14px 0 0; line-height:1.75; }
@media(max-width:600px) { .reset-hero { padding:23px 18px; margin-bottom:30px; } .reset-heading { gap:12px; } .reset-digits { gap:8px; justify-content:space-between; margin:27px 0; } .reset-digits strong { font-size:clamp(30px,8vw,48px); letter-spacing:-1.5px; } .reset-digits span { font-size:10px; letter-spacing:.5px; } .reset-digits b { font-size:25px; } .reset-calendar { display:block; } .reset-calendar > * { display:block; margin-bottom:5px; } .reset-calendar time { font-size:15px; } }