/* ==========================================================================
   RoCandy — account area
   sidebar · profile · inventory · transactions · seller dashboard · affiliates · settings
   ========================================================================== */
.acct-main { padding-top: calc(var(--nav-h) + .25rem); min-height: 70vh; }
.acct { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.5rem; max-width: 1320px; margin: 0 auto; padding: 1rem 1.25rem 3.5rem; color: var(--cream-100); }

/* ---------- Signed out ---------- */
.acct-gate { max-width: 520px; margin: 3rem auto 5rem; padding: 2.5rem 2rem; border-radius: 20px; background: rgba(255, 255, 255, .04); text-align: center; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.acct-gate-ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: rgba(247, 168, 188, .14); color: var(--pink-300); }
.acct-gate-ico svg { width: 28px; height: 28px; }
.acct-gate h1 { font: 700 1.8rem/1.1 'Space Grotesk', var(--font-body); color: var(--cream-50); letter-spacing: -.02em; }
.acct-gate p { max-width: 38ch; color: rgba(255, 242, 228, .62); font-weight: 700; }
.acct-gate .btn { margin-top: .6rem; }

/* ---------- Sidebar ---------- */
.acct-side { position: sticky; top: calc(var(--nav-h) + .25rem); align-self: start; display: flex; flex-direction: column; gap: .25rem; }
.acct-link {
  display: flex; align-items: center; gap: .6rem; height: 38px; padding: 0 .8rem; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .04); color: rgba(255, 242, 228, .72); font: 800 .88rem/1 var(--font-body); text-decoration: none; text-align: left; cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.acct-link svg { flex: none; width: 17px; height: 17px; }
