:root {
  --hist-bg: var(--bg, #07050f);
  --hist-surface: rgba(var(--accent3-rgb, 124, 58, 237), 0.22);
  --hist-card: rgba(var(--accent3-rgb, 124, 58, 237), 0.16);
  --hist-border: rgba(var(--accent-rgb, 168, 85, 247), 0.22);
  --hist-border-hover: rgba(var(--accent-rgb, 168, 85, 247), 0.45);
  --hist-purple: var(--p2, #a855f7);
  --hist-purple-dim: var(--p3, #7c3aed);
  --hist-pink: var(--p1, #c084fc);
  --hist-text: #f3e8ff;
  --hist-text-dim: rgba(var(--accent1-rgb, 192, 132, 252), 0.55);
  --hist-glow: rgba(var(--accent-rgb, 168, 85, 247), 0.35);
  --hist-radius: 20px;
  --hist-radius-sm: 14px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Sarabun', sans-serif;
  background: var(--hist-bg);
  color: var(--hist-text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Ambient (เหมือนหน้าร้าน) ── */
.orb{
  position:fixed;border-radius:50%;pointer-events:none;z-index:0;
  animation:histOrbDrift 18s ease-in-out infinite;
}
.orb-1{
  width:min(140vw,1100px);height:min(90vh,720px);
  background:radial-gradient(ellipse at 50% 85%,rgba(var(--accent3-rgb), .14) 0%,transparent 72%);
  top:-42%;left:50%;margin-left:min(-70vw,-550px);filter:blur(100px);
}
.orb-2{
  width:600px;height:600px;background:rgba(var(--accent-rgb), .06);
  bottom:-200px;right:-200px;animation-delay:-9s;
}
.orb-3{
  width:450px;height:450px;background:rgba(var(--accent-rgb), .05);
  top:25%;left:55%;animation-delay:-4s;
}
html.store-entered .orb-1{
  opacity:.75;
  background:radial-gradient(ellipse at 50% 85%, rgba(var(--accent3-rgb), .12) 0%, rgba(var(--accent3-rgb), .03) 45%, transparent 72%);
}
html.store-entered .orb-2{opacity:.7}
html.store-entered .orb-3{opacity:.65}
@keyframes histOrbDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,-30px) scale(1.05)}
  66%{transform:translate(-30px,40px) scale(.96)}
}

#storeSnowCanvas{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;display:none;
}
#storeSnowCanvas[data-layer="behind"]{z-index:1}

html.store-entered body{
  background-color:var(--store-bg-bottom, #030208);
  background-image:
    radial-gradient(ellipse 115% 68% at 50% -10%, var(--store-bg-glow, rgba(139,92,246,.13)) 0%, transparent 58%),
    linear-gradient(180deg,
      var(--store-bg-top, #18131f) 0%,
      var(--store-bg-mid, #0a0810) 42%,
      var(--store-bg-bottom, #030208) 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
html.store-entered.store-bg-has-image body{
  background-image:none!important;
  background-color:var(--store-bg-bottom, #030208)!important;
}
.store-bg-image-layer{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-attachment:fixed;
  display:none;
}
.store-bg-image-overlay{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-attachment:fixed;
  display:none;
}
html.store-entered body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:var(--store-bg-noise, .2);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 40%, rgba(0,0,0,.15) 72%, rgba(0,0,0,.35) 100%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 40%, rgba(0,0,0,.15) 72%, rgba(0,0,0,.35) 100%);
}
html.store-entered .hist-app::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--store-bg-grid-line, rgba(var(--accent-rgb), .18)) 1px, transparent 1px),
    linear-gradient(90deg, var(--store-bg-grid-line, rgba(var(--accent-rgb), .18)) 1px, transparent 1px);
  background-size:var(--store-bg-grid-size, 64px) var(--store-bg-grid-size, 64px);
  mask-image:linear-gradient(180deg,
    #000 0%,
    rgba(0,0,0,var(--store-bg-grid-fade, .82)) 30%,
    rgba(0,0,0,calc(var(--store-bg-grid-fade, .82) * 0.55)) 62%,
    rgba(0,0,0,calc(var(--store-bg-grid-fade, .82) * 0.22)) 100%);
  -webkit-mask-image:linear-gradient(180deg,
    #000 0%,
    rgba(0,0,0,var(--store-bg-grid-fade, .82)) 30%,
    rgba(0,0,0,calc(var(--store-bg-grid-fade, .82) * 0.55)) 62%,
    rgba(0,0,0,calc(var(--store-bg-grid-fade, .82) * 0.22)) 100%);
}
html.store-entered .hist-app::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 85% 50% at 50% 0%, var(--store-bg-glow, rgba(var(--accent3-rgb), .08)) 0%, transparent 52%),
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,var(--store-bg-vignette, .3)) 100%);
}
html.store-bg-grid-off .hist-app::before{display:none!important}
html.store-bg-off .hist-app::before,
html.store-bg-off .hist-app::after{display:none!important}
html.store-bg-off body{background-image:none!important}

