/* COINZ STORE - account pages */
.acc-wrap, .acc-auth, .acc-page, .acc-main {
  --a-card: var(--card, #14163a); --a-card2: var(--card-2, #1b1e4a); --a-bd: var(--glass-border, rgba(255,255,255,.09));
  --a-pri: var(--primary, #7c5cff); --a-acc: var(--accent, #00e5ff); --a-txt: var(--text, #eef0ff); --a-dim: var(--text-dim, #a4a9d6);
  --a-ok: var(--success, #2ee59d); --a-bad: var(--danger, #ff5470); --a-r: var(--radius, 16px);
  --a-grad: var(--grad, linear-gradient(135deg, #7c5cff, #00e5ff));
}
.acc-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; padding: 16px; color: var(--a-txt); }
.acc-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; color: var(--a-txt); }
.acc-nav { position: sticky; top: calc(var(--header-h, 64px) + 12px); align-self: start; display: flex; flex-direction: column; gap: 4px; background: var(--a-card); border: 1px solid var(--a-bd); border-radius: var(--a-r); padding: 8px; }
.acc-nav-i { display: flex; gap: 10px; align-items: center; padding: 10px 12px; min-height: 44px; border-radius: 10px; color: var(--a-dim); text-decoration: none; transition: .2s; }
.acc-nav-i:hover { background: rgba(124,92,255,.12); color: var(--a-txt); }
.acc-nav-i.is-active { background: var(--a-grad); color: #fff; font-weight: 700; }
@media (max-width: 800px) {
  .acc-wrap { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .acc-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .acc-nav-i { white-space: nowrap; padding: 8px 12px; }
}
.acc-page { display: block; }
.acc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.acc-title { margin: 0; font-size: 1.5rem; font-weight: 800; background: var(--a-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acc-sub { margin: 4px 0 0; color: var(--a-dim); font-size: .92rem; }
.acc-muted { color: var(--a-dim); }
.acc-head-actions, .acc-actions, .acc-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acc-actions { margin-top: 6px; }

/* cards & buttons */
.acc-card { background: var(--a-card); border: 1px solid var(--a-bd); border-radius: var(--a-r); padding: 16px; box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.25)); }
.acc-card h3 { margin: 0 0 10px; font-size: 1.05rem; }
.acc-narrow { max-width: 480px; }
.acc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--a-bd); background: var(--a-card2); color: var(--a-txt); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .2s, box-shadow .2s, opacity .2s; }
.acc-btn:hover { box-shadow: 0 0 0 1px var(--a-pri), 0 0 18px rgba(124,92,255,.35); transform: translateY(-1px); }
.acc-btn-primary { background: var(--a-grad); border-color: transparent; color: #fff; }
.acc-btn-sm { min-height: 36px; padding: 0 12px; font-size: .85rem; }
.acc-btn:disabled, .acc-pg:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.acc-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.acc-btn.is-loading::after { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: acc-spin .7s linear infinite; }
@keyframes acc-spin { to { transform: rotate(360deg); } }
.acc-block { width: 100%; }
.acc-glow { animation: acc-pulse 2.4s infinite; }
@keyframes acc-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(124,92,255,.5); } 50% { box-shadow: 0 0 0 8px rgba(124,92,255,0); } }
.acc-link { background: none; border: 0; padding: 0; color: var(--a-acc); cursor: pointer; font: inherit; text-decoration: none; }
.acc-link:hover { text-decoration: underline; }
.acc-copy { background: none; border: 0; cursor: pointer; font-size: 1rem; }
.acc-row-between { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }

/* forms */
.acc-form { display: flex; flex-direction: column; gap: 12px; }
.acc-field { display: flex; flex-direction: column; gap: 5px; }
.acc-flabel { font-size: .88rem; color: var(--a-dim); font-weight: 600; }
.acc-input { width: 100%; min-height: 44px; padding: 0 12px; background: var(--bg, #0a0b1e); color: var(--a-txt); border: 1px solid var(--a-bd); border-radius: 12px; font: inherit; box-sizing: border-box; }
textarea.acc-input { padding: 10px 12px; resize: vertical; }
.acc-input:focus { outline: 2px solid var(--a-pri); outline-offset: 1px; border-color: transparent; }
.acc-input[readonly] { opacity: .7; }
.acc-field.has-err .acc-input { border-color: var(--a-bad); }
.acc-ferr { color: var(--a-bad); font-size: .8rem; min-height: 0; }
.acc-formerr { color: var(--a-bad); font-size: .9rem; }
.acc-formerr:empty { display: none; }
.acc-hint { color: var(--a-dim); font-size: .78rem; }
.acc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .acc-grid2 { grid-template-columns: 1fr; } }
.acc-pw { position: relative; }
.acc-pw .acc-input { padding-inline-end: 44px; }
.acc-eye { position: absolute; inset-inline-end: 4px; top: 0; height: 44px; width: 40px; background: none; border: 0; cursor: pointer; font-size: 1.1rem; }
.acc-str { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.acc-str-bar { flex: 1; height: 6px; background: var(--a-card2); border-radius: 6px; overflow: hidden; }
.acc-str-bar i { display: block; height: 100%; width: 0; background: var(--a-bad); transition: width .25s, background .25s; }
.acc-str-bar[data-s="2"] i { background: #ffb02e; } .acc-str-bar[data-s="3"] i { background: #9be22e; } .acc-str-bar[data-s="4"] i { background: var(--a-ok); }
.acc-str-lbl { font-size: .78rem; color: var(--a-dim); min-width: 44px; }
.acc-phone { display: flex; gap: 8px; align-items: center; }
.acc-dial { background: var(--a-card2); border-radius: 10px; padding: 0 10px; min-height: 44px; display: inline-flex; align-items: center; color: var(--a-dim); }
.acc-check { display: flex; gap: 8px; align-items: center; font-size: .9rem; cursor: pointer; }
.acc-code { text-align: center; letter-spacing: 4px; font-family: monospace; font-size: 1.1rem; }
.acc-dev { background: rgba(255,212,59,.1); border: 1px dashed var(--gold, #ffd43b); border-radius: 10px; padding: 8px 12px; font-size: .85rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* auth */
.acc-auth { display: grid; grid-template-columns: 1fr 1.1fr; max-width: 900px; margin: 24px auto; border-radius: 24px; overflow: hidden; border: 1px solid var(--a-bd); box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.35)); color: var(--a-txt); }
.acc-auth-single { grid-template-columns: 1fr; max-width: 480px; }
.acc-auth-side { padding: 32px 26px; background: linear-gradient(160deg, #3a2a99, #0d5f78 120%); color: #fff; display: flex; flex-direction: column; gap: 10px; }
.acc-auth-side ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.acc-auth-side h2 { margin: 0; } .acc-auth-side p { margin: 0; opacity: .85; }
.acc-auth-logo { font-size: 3rem; filter: drop-shadow(0 0 12px rgba(255,255,255,.4)); }
.acc-auth-card { padding: 28px 24px; background: var(--a-card); display: flex; flex-direction: column; gap: 14px; }
.acc-auth-card h1 { margin: 0; font-size: 1.5rem; }
@media (max-width: 760px) { .acc-auth { grid-template-columns: 1fr; margin: 12px; } .acc-auth-side { display: none; } }
.acc-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.acc-steps li { flex: 1; text-align: center; font-size: .8rem; padding: 6px; border-radius: 8px; background: var(--a-card2); color: var(--a-dim); }
.acc-steps li.is-on { background: var(--a-grad); color: #fff; font-weight: 700; } .acc-steps li.is-done { color: var(--a-ok); }

/* lists */
.acc-list { display: flex; flex-direction: column; gap: 8px; }
.acc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: var(--a-card); border: 1px solid var(--a-bd); border-radius: 14px; color: var(--a-txt); text-decoration: none; transition: .2s; }
a.acc-row:hover, .acc-notif:hover { border-color: var(--a-pri); box-shadow: 0 0 18px rgba(124,92,255,.25); transform: translateY(-1px); }
.acc-row-main { min-width: 0; flex: 1; }
.acc-row-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.acc-row-meta { color: var(--a-dim); font-size: .82rem; margin-top: 2px; }
.acc-row-note { font-size: .82rem; margin-top: 4px; color: var(--gold, #ffd43b); }
.acc-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: end; flex-shrink: 0; }
.acc-amount { font-weight: 800; } .acc-amount.is-pos { color: var(--a-ok); } .acc-amount.is-neg { color: var(--a-bad); }
.acc-sumbar { display: flex; gap: 16px; flex-wrap: wrap; color: var(--a-dim); font-size: .9rem; }
.acc-sumbar b { color: var(--a-txt); }
.acc-notif { cursor: pointer; } .acc-notif .acc-dot { width: 10px; height: 10px; border-radius: 50%; background: transparent; flex-shrink: 0; }
.acc-notif.is-unread { border-color: rgba(124,92,255,.5); background: linear-gradient(90deg, rgba(124,92,255,.12), var(--a-card)); }
.acc-notif.is-unread .acc-dot { background: var(--a-acc); box-shadow: 0 0 8px var(--a-acc); }

/* chips / filters */
.acc-filters { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.acc-filter-row { display: flex; gap: 10px; flex-wrap: wrap; } .acc-filter-row .acc-input { flex: 1; min-width: 180px; }
.acc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.acc-chip { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--a-bd); background: var(--a-card2); color: var(--a-dim); font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: .2s; }
.acc-chip em { font-style: normal; font-size: .75rem; background: rgba(255,255,255,.1); border-radius: 999px; padding: 1px 7px; }
.acc-chip.is-on { background: var(--a-grad); color: #fff; border-color: transparent; font-weight: 700; }
.acc-daterange { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .85rem; color: var(--a-dim); }
.acc-date { width: auto; min-width: 140px; }
.acc-pager { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.acc-pg { min-width: 40px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--a-bd); background: var(--a-card); color: var(--a-txt); cursor: pointer; font: inherit; }
.acc-pg.is-cur { background: var(--a-grad); border-color: transparent; color: #fff; }

/* states */
.acc-error, .acc-empty { text-align: center; padding: 28px 16px; background: var(--a-card); border: 1px dashed var(--a-bd); border-radius: var(--a-r); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.acc-error-ico { font-size: 2rem; } .acc-error-msg { color: var(--a-bad); }
.acc-empty .empty { background: none; }
.acc-empty-ico { font-size: 3rem; }
.acc-skel-row { height: 64px; border-radius: 14px; background: var(--a-card); margin-bottom: 8px; animation: acc-sk 1.2s infinite alternate; }
@keyframes acc-sk { to { opacity: .45; } }
.acc-success { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 12px; }
.acc-success-ico { font-size: 3.2rem; }

/* order detail */
.acc-dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; margin: 0; }
.acc-dl dt { color: var(--a-dim); } .acc-dl dd { margin: 0; word-break: break-word; }
.acc-code-row, .acc-code { display: flex; gap: 8px; align-items: center; justify-content: space-between; background: var(--bg, #0a0b1e); border: 1px solid var(--a-bd); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.acc-code code { font-size: 1rem; color: var(--a-acc); word-break: break-all; user-select: all; }
.acc-reject { border-color: var(--a-bad); } .acc-reject p { margin: 0; color: var(--a-bad); }
.acc-timeline { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 14px; }
.acc-timeline li { display: flex; gap: 12px; position: relative; }
.acc-timeline li:not(:last-child)::before { content: ''; position: absolute; inset-inline-start: 6px; top: 16px; bottom: -16px; width: 2px; background: var(--a-bd); }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--a-grad); flex-shrink: 0; margin-top: 4px; box-shadow: 0 0 10px rgba(124,92,255,.6); }
.tl-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .tl-head time { color: var(--a-dim); font-size: .8rem; } .tl-note { margin: 4px 0 0; color: var(--a-dim); }

/* wallet */
.acc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 800px) { .acc-stats { grid-template-columns: 1fr 1fr; } }
.acc-stat { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--a-r); background: var(--a-card); border: 1px solid var(--a-bd); }
.acc-stat.is-balance { background: linear-gradient(135deg, rgba(124,92,255,.35), rgba(0,229,255,.18)); border-color: rgba(124,92,255,.6); }
.acc-stat-ic { font-size: 1.7rem; } .acc-stat small { display: block; color: var(--a-dim); } .acc-stat b { font-size: 1.15rem; }
.acc-group-title { margin: 14px 0 8px; }
.acc-method-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.acc-method { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 10px; background: var(--a-card); border: 1px solid var(--a-bd); border-radius: 14px; color: var(--a-txt); text-decoration: none; transition: .2s; position: relative; }
a.acc-method:hover { border-color: var(--a-pri); box-shadow: var(--glow, 0 0 20px rgba(124,92,255,.4)); transform: translateY(-2px); }
.acc-method.is-locked { opacity: .55; cursor: not-allowed; }
.acc-method-img { width: 56px; height: 56px; display: grid; place-items: center; font-size: 2rem; background: var(--a-card2); border-radius: 14px; overflow: hidden; }
.acc-method-img img { width: 100%; height: 100%; object-fit: contain; }
.acc-method-name { font-weight: 700; } .acc-lock { font-size: .75rem; color: var(--gold, #ffd43b); }
.acc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 800px) { .acc-two { grid-template-columns: 1fr; } }
.acc-copyrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--bg, #0a0b1e); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.acc-copyrow small { width: 100%; color: var(--a-dim); } .acc-copyrow code { flex: 1; word-break: break-all; color: var(--a-acc); }
.acc-note { background: rgba(0,229,255,.07); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; font-size: .88rem; }
.acc-instr p { color: var(--a-dim); margin: 4px 0 0; } .acc-pay-img { max-width: 100%; border-radius: 12px; margin-bottom: 10px; }
.acc-credit { background: rgba(46,229,157,.1); border: 1px solid rgba(46,229,157,.4); color: var(--a-ok); border-radius: 12px; padding: 10px 12px; }
.acc-credit b { font-size: 1.15rem; }
.acc-drop { display: block; border: 2px dashed var(--a-bd); border-radius: 14px; padding: 14px; text-align: center; cursor: pointer; color: var(--a-dim); }
.acc-drop:hover { border-color: var(--a-pri); }
.acc-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.acc-drop:focus-within { outline: 2px solid var(--a-pri); }
.acc-preview img { max-width: 100%; max-height: 220px; border-radius: 10px; }

/* favorites / profile / tier */
.acc-fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.acc-fav { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; padding: 14px 10px; background: var(--a-card); border: 1px solid var(--a-bd); border-radius: 14px; }
.acc-fav.is-off { opacity: .6; }
.acc-fav-img { width: 72px; height: 72px; display: grid; place-items: center; font-size: 2.2rem; background: var(--a-card2); border-radius: 16px; overflow: hidden; } .acc-fav-img img { width: 100%; height: 100%; object-fit: cover; }
.acc-fav-name { font-weight: 700; } .acc-fav-price { color: var(--a-acc); font-size: .9rem; }
.acc-fav-rm { position: absolute; top: 6px; inset-inline-start: 6px; background: none; border: 0; cursor: pointer; font-size: 1.1rem; min-width: 32px; min-height: 32px; }
.acc-profile-head { display: flex; gap: 14px; align-items: center; } .acc-profile-head h2 { margin: 0; }
.acc-avatar-big { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 2.4rem; background: var(--a-grad); box-shadow: 0 0 20px rgba(124,92,255,.5); }
.acc-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.acc-emoji { min-height: 44px; font-size: 1.4rem; background: var(--a-card2); border: 2px solid transparent; border-radius: 12px; cursor: pointer; }
.acc-emoji.is-on { border-color: var(--a-pri); box-shadow: 0 0 12px rgba(124,92,255,.5); }
.acc-tier-now { display: flex; gap: 16px; align-items: center; border-color: var(--tier, var(--a-pri)); box-shadow: 0 0 24px color-mix(in srgb, var(--tier, #7c5cff) 35%, transparent); }
.acc-tier-ico { font-size: 3rem; } .acc-tier-now h2 { margin: 2px 0 6px; color: var(--tier, var(--a-txt)); }
.acc-progress { height: 12px; background: var(--a-card2); border-radius: 999px; overflow: hidden; margin: 8px 0; }
.acc-progress i { display: block; height: 100%; background: var(--a-grad); border-radius: 999px; transition: width .5s var(--ease, ease); }
.acc-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.acc-rung { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; text-align: center; background: var(--a-card); border: 1px solid var(--a-bd); border-radius: 14px; opacity: .7; }
.acc-rung.is-reached { opacity: 1; } .acc-rung.is-current { border-color: var(--tier, var(--a-pri)); box-shadow: 0 0 18px color-mix(in srgb, var(--tier, #7c5cff) 45%, transparent); opacity: 1; }
.acc-rung-ico { font-size: 2rem; } .acc-rung small { color: var(--a-dim); } .acc-rung-st { font-size: .8rem; color: var(--a-ok); }

/* tickets */
.acc-tbadge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--a-card2); }
.acc-tbadge.st-processing { color: var(--a-acc); } .acc-tbadge.st-accepted { color: var(--a-ok); } .acc-tbadge.st-canceled { color: var(--a-dim); } .acc-tbadge.st-pending { color: var(--warn, #ffb02e); }
.acc-thread { display: flex; flex-direction: column; gap: 10px; }
.acc-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; background: var(--a-card); border: 1px solid var(--a-bd); }
.acc-msg.is-me { align-self: flex-start; background: rgba(124,92,255,.18); } .acc-msg.is-staff { align-self: flex-end; background: rgba(0,229,255,.1); }
.acc-msg-who { display: flex; gap: 10px; justify-content: space-between; font-size: .8rem; color: var(--a-dim); } .acc-msg p { margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; }

@media (prefers-reduced-motion: reduce) { .acc-glow, .acc-skel-row, .acc-btn.is-loading::after { animation: none; } .acc-btn, .acc-row, .acc-method { transition: none; } }