.acct-link:hover { background: rgba(255, 255, 255, .08); color: var(--cream-50); }
.acct-link.is-active { background: rgba(247, 168, 188, .14); color: var(--pink-300); }   /* no border, the tint alone marks it */
/* slab shine: a lit bottom edge and a faint top-down sheen */
.acct-link:not(.acct-signout) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035) 60%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}
.acct-link:not(.acct-signout):hover { background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .06) 60%); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .11); }
.acct-link.is-active:not(.acct-signout) {
  background: linear-gradient(180deg, rgba(247, 168, 188, .22), rgba(247, 168, 188, .12) 60%);
  box-shadow: inset 0 -1px 0 rgba(255, 214, 226, .2);
}
.acct-link:focus-visible { outline: 3px solid var(--mint-400); outline-offset: 2px; }
.acct-signout { margin-top: .35rem; background: none; color: #FF7B7B; }
.acct-signout:hover { background: rgba(255, 90, 90, .1); color: #FF9A9A; }

/* ---------- Shared pieces ---------- */
.acct-body { min-width: 0; }
.acct-panel { display: flex; flex-direction: column; gap: 1rem; animation: fadeUp .35s var(--ease-out) both; }
.acct-h1 { font: 700 1.7rem/1.1 'Space Grotesk', var(--font-body); letter-spacing: -.02em; color: var(--cream-50); }
.acct-h2 { font: 700 1.45rem/1.15 'Space Grotesk', var(--font-body); letter-spacing: -.02em; color: var(--cream-50); }
.acct-card { border-radius: 16px; background: rgba(255, 255, 255, .04); padding: 1.2rem 1.35rem; }
.acct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 42px; padding: 0 1rem; border: 0; border-radius: 11px;
  background: rgba(255, 255, 255, .06); color: var(--cream-50); font: 800 .8rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s, transform .2s var(--ease-out), filter .2s;
}
.acct-btn svg { width: 17px; height: 17px; flex: none; }
.acct-btn:hover { background: rgba(255, 255, 255, .11); }
.acct-btn:focus-visible, .acct-seg button:focus-visible, .acct-mini:focus-visible, .acct-icon-btn:focus-visible, .acct-help-link:focus-visible { outline: 3px solid var(--mint-400); outline-offset: 2px; }
.acct-btn-pink { background: var(--pink-300); color: var(--espresso); }
.acct-btn-pink:hover { background: var(--pink-300); filter: brightness(1.06); transform: translateY(-1px); }
.acct-btn.is-spinning svg { animation: spin .7s linear; }
.acct-seg { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.acct-seg button { min-width: 52px; height: 36px; padding: 0 .8rem; border: 0; border-radius: 9px; background: transparent; color: rgba(255, 242, 228, .65); font: 800 .88rem/1 var(--font-body); cursor: pointer; transition: background .2s, color .2s; }
.acct-seg button:hover { color: var(--cream-50); }
.acct-seg button[aria-pressed="true"] { background: var(--pink-300); color: var(--espresso); }
.acct-seg-wide { align-self: flex-start; flex-wrap: wrap; }
.acct-avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, .08); }
.acct-avatar-sm { width: 56px; height: 56px; }
.acct-who-text { flex: 1; min-width: 0; display: grid; gap: .25rem; }
.acct-name { display: inline-flex; align-items: center; gap: .45rem; font: 700 1.45rem/1.1 'Space Grotesk', var(--font-body); color: var(--cream-50); min-width: 0; }
.acct-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-name-upper { text-transform: uppercase; letter-spacing: .02em; }
.acct-badge { flex: none; width: 22px; height: 22px; }
.acct-handle { font: 700 .88rem/1.2 var(--font-body); color: rgba(255, 242, 228, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.acct-tile { display: grid; gap: .55rem; padding: 1.1rem 1.25rem; border-radius: 16px; background: rgba(255, 255, 255, .04); }
.acct-tile span { font: 700 .86rem/1.2 var(--font-body); color: rgba(255, 242, 228, .6); }
.acct-tile b { font: 700 1.7rem/1 'Space Grotesk', var(--font-body); color: var(--cream-50); }
.acct-empty { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 2.5rem 1.5rem; text-align: center; }
.acct-empty-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: rgba(247, 168, 188, .14); color: var(--pink-300); }
.acct-empty-ico svg { width: 26px; height: 26px; }
.acct-empty h3 { font: 700 1.3rem/1.15 'Space Grotesk', var(--font-body); color: var(--cream-50); }
.acct-empty p { max-width: 46ch; color: rgba(255, 242, 228, .6); font-weight: 700; }
.acct-empty .acct-btn { margin-top: .5rem; }
.acct-icon-btn { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: rgba(255, 242, 228, .6); cursor: pointer; transition: background .2s, color .2s; }
.acct-icon-btn svg { width: 18px; height: 18px; }
.acct-icon-btn:hover { background: rgba(255, 255, 255, .08); color: var(--cream-50); }

/* ---------- Profile ---------- */
.acct-who { display: flex; align-items: center; gap: 1rem; }
.acct-tier { flex: none; padding: .5rem .8rem; border-radius: 999px; background: rgba(255, 221, 122, .12); color: var(--butter-300); font: 800 .78rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Transactions ---------- */
.acct-table-card { padding: .4rem .6rem; overflow-x: auto; }
.acct-table { width: 100%; border-collapse: collapse; font: 700 .88rem/1.3 var(--font-body); }
.acct-table th { padding: .8rem .75rem; text-align: left; font: 800 .74rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 242, 228, .5); white-space: nowrap; }
.acct-table td { padding: .8rem .75rem; border-top: 1px solid rgba(255, 255, 255, .05); color: var(--cream-100); font-variant-numeric: tabular-nums; }
.acct-tx-state { display: inline-block; padding: .3rem .55rem; border-radius: 999px; background: rgba(255, 221, 122, .14); color: var(--butter-300); font: 800 .72rem/1 var(--font-body); }
.acct-tx-state.is-on { background: rgba(88, 227, 138, .14); color: #58E38A; }
.acct-table-empty { padding: 2.5rem .75rem !important; text-align: center; color: rgba(255, 242, 228, .5) !important; }

/* ---------- Seller dashboard ---------- */
.acct-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.acct-head-tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.acct-shop { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.acct-shop-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.acct-notice { color: rgba(255, 242, 228, .65); font-weight: 700; }
.acct-chart-card { padding: 0; overflow: hidden; }
.acct-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.35rem; }
.acct-chart-head h2 { font: 700 1.15rem/1.1 'Space Grotesk', var(--font-body); color: var(--cream-50); }
.acct-chart-keys { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.acct-key { display: inline-flex; align-items: center; gap: .45rem; font: 800 .76rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 242, 228, .6); }
.acct-key b { color: var(--cream-50); letter-spacing: 0; }
.acct-key-bar { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.acct-key-line { width: 14px; height: 2.5px; border-radius: 2px; background: var(--c); }
.acct-mini { height: 28px; padding: 0 .65rem; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06); color: rgba(255, 242, 228, .7); font: 800 .72rem/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.acct-mini:hover, .acct-mini[aria-pressed="true"] { background: rgba(255, 255, 255, .12); color: var(--cream-50); }
.acct-chart { position: relative; padding: .25rem 1rem 1rem; min-height: 250px; transition: opacity .2s; }
.acct-chart.is-loading { opacity: .45; }
.acct-chart svg { display: block; width: 100%; overflow: visible; }
.acct-chart .grid line { stroke: rgba(255, 242, 228, .08); stroke-width: 1; shape-rendering: crispEdges; }
.acct-chart .tick { fill: rgba(255, 242, 228, .5); font: 700 11px var(--font-body); font-variant-numeric: tabular-nums; }
.acct-chart .col { transition: filter .15s, opacity .15s; }
.acct-chart .col.is-empty { opacity: .35; }
.acct-chart .hit { fill: transparent; cursor: default; outline: none; }
.acct-chart .hit:focus-visible { stroke: var(--mint-400); stroke-width: 2; }
.acct-chart .band-hover { fill: rgba(255, 255, 255, .04); }
.acct-chart .col.is-hot { filter: brightness(1.25); opacity: 1; }
.acct-chart .crosshair { stroke: rgba(255, 242, 228, .35); stroke-width: 1; shape-rendering: crispEdges; }
.acct-chart .overlay { fill: transparent; outline: none; }
.acct-chart .overlay:focus-visible { stroke: var(--mint-400); stroke-width: 2; }
.acct-tip { position: absolute; z-index: 3; min-width: 150px; padding: .6rem .75rem; border-radius: 10px; background: rgba(58, 35, 31, .98); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); pointer-events: none; font: 700 .78rem/1.3 var(--font-body); color: rgba(255, 242, 228, .6); }
.acct-tip-title { margin-bottom: .4rem; color: rgba(255, 242, 228, .55); font-weight: 800; }
.acct-tip-row { display: flex; align-items: center; gap: .5rem; }
.acct-tip-row + .acct-tip-row { margin-top: .25rem; }
.acct-tip-row b { font: 800 .95rem/1.1 'Space Grotesk', var(--font-body); color: var(--cream-50); }
.acct-tip-key { width: 12px; height: 2.5px; border-radius: 2px; flex: none; }
.acct-data-table { width: 100%; border-collapse: collapse; font: 700 .85rem/1.3 var(--font-body); }
.acct-data-table th { padding: .5rem .6rem; text-align: left; font: 800 .72rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 242, 228, .5); }
.acct-data-table td { padding: .5rem .6rem; border-top: 1px solid rgba(255, 255, 255, .05); font-variant-numeric: tabular-nums; }
.acct-data-table td:not(:first-child), .acct-data-table th:not(:first-child) { text-align: right; }
.acct-table-wrap { max-height: 320px; overflow-y: auto; }

/* ---------- Settings ---------- */
.acct-set-top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.4rem; border-bottom: 1px dashed rgba(255, 255, 255, .1); }
.acct-id { display: inline-flex; align-items: center; gap: .3rem; font: 700 1.05rem/1 'Space Grotesk', var(--font-body); color: rgba(255, 242, 228, .6); font-variant-numeric: tabular-nums; }
.acct-refresh-note { margin: 0 0 0 auto; max-width: 34ch; text-align: right; font: 700 .82rem/1.45 var(--font-body); color: rgba(255, 242, 228, .55); }
.acct-refresh-note button { padding: 0; border: 0; background: none; color: var(--cream-50); font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acct-refresh-note button:disabled { opacity: .6; cursor: progress; }
.acct-set-section { display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem 0; border-bottom: 1px dashed rgba(255, 255, 255, .1); }
.acct-set-section:last-child { border-bottom: 0; }
.acct-lead { max-width: 70ch; color: rgba(255, 242, 228, .62); font-weight: 700; margin-bottom: .4rem; }
.acct-label-row { display: flex; align-items: center; gap: .7rem; margin-top: .3rem; }
.acct-label-row label { font: 800 .95rem/1 var(--font-body); color: var(--cream-50); }
.acct-help-link { padding: 0; border: 0; background: none; color: var(--pink-300); font: 800 .82rem/1 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acct-help-link:hover { color: var(--pink-200); }
.acct-push { margin-left: auto; color: var(--cream-50); }
.acct-help { margin: 0; padding: .75rem .9rem; border-radius: 12px; background: rgba(255, 255, 255, .04); font: 700 .84rem/1.5 var(--font-body); color: rgba(255, 242, 228, .7); }
.acct-help b { color: var(--cream-50); }
.acct-field { display: flex; align-items: center; gap: .5rem; height: 52px; padding: 0 .5rem 0 1rem; border-radius: 12px; background: rgba(255, 255, 255, .05); transition: background .2s, box-shadow .2s; }
.acct-field input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--cream-50); font: 700 .95rem var(--font-body); outline: none; text-overflow: ellipsis; }
.acct-field input::placeholder { color: rgba(255, 242, 228, .38); }
.acct-field input[readonly] { cursor: default; }
.acct-field:focus-within:not(.is-editing) { box-shadow: 0 0 0 2px var(--mint-400); }   /* keyboard focus on a read-only field */
.acct-field.is-editing { background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 2px rgba(247, 168, 188, .55); }
.acct-field.is-invalid { box-shadow: 0 0 0 2px rgba(233, 108, 145, .85); }
.acct-field .i-save { display: none; }
.acct-field.is-editing .i-save { display: block; color: var(--pink-300); }
.acct-field.is-editing .i-edit { display: none; }
.acct-error { margin: 0 0 0 .3rem; font: 700 .8rem/1.4 var(--font-body); color: #FFB3C7; }
.acct-badge-chip { padding: .35rem .6rem; border-radius: 8px; background: rgba(255, 255, 255, .07); color: rgba(255, 242, 228, .6); font: 800 .74rem/1 var(--font-body); }
.acct-badge-chip.is-warn { background: rgba(255, 221, 122, .14); color: var(--butter-300); }
.acct-notify { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.5rem; margin-top: .8rem; }
.acct-notify > div > b { font: 800 .95rem/1.3 var(--font-body); color: var(--cream-50); }
.acct-notify > div > p { margin-top: .35rem; color: rgba(255, 242, 228, .6); font-weight: 700; }
.acct-checks { display: grid; gap: .8rem; }
.acct-check { position: relative; display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; }
.acct-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.acct-check .box { flex: none; width: 22px; height: 22px; margin-top: .05rem; border-radius: 7px; background: rgba(255, 255, 255, .1); display: grid; place-items: center; transition: background .2s, box-shadow .2s; }
.acct-check .box::after { content: ""; width: 11px; height: 6px; border-left: 2.6px solid var(--espresso); border-bottom: 2.6px solid var(--espresso); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.acct-check input:checked + .box { background: var(--pink-300); }
.acct-check input:checked + .box::after { opacity: 1; }
.acct-check input:focus-visible + .box { box-shadow: 0 0 0 2px var(--mint-400); }
.acct-check b { display: block; font: 800 .95rem/1.2 var(--font-body); color: var(--cream-50); }
.acct-check small { display: block; margin-top: .2rem; font: 700 .8rem/1.4 var(--font-body); color: rgba(255, 242, 228, .55); }
.acct-connected { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.acct-connected li { display: flex; align-items: center; gap: .85rem; padding: .75rem .9rem; border-radius: 14px; background: rgba(255, 255, 255, .04); }
.acct-connected li > div { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.acct-connected b { font: 800 .95rem/1.2 var(--font-body); color: var(--cream-50); }
.acct-connected li > div > span { font: 700 .8rem/1.2 var(--font-body); color: rgba(255, 242, 228, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-connected li.is-locked { opacity: .6; }
.acct-conn-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; }
.acct-conn-ico svg, .acct-conn-ico img { width: 21px; height: 21px; }
.acct-conn-ico img { filter: brightness(0) invert(1); }
.c-roblox { background: #1b1b1f; } .c-discord { background: #5865F2; } .c-steam { background: #1b2838; }
.acct-state { flex: none; padding: .4rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .07); color: rgba(255, 242, 228, .6); font: 800 .72rem/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase; }
.acct-state.is-on { background: rgba(88, 227, 138, .14); color: #58E38A; }
.acct-footnote { margin: .4rem 0 0; font: 700 .78rem/1.4 var(--font-body); color: rgba(255, 242, 228, .58); }

/* ---------- Smaller screens ---------- */
@media (max-width: 960px) {
  .acct { grid-template-columns: 1fr; gap: 1rem; padding: .75rem 1rem 3rem; }
  .acct-side { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem .25rem; }
  .acct-side::-webkit-scrollbar { display: none; }
  .acct-link { flex: none; height: 36px; padding: 0 .8rem; font-size: .84rem; }
  .acct-link:focus-visible { outline-offset: -3px; }   /* the scrolling strip would clip an outer ring */
  .acct-signout { margin-top: 0; }
  .acct-refresh-note { margin-left: 0; text-align: left; max-width: none; }
  .acct-notify { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 640px) {
  .acct-tiles { grid-template-columns: 1fr; }
  .acct-tile b { font-size: 1.45rem; }
  .acct-head-tools { width: 100%; justify-content: space-between; }
  .acct-seg button { min-width: 0; padding: 0 .7rem; }
  .acct-chart { padding: .25rem .5rem .75rem; }
  .acct-gate { margin: 1.5rem 1rem 4rem; padding: 2rem 1.25rem; }
}