.store-music-dock{
  position:fixed;bottom:1.35rem;left:1.35rem;z-index:55;
  display:none;width:min(292px,calc(100vw - 2.5rem));
  pointer-events:auto;
}
.store-music-dock-inner{
  padding:.9rem 1rem 1rem;border-radius:16px;
  background:linear-gradient(155deg,rgba(16,14,28,.96),rgba(8,8,14,.98));
  border:1px solid rgba(var(--accent-rgb), .35);
  box-shadow:0 16px 48px rgba(0,0,0,.5),0 0 32px rgba(var(--accent3-rgb), .12);
  backdrop-filter:blur(20px);
}
.store-music-dock-head{display:flex;align-items:center;gap:.45rem;margin-bottom:.35rem}
.store-music-dock-icon{font-size:1rem;line-height:1}
.store-music-dock-title{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.8rem;
  color:rgba(248,250,252,.55);letter-spacing:.08em;text-transform:uppercase;flex:1;
}
.store-music-dock-live{display:flex;align-items:flex-end;gap:2px;height:14px;opacity:.35}
.store-music-dock-live span{
  display:block;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--p1),var(--p2));height:4px;
}
.store-music-dock.playing .store-music-dock-live{opacity:1}
.store-music-dock.playing .store-music-dock-live span:nth-child(1){animation:smBar .9s ease-in-out infinite}
.store-music-dock.playing .store-music-dock-live span:nth-child(2){animation:smBar .9s ease-in-out .15s infinite}
.store-music-dock.playing .store-music-dock-live span:nth-child(3){animation:smBar .9s ease-in-out .3s infinite}
@keyframes smBar{0%,100%{height:4px}50%{height:13px}}
.store-music-dock-track{
  font-size:.84rem;color:#fff;font-weight:600;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.65rem;
}
.store-music-dock-controls{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.6rem}
.store-music-dock-controls.is-hidden{display:none}
.store-music-dock-ctrl{
  width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:#fff;cursor:pointer;font-size:.78rem;
}
.store-music-dock-vol{display:flex;align-items:center;gap:.55rem;font-size:.76rem;color:rgba(216,180,254,.55)}
.store-music-dock-vol input{flex:1;accent-color:var(--p2);height:4px}
html.gate-locked .store-music-dock{display:none!important}
html.store-entered.logged-in .store-music-dock{display:block}

.hist-app {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* ── Header ── */
.hist-header {
  border-bottom: 1px solid var(--hist-border);
  background: rgba(10, 6, 20, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.hist-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
}

.hist-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--hist-text-dim);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.5rem 0.85rem;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.hist-back:hover {
  color: var(--hist-text);
  border-color: var(--hist-border);
  background: rgba(var(--accent-rgb), 0.08);
}

.hist-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-self: center;
}

.hist-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 0 24px var(--hist-glow);
}

.hist-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #fff 0%, var(--p1) 60%, var(--p2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.hist-subtitle {
  font-size: 0.82rem;
  color: var(--hist-text-dim);
  margin-top: 0.15rem;
}

.hist-user {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--hist-border);
  background: rgba(var(--accent-rgb), 0.06);
  font-size: 0.8rem;
  color: var(--hist-text-dim);
}
.hist-user img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.hist-user-balance {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--p1);
  margin-left: 0.15rem;
}

/* ── Main ── */
.hist-main {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.hist-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 5rem 1rem;
  color: var(--hist-text-dim);
}
html.hist-smooth-enter .hist-loading { display: none !important; }
html.hist-smooth-enter #histApp {
  opacity: 0;
  transform: translateY(14px) scale(0.992);
}
html.hist-smooth-enter.hist-entered #histApp {
  animation: histPageIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes histPageIn {
  to { opacity: 1; transform: none; }
}
.hist-reveal-in {
  animation: histContentIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}
@keyframes histContentIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.hist-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(var(--accent-rgb), 0.15);
  border-top-color: var(--hist-purple);
  border-radius: 50%;
  animation: histSpin 0.8s linear infinite;
}
@keyframes histSpin { to { transform: rotate(360deg); } }

/* ── Stats row ── */
.hist-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.hist-stat {
  padding: 1.25rem 1.5rem;
  border-radius: var(--stats-card-radius, var(--hist-radius-sm));
  border: var(--stats-border-width, 1px) solid var(--stats-card-border, var(--hist-border));
  background: var(--stats-card-bg, var(--hist-card));
  backdrop-filter: blur(12px);
  text-align: center;
}
.hist-stat-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--stats-num-color, #fff);
  line-height: 1.1;
}
.hist-stat-val.purple { color: var(--p2); }
.hist-stat-val.pink { color: var(--p1); }
.hist-stat-label {
  font-size: 0.78rem;
  color: var(--stats-label-color, var(--hist-text-dim));
  margin-top: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── List grid ── */
.hist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}
.hist-grid .hist-card {
  animation: histCardStagger 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hist-grid .hist-card:nth-child(1) { animation-delay: 0.04s; }
.hist-grid .hist-card:nth-child(2) { animation-delay: 0.08s; }
.hist-grid .hist-card:nth-child(3) { animation-delay: 0.12s; }
.hist-grid .hist-card:nth-child(4) { animation-delay: 0.16s; }
.hist-grid .hist-card:nth-child(5) { animation-delay: 0.2s; }
.hist-grid .hist-card:nth-child(6) { animation-delay: 0.24s; }
.hist-grid .hist-card:nth-child(n+7) { animation-delay: 0.28s; }
@keyframes histCardStagger {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.hist-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--hist-radius);
  border: 1px solid var(--hist-border);
  background: var(--hist-card);
  backdrop-filter: blur(16px);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, border-color 0.25s, box-shadow 0.25s;
  position: relative;
}
.hist-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), transparent 50%);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  z-index: 1;
}
.hist-card:hover {
  transform: translateY(-4px);
  border-color: var(--hist-border-hover);
  box-shadow: 0 16px 48px rgba(var(--accent3-rgb), 0.2), 0 0 0 1px rgba(var(--accent-rgb), 0.1);
}
.hist-card:hover::before { opacity: 1; }
.hist-card.is-new {
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow: 0 0 32px rgba(52, 211, 153, 0.15);
  animation: histCardStagger 0.55s cubic-bezier(0.22, 1, 0.36, 1) both, histNewPulse 2.2s ease-in-out 0.6s 3;
}
.hist-card.hist-card-pop {
  animation: histCardPop 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes histNewPulse {
  0%, 100% { box-shadow: 0 0 32px rgba(52, 211, 153, 0.15); }
  50% { box-shadow: 0 0 48px rgba(52, 211, 153, 0.35), 0 0 0 1px rgba(52, 211, 153, 0.25); }
}
@keyframes histCardPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.hist-card-img-wrap {
  position: relative;
  height: 180px;
  background: linear-gradient(135deg, rgba(var(--accent3-rgb), 0.2), rgba(10, 6, 20, 0.9));
  overflow: hidden;
}
.hist-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.hist-card:hover .hist-card-img { transform: scale(1.05); }
.hist-card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  opacity: 0.4;
}

.hist-card-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(10, 6, 20, 0.75);
  border: 1px solid var(--hist-border);
  color: var(--p1);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.hist-card-badge.new {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(52, 211, 153, 0.5);
  color: #6ee7b7;
}

.hist-card-price {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  background: rgba(10, 6, 20, 0.8);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: #fff;
  backdrop-filter: blur(8px);
  z-index: 2;
}

.hist-card-body {
  padding: 1.25rem 1.35rem 1.35rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
}

.hist-card-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hist-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.78rem;
  color: var(--hist-text-dim);
}
.hist-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.hist-card-action {
  margin-top: auto;
  padding-top: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(var(--accent-rgb), 0.1);
}
.hist-card-cta {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--hist-purple);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.hist-card:hover .hist-card-cta { color: var(--p1); }

.hist-card-order {
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  color: rgba(var(--accent-rgb), 0.45);
}

/* ── Empty state ── */
.hist-empty {
  text-align: center;
  padding: 4rem 2rem;
  border-radius: var(--hist-radius);
  border: 1px dashed var(--hist-border);
  background: var(--hist-surface);
}
.hist-empty-icon { font-size: 3.5rem; margin-bottom: 1rem; opacity: 0.5; }
.hist-empty h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.hist-empty p { color: var(--hist-text-dim); font-size: 0.9rem; margin-bottom: 1.5rem; }
.hist-empty a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.4rem;
  border-radius: 12px;
  background: var(--btn-accent-bg, linear-gradient(135deg, var(--hist-purple-dim), var(--hist-pink)));
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.hist-empty a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--hist-glow);
}

/* ── Detail page ── */
.hist-detail-wrap {
  animation: histFadeIn 0.4s ease;
}
@keyframes histFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.hist-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--hist-text-dim);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  padding: 0.45rem 0;
  transition: color 0.2s;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}
.hist-detail-back:hover { color: var(--hist-purple); }

.hist-detail-hero {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 2rem;
  border-radius: calc(var(--hist-radius) + 4px);
  border: 1px solid var(--hist-border);
  background: var(--hist-surface);
  backdrop-filter: blur(20px);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.hist-detail-visual {
  position: relative;
  min-height: 360px;
  background: linear-gradient(160deg, rgba(var(--accent3-rgb), 0.25) 0%, rgba(10, 6, 20, 0.95) 70%);
}
.hist-detail-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 360px;
}
.hist-detail-visual-placeholder {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  opacity: 0.35;
}

.hist-detail-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 5, 15, 0.85) 0%, transparent 45%);
  pointer-events: none;
}

.hist-detail-info {
  padding: 2.25rem 2.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hist-detail-cat {
  display: inline-block;
  width: fit-content;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid var(--hist-border);
  color: var(--p1);
}

.hist-detail-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.hist-detail-price {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.75rem;
  font-weight: 900;
  background: linear-gradient(135deg, #fff, var(--hist-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hist-detail-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.hist-detail-meta-item {
  padding: 0.85rem 1rem;
  border-radius: var(--hist-radius-sm);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  background: rgba(var(--accent-rgb), 0.04);
}
.hist-detail-meta-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hist-text-dim);
  margin-bottom: 0.25rem;
}
.hist-detail-meta-val {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  word-break: break-all;
}
.hist-detail-meta-val.mono {
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
}

/* ── Key box ── */
.hist-key-section {
  margin-top: 0.5rem;
}
.hist-key-wrap {
  position: relative;
}
.hist-key-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hist-text-dim);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.hist-key-box {
  position: relative;
  padding: 1.25rem 1.35rem;
  padding-right: 3.5rem;
  border-radius: var(--hist-radius-sm);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: linear-gradient(135deg, rgba(var(--accent3-rgb), 0.12), rgba(10, 6, 20, 0.6));
  font-family: 'Space Mono', monospace;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--p1);
  word-break: break-all;
  white-space: pre-wrap;
  min-height: 80px;
}
.hist-key-copy {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--hist-border);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--hist-purple);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.hist-key-copy:hover {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: var(--hist-purple);
  transform: scale(1.05);
}
.hist-key-copy.copied {
  background: rgba(52, 211, 153, 0.2);
  border-color: rgba(52, 211, 153, 0.5);
  color: #6ee7b7;
}

.hist-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
}
.hist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.75rem 1.35rem;
  border-radius: 12px;
  font-family: 'Sarabun', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.hist-btn-primary {
  background: var(--btn-accent-bg, linear-gradient(135deg, var(--hist-purple-dim), var(--hist-pink)));
  color: #fff;
  box-shadow: var(--btn-accent-shadow, 0 4px 20px var(--hist-glow));
}
.hist-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--accent-shadow-lg, 0 8px 28px var(--hist-glow));
}
.hist-btn-ghost {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid var(--hist-border);
  color: var(--p1);
}
.hist-btn-ghost:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--hist-border-hover);
}

/* ── Login required ── */
.hist-login {
  text-align: center;
  padding: 5rem 2rem;
  max-width: 420px;
  margin: 0 auto;
}
.hist-login h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  margin: 1rem 0 0.5rem;
}
.hist-login p { color: var(--hist-text-dim); margin-bottom: 1.5rem; }

/* ── Toast ── */
.hist-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  padding: 0.85rem 1.5rem;
  border-radius: 12px;
  background: rgba(22, 14, 40, 0.95);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #6ee7b7;
  font-size: 0.88rem;
  font-weight: 600;
  backdrop-filter: blur(12px);
  z-index: 999;
  transition: transform 0.35s ease, opacity 0.35s;
  opacity: 0;
  pointer-events: none;
}
.hist-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .hist-header-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hist-back { justify-self: start; }
  .hist-brand { justify-self: center; }
  .hist-user { justify-self: center; }
  .hist-stats { grid-template-columns: 1fr; }
  .hist-detail-hero { grid-template-columns: 1fr; }
  .hist-detail-info { padding: 1.5rem; }
  .hist-detail-meta-grid { grid-template-columns: 1fr; }
  .hist-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hist-main { padding: 1.25rem 1rem 3rem; }
  .hist-card-img-wrap { height: 150px; }
}