:root {
  --bg: #0b0f1a;
  --bg2: #111827;
  --card: #161d2e;
  --card2: #1c2540;
  --border: #253047;
  --border2: #2d3d5a;
  --accent: #3b82f6;
  --accent2: #60a5fa;
  --accentDim: rgba(59,130,246,0.15);
  --text: #e8eef7;
  --muted: #8899bb;
  --dim: #4a5a7a;
  --success: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;
  --gold: #f59e0b;
  --purple: #8b5cf6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Sarabun',sans-serif;min-height:100vh;overflow-x:hidden}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* TYPOGRAPHY */
.kanit{font-family:'Kanit',sans-serif}
h1,h2,h3{font-family:'Kanit',sans-serif}

/* PAGE SYSTEM */
.page{display:none;animation:fadeIn .25s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* NAVBAR */
.navbar{
  background:rgba(17,24,40,0.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  height:62px;display:flex;align-items:center;
  padding:0 28px;gap:24px;
  position:sticky;top:0;z-index:200;
}
.logo{
  display:flex;
  align-items:center;
  cursor:pointer;
  text-decoration:none;
}
.logo-image{
  display:block;
  width:170px;
  height:auto;
  max-height:46px;
  object-fit:contain;
}
.nav-links{display:flex;gap:4px;flex:1}
.nav-btn{background:none;border:none;color:var(--muted);padding:6px 14px;border-radius:8px;font-family:'Sarabun',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}
.nav-btn:hover{color:var(--text);background:var(--card)}
.nav-btn.active{color:var(--accent);background:var(--accentDim)}
.nav-right{display:flex;gap:10px;align-items:center;margin-left:auto}

/* DEV NAV */
.devnav{background:#060a12;border-bottom:1px solid var(--border);padding:7px 20px;overflow-x:auto;white-space:nowrap;display:flex;align-items:center;gap:6px}
.devnav-label{color:var(--dim);font-size:11px;flex-shrink:0}
.devbtn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:3px 9px;font-size:11px;cursor:pointer;font-family:'Sarabun',sans-serif;white-space:nowrap;transition:all .15s}
.devbtn:hover{color:var(--text);border-color:var(--border2)}
.devbtn.active{background:var(--accentDim);border-color:var(--accent);color:var(--accent)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:'Sarabun',sans-serif;font-weight:600;border-radius:9px;border:none;cursor:pointer;transition:all .2s;text-decoration:none}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(59,130,246,0.3)}
.btn-primary:hover{background:#2563eb;box-shadow:0 4px 20px rgba(59,130,246,0.5)}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border2)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#dc2626}
.btn-success{background:var(--success);color:#fff}
.btn-ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.btn-ghost:hover{background:var(--accentDim)}
.btn-sm{padding:6px 14px;font-size:13px}
.btn-md{padding:10px 20px;font-size:14px}
.btn-lg{padding:13px 28px;font-size:16px}
.btn-full{width:100%}
.btn-icon{width:36px;height:36px;padding:0;border-radius:8px}

/* CARDS */
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px}
.card-hover:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3);transition:all .2s}

/* INPUTS */
.inp{background:var(--card2);border:1px solid var(--border);color:var(--text);border-radius:9px;padding:11px 14px;font-family:'Sarabun',sans-serif;font-size:14px;width:100%;outline:none;transition:border-color .2s}
.inp:focus{border-color:var(--accent)}
.inp::placeholder{color:var(--dim)}
.inp-label{display:block;margin-bottom:6px;font-size:13px;color:var(--muted);font-weight:500}
.inp-group{margin-bottom:16px}
.password-input-wrap {
  position: relative;
}

.password-input-wrap .password-input {
  padding-right: 48px;
}

.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 12px;

  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  padding: 0;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: var(--muted);

  font-size: 16px;
  line-height: 1;

  cursor: pointer;

  transition:
    background .18s ease,
    color .18s ease;
}

.password-toggle-btn:hover {
  background: rgba(255,255,255,.06);
  color: var(--text);
}

.password-toggle-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}
.badge-blue{background:rgba(59,130,246,0.15);color:var(--accent);border:1px solid rgba(59,130,246,0.3)}
.badge-green{background:rgba(16,185,129,0.15);color:var(--success);border:1px solid rgba(16,185,129,0.3)}
.badge-yellow{background:rgba(245,158,11,0.15);color:var(--warn);border:1px solid rgba(245,158,11,0.3)}
.badge-red{background:rgba(239,68,68,0.15);color:var(--danger);border:1px solid rgba(239,68,68,0.3)}
.badge-purple{background:rgba(139,92,246,0.15);color:var(--purple);border:1px solid rgba(139,92,246,0.3)}
.badge-gray{background:rgba(74,90,122,0.3);color:var(--muted);border:1px solid var(--border)}

/* STARS */
.stars{color:var(--gold);font-size:13px}

/* AVATAR */
.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex-shrink:0}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.profile-avatar-trigger{position:relative;display:inline-flex;width:80px;height:80px;padding:0;margin:0 auto 12px;border:0;border-radius:50%;background:transparent;cursor:pointer;overflow:hidden}
.profile-avatar-trigger:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.profile-avatar-trigger .avatar,.profile-avatar-trigger #profileAvatarImage{width:80px!important;height:80px!important;margin:0!important}
.profile-avatar-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;background:rgba(0,0,0,.5);opacity:0;transition:opacity .2s;font-size:22px}
.profile-avatar-trigger:hover .profile-avatar-overlay,.profile-avatar-trigger:focus-visible .profile-avatar-overlay{opacity:1}
.verification-target{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;color:var(--muted);font-size:13px;word-break:break-word}
.verification-success{margin-bottom:12px;padding:10px 12px;border:1px solid rgba(34,197,94,.35);border-radius:8px;background:rgba(34,197,94,.10);color:#22c55e;font-size:13px;font-weight:600}
.modal-backdrop{position:fixed;z-index:1000;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.6)}
.modal-backdrop[hidden]{display:none}
.modal-dialog{width:min(100%,440px);padding:24px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:0 20px 60px rgba(0,0,0,.45)}
.modal-dialog h3{margin:0 0 20px;font-size:19px}
.modal-message{min-height:18px;margin:-4px 0 14px;font-size:12px}

/* LAYOUT */
.container{max-width:1200px;margin:0 auto;padding:0 36px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:16px}
.grid6{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.flex{display:flex}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-col{display:flex;flex-direction:column}
.gap-8{gap:8px}
.gap-12{gap:12px}
.gap-16{gap:16px}
.gap-24{gap:24px}

/* SECTION */
.sec-title{font-size:22px;font-weight:700;margin-bottom:4px}
.sec-sub{color:var(--muted);font-size:14px}
.sec-header{margin-bottom:22px}

/* DIVIDER */
.divider{height:1px;background:var(--border);margin:20px 0}

/* HERO BG */
.hero-bg{background:linear-gradient(135deg,#0b0f1a 0%,#0f172a 40%,#0b1425 100%);position:relative;overflow:hidden}
.hero-bg::before{content:'';position:absolute;top:-40%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(59,130,246,0.08) 0%,transparent 70%);pointer-events:none}
.hero-bg::after{content:'';position:absolute;bottom:-20%;left:5%;width:400px;height:400px;background:radial-gradient(circle,rgba(139,92,246,0.06) 0%,transparent 70%);pointer-events:none}

/* GAME CARD IMG */
.game-img{width:100%;aspect-ratio:16/9;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Kanit',sans-serif;font-weight:700;font-size:13px;letter-spacing:.5px;position:relative;overflow:hidden}
.product-main-img{width:100%;height:260px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,70,85,0.2);display:block;background:var(--card2)}
.product-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:24px}
.product-thumb{width:100%;height:70px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,70,85,0.2);cursor:pointer;transition:all .2s;background:var(--card2)}
.product-thumb:hover{transform:translateY(-2px);border-color:var(--accent)}
.product-thumb.active{border:2px solid var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,0.15)}

/* TABS */
.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:24px}
.tab-btn{background:none;border:none;color:var(--muted);padding:12px 22px;font-family:'Sarabun',sans-serif;font-size:15px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}

/* DROPDOWN */
.dropdown{position:relative}
.dropdown-menu{position:absolute;right:0;top:48px;background:var(--card);border:1px solid var(--border2);border-radius:12px;min-width:200px;z-index:300;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,0.5);display:none}
.dropdown-menu.open{display:block}
.dropdown-item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);padding:11px 16px;font-size:14px;cursor:pointer;font-family:'Sarabun',sans-serif;border-bottom:1px solid var(--border)22;transition:background .15s}
.dropdown-item:hover{background:var(--card2)}
.dropdown-item.danger{color:var(--danger)}

/* OTP INPUT */
.otp-wrap{display:flex;gap:10px;justify-content:center;margin:20px 0}
.otp-box{width:52px;height:58px;text-align:center;font-size:24px;font-weight:700;background:var(--card2);border:2px solid var(--border);border-radius:10px;color:var(--text);outline:none;font-family:'Kanit',sans-serif;transition:border-color .2s}
.otp-box:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentDim)}
.otp-box.filled{border-color:var(--accent)}

/* PROGRESS BAR */
.prog-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.prog-fill{height:100%;border-radius:3px;transition:width .3s}

/* CHAT */
.chat-bubble{max-width:62%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.5}
.chat-bubble.me{background:var(--accent);border-radius:14px 14px 4px 14px;align-self:flex-end}
.chat-bubble.them{background:var(--card2);border-radius:14px 14px 14px 4px}
.chat-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
}

.chat-search-wrap {
  flex: 0 0 auto;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}

.chat-search-wrap .inp {
  font-size: 13px;
}

.chat-conversation-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.chat-support-entry {
  flex: 0 0 auto;
  width: 100%;
  min-height: 68px;
  padding: 12px 14px;

  display: flex;
  align-items: center;
  gap: 10px;

  border: 0;
  border-top: 1px solid var(--border);

  background: var(--card);
  color: inherit;

  text-align: left;
  cursor: pointer;
}

.chat-support-entry:hover {
  background: rgba(59, 130, 246, .08);
}

.chat-support-entry.active {
  background: rgba(59, 130, 246, .12);
  box-shadow:
    inset 3px 0 0 var(--accent);
}

.chat-support-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(59, 130, 246, .16);
  border: 1px solid rgba(59, 130, 246, .34);

  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.chat-support-info {
  min-width: 0;
  flex: 1;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chat-support-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 14px;
}

.chat-support-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--muted);
  font-size: 12px;
}

.chat-support-unread {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  background: rgba(255, 91, 91, .16);
  border: 1px solid rgba(255, 91, 91, .38);

  color: #ff8d8d;
  font-size: 11px;
  font-weight: 800;
}

.chat-support-unread[hidden] {
  display: none;
}

.chat-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;

  padding: 16px 20px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-composer {
  flex: 0 0 auto;

  padding: 12px 20px;

  display: flex;
  align-items: center;
  gap: 10px;

  border-top: 1px solid var(--border);
}

.chat-composer[hidden] {
  display: none;
}

.chat-composer .inp {
  flex: 1;
  min-width: 0;
}

/* SUCCESS CIRCLE */
.success-circle{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:36px}

/* SELECT */
select.inp option{background:var(--card2)}

/* TOOLTIP-LIKE NOTICE */
.notice{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:14px;font-size:13px;color:var(--muted)}
.notice.warn{border-color:rgba(245,158,11,0.3);background:rgba(245,158,11,0.05)}
.notice.info{border-color:rgba(59,130,246,0.3);background:rgba(59,130,246,0.05)}
.notice.success{border-color:rgba(16,185,129,0.3);background:rgba(16,185,129,0.08);color:#34d399}

/* FILTER SIDEBAR */
.filter-item{padding:8px 12px;border-radius:8px;cursor:pointer;font-size:14px;margin-bottom:4px;transition:all .15s;border:1px solid transparent}
.filter-item:hover{background:var(--card2)}
.filter-item.active{background:var(--accentDim);color:var(--accent);border-color:rgba(59,130,246,0.3)}

/* UPLOAD ZONE */
.upload-zone{border:2px dashed var(--border2);border-radius:12px;padding:28px;text-align:center;cursor:pointer;transition:all .2s}
.upload-zone:hover{border-color:var(--accent);background:var(--accentDim)}

/* STAT CARD */
.stat-card{text-align:center;padding:20px}
.stat-val{font-family:'Kanit',sans-serif;font-size:30px;font-weight:800;margin:8px 0 4px}
.stat-label{font-size:13px;color:var(--muted)}

/* ADMIN SIDEBAR */
.admin-layout{display:grid;grid-template-columns:220px 1fr;gap:0;min-height:calc(100vh - 62px)}
.admin-sidebar{background:var(--card);border-right:1px solid var(--border);padding:20px 0}
.admin-nav-item{display:flex;align-items:center;gap:10px;padding:11px 20px;cursor:pointer;font-size:14px;color:var(--muted);transition:all .15s;border-left:3px solid transparent}
.admin-nav-item:hover{color:var(--text);background:var(--card2)}
.admin-nav-item.active{color:var(--accent);background:var(--accentDim);border-left-color:var(--accent)}
.admin-nav-count {
  margin-left: auto;

  min-width: 22px;
  height: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 6px;

  border-radius: 999px;

  background: rgba(255, 91, 91, .16);
  border: 1px solid rgba(255, 91, 91, .38);

  color: #ff8d8d;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;

  box-sizing: border-box;
}
.admin-nav-count[hidden] {
  display: none;
}

.admin-support-layout {
  height: 620px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
}

.admin-support-inbox {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--card);
}

.admin-support-search {
  flex: 0 0 auto;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}

.admin-support-conversation-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.admin-support-conversation {
  width: 100%;
  padding: 13px 14px;

  display: flex;
  align-items: center;
  gap: 10px;

  border: 0;
  border-bottom: 1px solid var(--border);

  background: transparent;
  color: inherit;

  text-align: left;
  cursor: pointer;
}

.admin-support-conversation:hover {
  background: rgba(59, 130, 246, .08);
}

.admin-support-user-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(59, 130, 246, .16);
  border: 1px solid rgba(59, 130, 246, .30);

  color: var(--accent);
  font-weight: 800;
}

.admin-support-conversation-body {
  min-width: 0;
  flex: 1;

  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-support-conversation-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-support-conversation-top strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 14px;
}

.admin-support-conversation-top small {
  flex: 0 0 auto;
  color: var(--dim);
  font-size: 10px;
}

.admin-support-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--muted);
  font-size: 12px;
}

.admin-support-unread {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  background: rgba(255, 91, 91, .16);
  border: 1px solid rgba(255, 91, 91, .38);

  color: #ff8d8d;
  font-size: 11px;
  font-weight: 800;
}

.admin-support-list-empty {
  padding: 24px 16px;

  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.admin-support-chat {
  min-width: 0;
  min-height: 0;

  display: flex;
  flex-direction: column;

  background: var(--bg);
}

.admin-support-empty {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  color: var(--muted);
  text-align: center;
}

.admin-support-empty-icon {
  width: 56px;
  height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(59, 130, 246, .16);
  border: 1px solid rgba(59, 130, 246, .34);

  color: var(--accent);
  font-weight: 800;
}

.admin-support-conversation.active {
  background: rgba(59, 130, 246, .12);
  box-shadow:
    inset 3px 0 0 var(--accent);
}

.admin-support-chat-content {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.admin-support-empty[hidden],
.admin-support-chat-content[hidden] {
  display: none;
}

.admin-support-chat-loading {
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.admin-support-chat-view {
  height: 100%;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 0;
}

.admin-support-chat-header {
  flex: 0 0 auto;

  min-height: 70px;
  padding: 12px 18px;

  display: flex;
  align-items: center;
  gap: 12px;

  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.admin-support-chat-header > div {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-support-chat-header strong {
  font-size: 14px;
}

.admin-support-chat-header small {
  color: var(--muted);
  font-size: 12px;
}

.admin-support-messages {
  flex: 1;
  min-height: 0;

  padding: 18px 20px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  overflow-y: auto;
}

.admin-support-message-row {
  display: flex;
}

.admin-support-message-row.user {
  justify-content: flex-start;
}

.admin-support-message-row.admin {
  justify-content: flex-end;
}

.admin-support-message {
  max-width: 65%;
  padding: 10px 14px;

  border-radius: 14px;

  font-size: 14px;
  line-height: 1.5;
}

.admin-support-message.user {
  background: var(--card2);
  border-radius:
    14px 14px 14px 4px;
}

.admin-support-message.admin {
  background: var(--accent);
  border-radius:
    14px 14px 4px 14px;
}

.admin-support-message-time {
  margin-top: 4px;

  color: var(--dim);
  font-size: 10px;
  text-align: right;
}

.admin-support-composer {
  flex: 0 0 auto;

  padding: 12px 16px;

  display: flex;
  align-items: center;
  gap: 10px;

  border-top: 1px solid var(--border);
  background: var(--card);
}

.admin-support-composer .inp {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.admin-support-composer .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.admin-content{padding:32px 36px 60px}

/* RADIO OPTION */
.radio-option{border:2px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s;margin-bottom:12px}
.radio-option:hover{border-color:var(--border2)}
.radio-option.selected{border-color:var(--accent);background:var(--accentDim)}

/* TABLE */
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;padding:10px 14px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--border);font-weight:600}
.table td{padding:12px 14px;font-size:14px;border-bottom:1px solid var(--border)66}
.table tr:hover td{background:var(--card2)66}

/* SCROLL AREA */
.scroll-x{overflow-x:auto}

/* ANIMATIONS */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.pulse{animation:pulse 2s infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite;display:inline-block}

/* GLOW EFFECT */
.glow-blue{box-shadow:0 0 20px rgba(59,130,246,0.3)}
.glow-green{box-shadow:0 0 20px rgba(16,185,129,0.3)}

/* STEP INDICATOR */
.steps{display:flex;gap:0}
.step{display:flex;align-items:center;gap:0;flex:1}
.step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.step-line{flex:1;height:2px;background:var(--border)}
.step-line.done{background:var(--accent)}

.back-home-btn {
    display: inline-block;
    padding: 8px 14px;
    background: #1f2a3c;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    transition: 0.2s;
}
.back-home-btn:hover {
    background: #3b82f6;
}

html {
    scroll-behavior: smooth;
}

/* ===== Admin Report Redesign ===== */
.report-panel{
  padding:18px;
}

.report-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}

.report-stat{
  background:
    linear-gradient(
      180deg,
      rgba(22,31,56,.95),
      rgba(18,26,46,.95)
    );

  border:1px solid var(--border);
  border-radius:14px;

  padding:14px 16px;
}

.report-stat .label{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  margin-bottom:6px;
}

.report-stat .value{
  font-size:26px;
  line-height:1.1;
  font-weight:800;
  font-family:Kanit,sans-serif;
}

.report-stat .sub{
  font-size:11px;
  line-height:1.4;
  color:var(--dim);
  margin-top:5px;
}
.report-stat.danger{box-shadow:inset 4px 0 0 #ff5b5b}
.report-stat.warn{box-shadow:inset 4px 0 0 #f5b942}
.report-stat.success{box-shadow:inset 4px 0 0 #18c37e}
.report-stat.info{box-shadow:inset 4px 0 0 #4c8cff}

.report-toolbar{
  display:grid;
  grid-template-columns:
    1.45fr
    .85fr
    .85fr
    .85fr;

  gap:10px;
  margin-bottom:16px;
}

.report-field{
  display:flex;
  align-items:center;
  gap:9px;

  height:43px;
  padding:0 13px;

  background:rgba(14,20,38,.88);
  border:1px solid var(--border);
  border-radius:10px;
}

.report-field input,
.report-field select{
  width:100%;

  background:transparent;
  border:none;
  outline:none;

  color:var(--text);
  font-size:13px;
}

/* Admin report dropdown dark theme */
.report-field select{
  color-scheme: dark;
}

.report-field select option{
  background:var(--card2);
  color:var(--text);
}

.report-list{display:flex;flex-direction:column;gap:14px}
.report-entry{background:linear-gradient(180deg,rgba(24,33,59,.98),rgba(19,27,49,.98));border:1px solid var(--border);border-radius:18px;padding:18px 18px 16px 18px;position:relative;overflow:hidden}
.report-entry:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:18px 0 0 18px;background:#4c8cff}
.report-entry.priority-high:before{background:#ff5b5b}
.report-entry.priority-mid:before{background:#f5b942}
.report-entry.priority-low:before{background:#18c37e}
.report-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.report-title-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.report-title{font-size:18px;font-weight:700}
.report-meta{display:flex;flex-wrap:wrap;gap:8px 14px;color:var(--muted);font-size:12px;margin-bottom:10px}
.report-desc{color:#d6def6;line-height:1.7;font-size:14px;margin-bottom:14px;max-width:880px}
.report-tags{display:flex;flex-wrap:wrap;gap:8px}
.report-chip{padding:6px 10px;border-radius:999px;background:rgba(76,140,255,.10);border:1px solid rgba(76,140,255,.22);color:#b9cdff;font-size:12px}
.report-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;min-width:260px}
.report-actions .btn{white-space:nowrap}
.report-evidence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.report-note{padding:12px 14px;border:1px dashed rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.02);color:var(--muted);font-size:12px}
.report-note strong{display:block;color:#fff;font-size:13px;margin-bottom:4px}
.inline-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:12px;border:1px solid transparent}
.inline-badge.danger{background:rgba(255,91,91,.1);color:#ff9d9d;border-color:rgba(255,91,91,.24)}
.inline-badge.warn{background:rgba(245,185,66,.1);color:#ffcf73;border-color:rgba(245,185,66,.24)}
.inline-badge.success{background:rgba(24,195,126,.1);color:#78e5b7;border-color:rgba(24,195,126,.24)}
.inline-badge.info{background:rgba(76,140,255,.1);color:#a9c5ff;border-color:rgba(76,140,255,.24)}
.report-empty{padding:16px 0 4px;color:var(--muted);font-size:13px}

/* ===== Admin Report Compact Rows ===== */

.admin-report-row{
  display:grid;

  grid-template-columns:
    95px
    290px
    minmax(260px,1fr)
    105px
    135px;

  align-items:center;
  gap:16px;

  padding:13px 16px;
  border-radius:12px;

  cursor:pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;

  overflow:visible;
}

.admin-report-row:hover{
  border-color:rgba(76,140,255,.55);
  background:
    linear-gradient(
      180deg,
      rgba(27,40,70,.98),
      rgba(20,30,54,.98)
    );
  transform:translateY(-1px);
}

.admin-report-row:before{
  width:3px;
  background:var(--accent);
}

.admin-report-row.status-warn {
  border-color: rgba(245, 185, 66, .34);

  background:
    linear-gradient(
      180deg,
      rgba(66, 51, 20, .34),
      rgba(42, 34, 20, .34)
    );
}

.admin-report-row.status-warn::before {
  background: #f5b942;
}


.admin-report-row.status-success {
  border-color: rgba(24, 195, 126, .34);

  background:
    linear-gradient(
      180deg,
      rgba(18, 57, 46, .36),
      rgba(16, 40, 36, .36)
    );
}

.admin-report-row.status-success::before {
  background: #18c37e;
}


.admin-report-row.status-danger {
  border-color: rgba(255, 91, 91, .38);

  background:
    linear-gradient(
      180deg,
      rgba(66, 29, 35, .36),
      rgba(46, 24, 30, .36)
    );
}

.admin-report-row.status-danger::before {
  background: #ff5b5b;
}


.admin-report-row.status-info {
  border-color: rgba(76, 140, 255, .34);

  background:
    linear-gradient(
      180deg,
      rgba(25, 43, 76, .38),
      rgba(20, 32, 57, .38)
    );
}

.admin-report-row.status-info::before {
  background: #4c8cff;
}

.admin-report-row.status-warn:hover {
  border-color: rgba(245, 185, 66, .58);

  background:
    linear-gradient(
      180deg,
      rgba(82, 62, 22, .48),
      rgba(50, 39, 21, .48)
    );
}

.admin-report-row.status-success:hover {
  border-color: rgba(24, 195, 126, .58);

  background:
    linear-gradient(
      180deg,
      rgba(20, 70, 55, .50),
      rgba(17, 47, 41, .50)
    );
}

.admin-report-row.status-danger:hover {
  border-color: rgba(255, 91, 91, .62);

  background:
    linear-gradient(
      180deg,
      rgba(79, 33, 40, .50),
      rgba(54, 27, 33, .50)
    );
}

.admin-report-row.status-info:hover {
  border-color: rgba(76, 140, 255, .58);

  background:
    linear-gradient(
      180deg,
      rgba(29, 50, 88, .50),
      rgba(22, 37, 66, .50)
    );
}

.admin-report-row-id{
  min-width:0;
}

.admin-report-row-id strong{
  display:block;
  font-size:15px;
  color:var(--text);
}

.admin-report-row-id span{
  display:block;
  margin-top:4px;
  font-size:11px;
  color:var(--dim);
  white-space:nowrap;
}

.admin-report-row-users{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.admin-report-row-users > div{
  display:flex;
  align-items:center;
  gap:7px;

  min-width:0;
  flex:1;

  overflow:hidden;
}

.admin-report-row-users > div > div{
  min-width:0;
  overflow:hidden;
}

.admin-report-row-users strong{
  display:block;

  width:100%;
  max-width:100%;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:13px;
  font-weight:700;
  color:var(--text);
}

.admin-report-row-users div div span{
  display:block;
  margin-top:2px;
  font-size:10px;
  color:var(--muted);
}

.admin-report-user-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  overflow: hidden;

  background:var(--accentDim);
  font-size:13px;
}

.admin-report-user-icon img {
  width: 100%;
  height: 100%;

  display: block;

  border-radius: 50%;
  object-fit: cover;
}

.admin-report-user-icon.muted{
  background:rgba(255,255,255,.06);
}

.admin-report-arrow{
  flex:0 0 auto;
  color:var(--dim);
  font-size:15px;
}

.admin-report-row-info{
  min-width:0;
}

.admin-report-row-info strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:13px;
  font-weight:700;
  color:var(--text);
}

.admin-report-row-info span{
  display:block;
  margin-top:5px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:11px;
  color:var(--muted);
}

.admin-report-row-amount{
  text-align:right;
}

.admin-report-row-amount span{
  display:block;
  margin-bottom:4px;

  font-size:10px;
  color:var(--muted);
}

.admin-report-row-amount strong{
  font-family:'Kanit',sans-serif;
  font-size:16px;
  color:var(--text);
  white-space:nowrap;
}

.admin-report-row-status{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}

.admin-report-row-status .inline-badge{
  justify-content:center;

  min-width:94px;
  box-sizing:border-box;

  padding:5px 9px;

  font-size:11px;
  font-weight:700;
  line-height:1.2;
}

.admin-report-chevron{
  color:var(--muted);
  font-size:24px;
  line-height:1;
}

/* Tablet */
@media(max-width:1250px){
  .admin-report-row{
    grid-template-columns:
      90px
      minmax(210px,1fr)
      minmax(220px,1.2fr)
      110px;
  }

  .admin-report-row-amount{
    display:none;
  }
}

/* Mobile / narrow admin */
@media(max-width:850px){
  .admin-report-row{
    grid-template-columns:1fr auto;
    gap:12px;
  }

  .admin-report-row-id{
    grid-column:1;
  }

  .admin-report-row-users{
    grid-column:1 / -1;
  }

  .admin-report-row-info{
    grid-column:1 / -1;
  }

  .admin-report-row-status{
    grid-column:2;
    grid-row:1;
  }

  .admin-report-row-amount{
    display:none;
  }
}

@media (max-width: 1100px){
  .report-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .report-toolbar{grid-template-columns:1fr 1fr}
  .report-top{flex-direction:column}
  .report-actions{min-width:0;justify-content:flex-start}
  .report-evidence{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .report-summary-grid,.report-toolbar{grid-template-columns:1fr}
}

/* ===== Admin Review Reports ===== */

.admin-review-report-summary {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

.admin-review-report-summary .report-stat {
  width: 100%;
  min-width: 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.admin-review-report-summary .report-stat:hover {
  border-color: rgba(255,255,255,.22);
}

.admin-review-report-summary .report-stat.active {
  border-color: rgba(255,255,255,.38);
  background: var(--card2);
}

.admin-review-report-summary .report-stat:active {
  transform: translateY(1px);
}

@media (max-width: 900px) {
  .admin-review-report-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .admin-review-report-summary {
    grid-template-columns: 1fr;
  }
}

.admin-review-report-panel {
  padding: 0;
  overflow: hidden;
}

.admin-review-report-entry {
  padding: 12px 14px;
}

.admin-review-report-entry::before {
  width: 3px;
}

/* Pending */
.admin-review-report-entry.status-warn {
  border-color: rgba(245, 185, 66, .32);
}

.admin-review-report-entry.status-warn::before {
  background: #f5b942;
}


/* Resolved / no issue */
.admin-review-report-entry.status-success {
  border-color: rgba(24, 195, 126, .32);
}

.admin-review-report-entry.status-success::before {
  background: #18c37e;
}


/* Removed */
.admin-review-report-entry.status-danger {
  border-color: rgba(255, 91, 91, .38);
}

.admin-review-report-entry.status-danger::before {
  background: #ff5b5b;
}


/* Reviewed */
.admin-review-report-entry.status-info {
  border-color: rgba(76, 140, 255, .32);
}

.admin-review-report-entry.status-info::before {
  background: #4c8cff;
}

/* Compact review report rows */

.admin-review-report-row{
  display:grid;

  grid-template-columns:
    90px
    minmax(220px, .9fr)
    minmax(280px, 1.2fr)
    145px;

  align-items:center;
  gap:16px;

  padding:13px 16px;

  cursor:pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.admin-review-report-row:hover{
  border-color:rgba(76,140,255,.48);
  background:rgba(255,255,255,.035);
  transform:translateY(-1px);
}


/* Report ID + date */

.admin-review-report-row-id{
  min-width:0;
}

.admin-review-report-row-id strong{
  display:block;

  color:var(--text);
  font-size:15px;
  font-weight:700;
}

.admin-review-report-row-id span{
  display:block;

  margin-top:4px;

  color:var(--dim);
  font-size:10px;
  white-space:nowrap;
}


/* Reporter -> Reviewer */

.admin-review-report-row-users{
  display:flex;
  align-items:center;
  gap:10px;

  min-width:0;
}

.admin-review-report-row-users > div{
  min-width:0;
  flex:1;
}

.admin-review-report-row-users strong{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--text);
  font-size:13px;
  font-weight:700;
}

.admin-review-report-row-users > div > span{
  display:block;

  margin-top:2px;

  color:var(--muted);
  font-size:10px;
}

.admin-review-report-row-arrow{
  flex:0 0 auto;

  color:var(--dim);
  font-size:15px;
}


/* Reason + rating */

.admin-review-report-row-info{
  min-width:0;
}

.admin-review-report-row-info > strong{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--text);
  font-size:13px;
  font-weight:700;
}

.admin-review-report-row-rating{
  display:flex;
  align-items:center;
  gap:7px;

  margin-top:5px;
}

.admin-review-report-row-rating > span{
  display:flex;
  align-items:center;
  gap:1px;
}

.admin-review-report-row-rating
.admin-report-star{
  font-size:12px;
}

.admin-review-report-row-rating > strong{
  color:var(--muted);
  font-size:10px;
  font-weight:600;
}


/* Status */

.admin-review-report-row-status{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.admin-review-report-row-status
.inline-badge{
  justify-content:center;

  min-width:100px;
  box-sizing:border-box;

  padding:5px 9px;

  font-size:11px;
  font-weight:700;
  line-height:1.2;
}

.admin-review-report-row-chevron{
  color:var(--muted);

  font-size:24px;
  line-height:1;
}


/* Responsive */

@media(max-width:1100px){
  .admin-review-report-row{
    grid-template-columns:
      80px
      minmax(190px,.9fr)
      minmax(220px,1fr)
      135px;

    gap:12px;
  }
}

@media(max-width:800px){
  .admin-review-report-row{
    grid-template-columns:1fr auto;
    gap:10px 14px;
  }

  .admin-review-report-row-id{
    grid-column:1;
  }

  .admin-review-report-row-status{
    grid-column:2;
    grid-row:1;
  }

  .admin-review-report-row-users{
    grid-column:1 / -1;
  }

  .admin-review-report-row-info{
    grid-column:1 / -1;
  }
}

@media(max-width:520px){
  .admin-review-report-row{
    padding:12px;
  }

  .admin-review-report-row-status
  .inline-badge{
    min-width:0;
  }
}

/* ===== Admin Review Report Detail Modal ===== */

.admin-review-report-detail-modal{
  box-sizing:border-box;

  width:min(760px,calc(100vw - 40px));
  max-height:calc(100vh - 40px);

  overflow-y:auto;
  overflow-x:hidden;

  padding:24px;

  border-radius:16px;
}


/* Header */

.admin-review-detail-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:18px;

  margin-bottom:20px;
  padding-bottom:18px;

  border-bottom:1px solid var(--border);
}

.admin-review-detail-header-actions{
  display:flex;
  align-items:center;
  gap:10px;

  flex-shrink:0;
}

.admin-review-detail-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;

  margin-top:22px;
  padding-top:18px;

  border-top:1px solid var(--border);
}

.admin-review-detail-actions .btn{
  min-height:38px;
  padding:8px 16px;
}

@media(max-width:520px){
  .admin-review-detail-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .admin-review-detail-actions .btn{
    width:100%;
  }
}


/* Users */

.admin-review-detail-users{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:10px;

  margin-bottom:20px;
}

.admin-review-detail-users > div{
  min-width:0;

  padding:11px 13px;

  border:1px solid var(--border);
  border-radius:11px;

  background:rgba(255,255,255,.025);
}

.admin-review-detail-users span{
  display:block;

  margin-bottom:4px;

  color:var(--muted);
  font-size:10px;
}

.admin-review-detail-users strong{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--text);
  font-size:13px;
}


/* Sections */

.admin-review-detail-section{
  margin-top:18px;
}

.admin-review-detail-label{
  margin-bottom:8px;

  color:var(--text);
  font-size:12px;
  font-weight:700;
}


/* Report reason */

.admin-review-detail-reason{
  width:fit-content;
  max-width:100%;

  padding:7px 11px;

  border:1px solid rgba(255,91,91,.25);
  border-radius:999px;

  background:rgba(255,91,91,.07);

  color:#ffaaaa;
  font-size:12px;
  font-weight:600;
}


/* Long text */

.admin-review-detail-text{
  padding:12px 14px;

  border:1px solid var(--border);
  border-radius:11px;

  background:rgba(8,13,25,.48);

  color:#d6def6;
  font-size:13px;
  line-height:1.65;

  white-space:pre-wrap;
  overflow-wrap:anywhere;
}


/* Reported review */

.admin-review-detail-review{
  padding:13px 14px;

  border:1px solid var(--border);
  border-radius:12px;

  background:rgba(255,255,255,.025);
}

.admin-review-detail-stars{
  display:flex;
  align-items:center;
  gap:2px;

  margin-bottom:10px;
}

.admin-review-detail-stars .admin-report-star{
  font-size:16px;
}

.admin-review-detail-stars strong{
  margin-left:7px;

  color:var(--text);
  font-size:12px;
}


/* Resolution */

.admin-review-detail-resolution{
  padding:12px 14px;

  border:1px solid rgba(24,195,126,.22);
  border-radius:11px;

  background:rgba(24,195,126,.06);

  color:#cfeee1;
  font-size:12px;
  line-height:1.6;
}

.admin-review-detail-resolution small{
  display:block;

  margin-top:6px;

  color:var(--muted);
  font-size:10px;
}


/* Responsive */

@media(max-width:700px){

  .admin-review-report-detail-modal{
    width:calc(100vw - 24px);
    max-height:calc(100vh - 24px);

    padding:20px 18px;
  }

  .admin-review-detail-header{
    gap:12px;
  }

  .admin-review-detail-users{
    grid-template-columns:1fr;
  }

}

@media(max-width:480px){

  .admin-review-detail-header{
    flex-direction:column;
  }

  .admin-review-detail-header-actions{
    width:100%;
    justify-content:space-between;
  }

}


/* Header */

.admin-review-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  margin-bottom: 9px;
}

.admin-review-report-head > div {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.admin-review-report-head > div > strong {
  font-size: 15px;
  color: var(--text);
}

.admin-review-report-head time {
  flex: 0 0 auto;

  font-size: 11px;
  color: var(--dim);
}


/* Users */

.admin-review-report-meta {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 8px;

  margin-bottom: 9px;
}

.admin-review-report-meta > div {
  min-width: 0;

  padding: 7px 10px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: rgba(255,255,255,.025);
}

.admin-review-report-meta span {
  display: block;

  margin-bottom: 4px;

  font-size: 10px;
  color: var(--muted);
}

.admin-review-report-meta strong {
  display: block;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 13px;
  color: var(--text);
}


/* Review + reason */

.admin-review-report-content {
  display: grid;

  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(240px, .8fr);

  gap: 8px;

  margin-bottom: 9px;
}

.admin-review-report-review,
.admin-review-report-reason {
  min-width: 0;

  padding: 9px 11px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--card2);
}

.admin-review-report-stars {
  display: flex;
  align-items: center;
  gap: 2px;

  margin-bottom: 5px;
}

.admin-review-report-stars strong {
  margin-left: 7px;

  font-size: 12px;
  color: var(--text);
}

.admin-report-star {
  color: var(--dim);
  font-size: 15px;
}

.admin-report-star.is-filled {
  color: #f5b942;
}

.admin-review-report-review p,
.admin-review-report-reason p {
  margin: 0;

  color: #c8d2e8;
  font-size: 12px;
  line-height: 1.5;

  white-space: pre-wrap;
  word-break: break-word;
}

.admin-review-report-reason > span {
  display: block;

  margin-bottom: 3px;

  font-size: 10px;
  color: var(--muted);
}

.admin-review-report-reason > strong {
  display: block;

  margin-bottom: 4px;

  font-size: 13px;
  color: var(--text);
}


/* Actions */

.admin-review-report-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 6px;

  flex-wrap: wrap;
}

.admin-review-report-actions .btn {
  white-space: nowrap;
}


/* Empty State */

.admin-review-report-empty {
  min-height: 180px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  padding: 28px 20px;

  border: 1px dashed var(--border);
  border-radius: 12px;

  color: var(--muted);
}

.admin-review-report-empty-icon {
  margin-bottom: 10px;

  font-size: 30px;
}

.admin-review-report-empty strong {
  margin-bottom: 5px;

  font-size: 14px;
  color: var(--text);
}

.admin-review-report-empty span {
  max-width: 360px;

  font-size: 12px;
  line-height: 1.6;
}


/* Responsive */

@media (max-width: 900px) {
  .admin-review-report-content {
    grid-template-columns: 1fr;
  }

  .admin-review-report-meta {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .admin-review-report-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .admin-review-report-meta {
    grid-template-columns: 1fr;
  }

  .admin-review-report-actions {
    justify-content: stretch;
  }

  .admin-review-report-actions .btn {
    flex: 1 1 100%;
  }

  .admin-review-report-entry {
    padding: 11px;
  }
}

.report-quick-btn{display:inline-flex;align-items:center;gap:8px}
.report-summary-box{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.report-summary-item{padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--card2)}
@media (max-width: 760px){
  .report-summary-box{grid-template-columns:1fr}
}

.history-link-card{transition:.2s ease}
.history-link-card:hover{transform:translateY(-2px);border-color:rgba(76,140,255,.45)!important;box-shadow:0 10px 24px rgba(0,0,0,.16)}
.history-link-card:active{transform:translateY(0)}
.history-link-card *{pointer-events:none}

.history-link-card{
  transition:.2s ease;
  border-radius:16px;
}
.history-link-card:hover{
  transform:translateY(-2px);
  border-color:rgba(76,140,255,.45)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.history-link-card:active{transform:translateY(0)}
.history-trade-action{display:flex;align-items:center;justify-content:flex-end;min-width:0}
.history-trade-action .btn{white-space:nowrap}
/* ===== Trade History Responsive ===== */
@media (max-width: 900px) {
  .history-trade-row {
    grid-template-columns: 96px minmax(0, 1fr) auto !important;
    gap: 10px 14px !important;
    padding: 14px !important;
  }

  .history-trade-preview-wrap {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
  }

  .history-trade-info {
    grid-column: 2;
    grid-row: 1;
  }

  .history-trade-amount {
    grid-column: 3;
    grid-row: 1;
  }

  .history-trade-status {
    grid-column: 2;
    grid-row: 2;
    width: auto !important;
    justify-self: start !important;
    justify-content: flex-start !important;
  }

  .history-trade-action {
    grid-column: 2 / 4;
    grid-row: 3;
    justify-content: flex-start !important;
  }

  .history-trade-action > div {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 600px) {
  .history-trade-row {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 10px 12px !important;
    padding: 12px !important;
  }

  .history-trade-preview-wrap {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .history-trade-preview-wrap img,
  .history-trade-preview-wrap > div {
    width: 80px !important;
    height: 56px !important;
  }

  .history-trade-info {
    grid-column: 2;
    grid-row: 1;
  }

  .history-trade-amount {
    grid-column: 2;
    grid-row: 2;
    text-align: left !important;
  }

  .history-trade-status {
    grid-column: 2;
    grid-row: 3;
  }

  .history-trade-action {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 4px;
  }
}
button.history-link-card{
  font: inherit;
  color: var(--text);
}
button.history-link-card *{
  pointer-events:none;
}
button.history-link-card .btn{
  pointer-events:auto;
}

/* ===================== FORGOT PASSWORD MESSAGE ===================== */
.forgot-msg{font-size:13px;border-radius:10px;padding:0;min-height:0;transition:all .2s ease}
.forgot-msg:not(:empty){padding:12px 14px}
.forgot-msg--success{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.3);color:#5fe3b5}
.forgot-msg--error{background:rgba(255,91,91,.08);border:1px solid rgba(255,91,91,.3);color:#ff9d9d}

/* Hide development page navigation bar in production UI */
.devnav { display: none !important; }

/* Product detail must remain visible after navigation */
#pg-product-detail.active { display: block !important; visibility: visible !important; opacity: 1 !important; }
#pg-product-detail .page-wrap { display: block !important; min-height: 400px; }
#product-detail-content { display: block !important; visibility: visible !important; }

/* ===== Order Detail Product Preview Responsive ===== */
@media (max-width: 600px) {
  .order-detail-product-card {
    gap: 12px !important;
    padding: 12px !important;
    align-items: flex-start !important;
  }

  .order-detail-product-preview img,
  .order-detail-product-preview > div {
    width: 108px !important;
    height: 72px !important;
    border-radius: 10px !important;
  }

  .order-detail-product-info > div:nth-child(2) {
    font-size: 16px !important;
  }
}

@media (max-width: 420px) {
  .order-detail-product-card {
    flex-direction: column !important;
  }

  .order-detail-product-preview {
    width: 100%;
  }

  .order-detail-product-preview img,
  .order-detail-product-preview > div {
    width: 100% !important;
    height: 150px !important;
  }

  .order-detail-product-info {
    width: 100%;
  }
}

/* ===== Review Modal ===== */
.modal-overlay{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(5,9,18,.72);backdrop-filter:blur(4px)}
.modal-card{background:var(--card);border:1px solid var(--border2);border-radius:16px;padding:24px;color:var(--text);box-shadow:0 24px 70px rgba(0,0,0,.55)}
.review-modal-card{max-height:min(720px,calc(100vh - 40px));overflow:auto}
.review-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.review-modal-title{font-family:'Kanit',sans-serif;font-size:21px;font-weight:700}
.review-modal-product{margin-top:4px;color:var(--muted);font-size:13px}
.review-label{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--text)}
.review-label span{font-weight:400;color:var(--muted)}
.review-stars{display:flex;gap:8px;margin:4px 0 20px}
.review-stars button{border:0;background:transparent;color:#d1d5db;font-size:38px;line-height:1;padding:0;cursor:pointer;transition:transform .15s ease,color .15s ease}
.review-stars button:hover{transform:scale(1.08);color:var(--gold)}
#reviewComment{width:100%;min-height:120px;box-sizing:border-box;resize:vertical;background:var(--card2);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:11px 13px;font-family:'Sarabun',sans-serif;font-size:14px;outline:none}
#reviewComment:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentDim)}
#reviewComment::placeholder{color:var(--dim)}
.review-message{min-height:18px;margin-top:10px;font-size:13px;color:var(--danger)}
.review-modal-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:18px}.review-modal-actions .btn{min-height:42px;padding:10px 18px;font-size:14px;line-height:1.4;white-space:nowrap}.review-modal-actions #reviewSubmitBtn{min-width:112px}
@media (max-width:600px){.modal-overlay{padding:12px}.modal-card{padding:18px}.review-modal-title{font-size:19px}.review-stars button{font-size:32px}}
/* ===== Seller Rating Profile ===== */
.profile-seller-rating{min-height:54px}
.seller-rating-overview{display:flex;align-items:center;gap:14px;padding:4px 0 16px}
.seller-rating-score{font-family:'Kanit',sans-serif;font-size:34px;font-weight:800;color:var(--gold);line-height:1}
.seller-rating-stars,.seller-review-stars{display:flex;gap:2px;color:var(--dim);font-size:16px;line-height:1}
.seller-rating-star.is-filled{color:var(--gold)}
.seller-rating-count{margin-top:6px;color:var(--muted);font-size:12px}
.seller-review-list{display:flex;flex-direction:column;gap:10px}
.seller-review-item{padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:var(--card2)}
.seller-review-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.seller-review-head strong{font-size:13px}
.seller-review-head time{color:var(--dim);font-size:11px;white-space:nowrap}
.seller-review-item p{margin-top:8px;color:#c3cee1;font-size:13px;line-height:1.65;white-space:pre-wrap}
.seller-review-no-comment{color:var(--dim)!important}
.seller-rating-empty,.seller-rating-loading{padding:12px 0;color:var(--muted);font-size:13px}
@media(max-width:720px){.seller-review-head{gap:8px}.seller-rating-score{font-size:30px}}

/* ===== Public Seller Profile ===== */
.seller-public-page{max-width:1040px;margin:0 auto;padding:36px 36px 60px}
.seller-public-hero{display:flex;align-items:center;gap:22px;padding:26px;background:linear-gradient(145deg,#171f31,#121a2a);border:1px solid var(--border2);border-radius:20px;margin-bottom:18px}
.seller-public-avatar{width:88px;height:88px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:#fff;overflow:hidden;flex-shrink:0}
.seller-public-avatar-img{width:100%;height:100%;object-fit:cover;display:block}
.seller-public-main h1{font-family:'Kanit',sans-serif;font-size:30px;margin:0 0 7px}.seller-public-rating{font-size:16px}.seller-public-meta{color:var(--muted);font-size:13px;margin-top:7px}
.seller-public-star{color:var(--border2);margin-right:1px}.seller-public-star.is-filled{color:var(--gold)}
.seller-public-stats{margin-bottom:18px}.seller-public-stats .card{text-align:center}.seller-public-stats strong{display:block;font-family:'Kanit',sans-serif;font-size:28px;margin-bottom:2px}.seller-public-stats span{color:var(--muted);font-size:13px}
.seller-public-section{margin-top:18px}.seller-public-section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px}.seller-public-section-head h2{margin:0;font-size:21px}.seller-public-section-head p{margin:3px 0 0;color:var(--muted);font-size:13px}
.seller-public-review{padding:14px 0;border-bottom:1px solid var(--border)}.seller-public-review:last-child{border-bottom:0}.seller-public-review-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.seller-public-review-head time{margin-left:auto;color:var(--muted);font-size:12px}.seller-public-review p{margin:7px 0 0;color:#cbd5e1;line-height:1.7}
.seller-public-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.seller-public-products h3{font-size:15px;margin:10px 0 8px}.seller-public-products .card{padding:16px}.seller-public-empty{padding:24px;text-align:center;color:var(--muted);grid-column:1/-1}
@media(max-width:720px){.seller-public-page{padding:24px 16px 48px}.seller-public-hero{align-items:flex-start}.seller-public-products{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.seller-public-hero{flex-direction:column;align-items:center;text-align:center}.seller-public-products{grid-template-columns:1fr}.seller-public-review-head time{margin-left:0;width:100%}}

.seller-public-product-card {
  padding: 0 !important;
  overflow: hidden;
}

.seller-public-product-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;

  background: var(--card2);
}

.seller-public-product-preview img {
  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;
}

.seller-public-product-preview-empty {
  width: 100%;
  aspect-ratio: 16 / 9;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--card2);
  color: var(--muted);

  font-size: 32px;
}

.seller-public-product-body {
  padding: 16px;
}

.seller-public-product-body h3 {
  margin: 10px 0 8px;
}

.seller-public-product-price {
  font-family: 'Kanit', sans-serif;
  font-size: 18px;
  font-weight: 800;

  color: var(--accent);
}

.seller-name-link,.product-detail-seller-link{border:0;background:transparent;padding:0;color:var(--accent2);font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.seller-name-link:hover,.product-detail-seller-link:hover{text-decoration:underline;color:var(--accent)}

/* ===== Seller Review Filters ===== */
.seller-review-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 18px}
.seller-review-filter{display:inline-flex;align-items:center;justify-content:center;min-width:66px;height:36px;padding:0 13px;border:1px solid var(--border2);border-radius:9px;background:var(--card2);color:var(--muted);font-family:'Sarabun',sans-serif;font-size:13px;font-weight:600;line-height:1;cursor:pointer;transition:all .18s ease}
.seller-review-filter:hover{border-color:var(--accent);color:var(--text);background:var(--accentDim)}
.seller-review-filter.is-active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(59,130,246,.22)}
@media(max-width:600px){.seller-review-filters{gap:6px}.seller-review-filter{min-width:58px;padding:0 10px}}

/* ===== Seller Reply ===== */
.seller-review-filters{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}
.seller-review-filter{border:1px solid var(--border2);background:var(--card2);color:var(--muted);border-radius:9px;padding:7px 12px;font:600 13px 'Sarabun',sans-serif;cursor:pointer;transition:.2s}
.seller-review-filter:hover{border-color:var(--accent);color:var(--text)}
.seller-review-filter.is-active{background:var(--accentDim);border-color:var(--accent);color:var(--accent2)}
.seller-public-reply{margin-top:12px;padding:11px 13px;border-left:3px solid var(--accent);background:var(--card2);border-radius:0 10px 10px 0}
.seller-public-reply strong{color:var(--accent2);font-size:13px}
.seller-public-reply p{margin:5px 0 0!important;color:var(--text)!important}
.seller-public-reply time{display:block;margin-top:5px;color:var(--dim);font-size:11px}
.seller-public-review-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.seller-public-review-actions .btn,
.seller-public-review-actions .seller-reply-btn {
  margin-top: 0;
}
.seller-reply-btn{margin-top:10px;border:1px solid var(--border2);background:transparent;color:var(--accent2);border-radius:8px;padding:6px 11px;font:600 12px 'Sarabun',sans-serif;cursor:pointer}
.seller-reply-btn:hover{background:var(--accentDim);border-color:var(--accent)}
.seller-reply-modal{width:min(520px,calc(100vw - 24px))}
#sellerReplyInput{width:100%;min-height:120px;resize:vertical;background:var(--card2);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:11px 13px;font:14px/1.6 'Sarabun',sans-serif;outline:none}
#sellerReplyInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentDim)}

/* ===== Review Report ===== */
.seller-report-btn{display:inline-flex;align-items:center;margin-top:10px;padding:5px 10px;border:1px solid rgba(239,68,68,.28);border-radius:8px;background:rgba(239,68,68,.08);color:#fca5a5;font:500 12px 'Sarabun',sans-serif;cursor:pointer}
.seller-report-btn:hover{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.45);color:#fecaca}
.review-report-modal{width:min(100%,520px);max-height:calc(100vh - 40px);overflow:auto}
.review-report-reasons{display:grid;gap:8px;margin:4px 0 18px}
.review-report-reasons label{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card2);color:var(--muted);font-size:13px;cursor:pointer}
.review-report-reasons label:hover{border-color:var(--border2);color:var(--text)}
.review-report-reasons input{accent-color:var(--accent)}
#reviewReportDescription{width:100%;box-sizing:border-box;resize:vertical;min-height:100px;background:var(--card2);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:11px 13px;font:14px 'Sarabun',sans-serif;outline:none}
#reviewReportDescription:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentDim)}

/* ===== Transaction Report Modal ===== */
.transaction-report-modal{width:min(680px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow:auto;padding:30px 32px}
.transaction-report-modal .review-modal-title{font-size:24px}
.transaction-report-modal .review-modal-product{font-size:14px}
.transaction-report-modal .review-label{font-size:14px;margin-top:2px}
.transaction-report-modal .review-report-reasons{gap:10px;margin-bottom:22px}
.transaction-report-modal .review-report-reasons label{min-height:48px;box-sizing:border-box;padding:12px 15px;font-size:14px}
#transactionReportDescription{width:100%;min-height:120px;box-sizing:border-box;resize:vertical;background:var(--card2);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:12px 14px;font:14px/1.6 'Sarabun',sans-serif;outline:none}
#transactionReportDescription:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentDim)}
#transactionReportDescription::placeholder{color:var(--dim)}
.transaction-report-modal .review-modal-actions{margin-top:20px;gap:10px}
.transaction-report-modal .review-modal-actions .btn{min-height:44px;padding:10px 22px;font-size:14px}
@media(max-width:600px){.transaction-report-modal{width:calc(100vw - 24px);padding:22px 18px}.transaction-report-modal .review-modal-title{font-size:21px}.transaction-report-modal .review-report-reasons label{font-size:13px}}
/* ===== Admin Transaction Report Detail ===== */

.admin-transaction-detail-modal{
  width:min(900px,calc(100vw - 40px));
  max-height:calc(100vh - 40px);

  overflow-y:auto;
  overflow-x:hidden;

  padding:28px 30px 24px;

  border-radius:18px;
  border:1px solid rgba(76,140,255,.28);

  background:
    linear-gradient(
      180deg,
      rgba(20,29,52,.99),
      rgba(15,22,40,.99)
    );

  box-shadow:
    0 28px 90px rgba(0,0,0,.65),
    0 0 0 1px rgba(76,140,255,.08);
}


/* Header */

.admin-report-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:20px;
  margin-bottom:22px;
  padding-bottom:18px;

  border-bottom:1px solid var(--border);
}

.admin-report-modal-header .review-modal-title{
  font-size:22px;
}

.admin-report-modal-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}


/* Reporter / Reported */

.admin-report-party-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:14px;
  margin-bottom:20px;
}

.admin-report-party-card{
  display:flex;
  align-items:center;
  gap:13px;

  min-width:0;

  padding:14px 16px;

  border:1px solid var(--border);
  border-radius:13px;

  background:rgba(255,255,255,.025);
}

.admin-report-party-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:rgba(76,140,255,.13);
  border:1px solid rgba(76,140,255,.2);

  font-size:18px;
}

.admin-report-party-icon.reported{
  background:rgba(255,91,91,.1);
  border-color:rgba(255,91,91,.2);
}

.admin-report-party-card > div:last-child{
  min-width:0;
}

.admin-report-party-label{
  display:block;

  margin-bottom:3px;

  font-size:11px;
  color:var(--muted);
}

.admin-report-party-card strong{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:14px;
  color:var(--text);
}

.admin-report-party-card small{
  display:block;

  margin-top:3px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:11px;
  color:var(--dim);
}

.admin-report-chat-review-action{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;

  gap:12px;
  margin-bottom:20px;
}

.admin-report-chat-review-action span{
  font-size:12px;
  color:var(--muted);
  text-align:left;
}

.admin-report-chat-review-action .btn{
  flex:0 0 auto;
  width:auto;

  min-height:36px;
  padding:7px 14px;

  border:1px solid var(--accent);
  background:rgba(76,140,255,.10);

  color:var(--accent);
}

/* Admin report chat review */

.admin-transaction-detail-modal.admin-report-chat-review-modal{
  width:min(760px,calc(100vw - 40px));
}

#adminReportChatReviewContent{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.admin-report-chat-review-users{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  padding:12px 16px;

  border:1px solid var(--border);
  border-radius:12px;

  background:rgba(255,255,255,.02);

  font-size:14px;
}

.admin-report-chat-review-users span{
  color:var(--muted);
}

.admin-report-chat-review-summary{
  text-align:center;

  color:var(--muted);
  font-size:12px;
}

.admin-report-chat-review-note{
  padding:10px 14px;

  border:1px solid rgba(76,140,255,.22);
  border-radius:10px;

  background:rgba(76,140,255,.06);

  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}

.admin-report-chat-message-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;

  max-height:420px;
  overflow-y:auto;

  padding:14px;

  border:1px solid var(--border);
  border-radius:12px;

  background:rgba(8,13,25,.45);
}

.admin-report-chat-message{
  display:flex;
  flex-direction:column;
  gap:4px;

  width:fit-content;
  max-width:min(68%,500px);
}


/* ผู้รายงาน = ฝั่งขวา */

.admin-report-chat-message.reporter{
  align-self:flex-end;
}

.admin-report-chat-message.reported{
  align-self:flex-start;
}

/* Bubble ครอบเฉพาะข้อความ */

.admin-report-chat-message-bubble{
  width:fit-content;
  max-width:100%;

  padding:7px 11px;

  border:1px solid var(--border);
  border-radius:10px;

  background:rgba(255,255,255,.035);
}

.admin-report-chat-message.reporter
.admin-report-chat-message-bubble{
  align-self:flex-end;

  border-color:rgba(76,140,255,.32);
  background:rgba(76,140,255,.09);
}

.admin-report-chat-message.reported
.admin-report-chat-message-bubble{
  align-self:flex-start;
}


/* Header ของแต่ละข้อความ */

.admin-report-chat-message-head{
  display:flex;
  align-items:center;
  gap:7px;

  min-width:0;
}


/* ฝั่งผู้รายงานให้ Avatar อยู่ด้านขวา */

.admin-report-chat-message.reporter
.admin-report-chat-message-head{
  flex-direction:row-reverse;
}


/* Avatar */

.admin-report-chat-avatar{
  display:flex;
  align-items:center;
  justify-content:center;

  width:26px;
  height:26px;
  flex:0 0 26px;

  overflow:hidden;

  border:1px solid var(--border2);
  border-radius:50%;

  background:rgba(255,255,255,.06);

  font-size:12px;
}

.admin-report-chat-avatar img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}


/* ชื่อ + Role */

.admin-report-chat-message-user{
  display:flex;
  align-items:center;
  gap:6px;

  min-width:0;
}

.admin-report-chat-message-user strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--text);
  font-size:12px;
  line-height:1.2;
}

.admin-report-chat-message-user span{
  flex-shrink:0;

  padding:2px 6px;

  border-radius:999px;

  background:rgba(255,255,255,.06);

  color:var(--muted);
  font-size:9px;
  line-height:1.3;
}


/* ฝั่งขวาให้ชื่ออยู่ติด Avatar */

.admin-report-chat-message.reporter
.admin-report-chat-message-user{
  flex-direction:row-reverse;
}


/* ข้อความ */

.admin-report-chat-message-body{
  color:#d6def6;

  font-size:13px;
  line-height:1.45;

  white-space:pre-wrap;
  overflow-wrap:anywhere;
}


/* เวลา */

.admin-report-chat-message-time{
  color:var(--dim);

  font-size:9px;
  line-height:1.2;
  white-space:nowrap;
}

.admin-report-chat-message.reporter
.admin-report-chat-message-time{
  align-self:flex-end;
}

.admin-report-chat-message.reported
.admin-report-chat-message-time{
  align-self:flex-start;
}

@media(max-width:600px){
  .admin-report-chat-message{
    max-width:86%;
  }
}

.admin-report-chat-readonly{
  padding-top:2px;

  color:var(--muted);
  font-size:11px;
  text-align:center;
}

/* Detail sections */

.admin-detail-block{
  margin-top:18px;
}

.admin-detail-label{
  margin-bottom:9px;

  font-size:13px;
  font-weight:700;
  color:var(--text);
}

.admin-report-reason-box{
  padding:13px 15px;

  border:1px solid var(--border);
  border-radius:12px;

  background:rgba(255,255,255,.02);
}

.admin-detail-description{
  min-height:80px;

  padding:14px 16px;

  border:1px solid var(--border);
  border-radius:12px;

  background:rgba(8,13,25,.55);

  color:#d6def6;
  font-size:13px;
  line-height:1.75;

  white-space:pre-wrap;
}


/* Transaction */

.admin-report-transaction-box{
  padding:16px;

  border:1px solid var(--border);
  border-radius:13px;

  background:rgba(8,13,25,.45);
}

.admin-report-transaction-grid{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px 18px;
}

.admin-report-transaction-grid > div{
  min-width:0;
}

.admin-report-transaction-grid > div.wide{
  grid-column:span 2;
}

.admin-report-transaction-grid span{
  display:block;

  margin-bottom:5px;

  font-size:11px;
  color:var(--muted);
}

.admin-report-transaction-grid strong{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;

  font-size:13px;
  font-weight:600;
  color:var(--text);
}


/* Admin note */

#adminTransactionDetailNote{
  width:100%;
  min-height:105px;

  box-sizing:border-box;
  resize:vertical;

  padding:12px 14px;

  border:1px solid var(--border);
  border-radius:12px;

  background:rgba(8,13,25,.55);
  color:var(--text);

  font:
    14px/1.6
    'Sarabun',
    sans-serif;

  outline:none;
}

#adminTransactionDetailNote:focus{
  border-color:var(--accent);

  box-shadow:
    0 0 0 3px
    var(--accentDim);
}

#adminTransactionDetailNote[readonly]{
  opacity:.75;
  cursor:default;
}


/* Footer */

.admin-report-modal-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:14px;

  margin-top:22px;
  padding-top:18px;

  border-top:1px solid var(--border);
}

.admin-report-modal-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;

  gap:9px;
  flex-wrap:wrap;
}

.admin-report-modal-footer .btn{
  min-height:40px;
}


/* Responsive */

@media(max-width:760px){

  .admin-transaction-detail-modal{
    width:calc(100vw - 24px);
    max-height:calc(100vh - 24px);

    padding:22px 18px;
  }

  .admin-report-modal-header{
    gap:12px;
  }

  .admin-report-party-grid{
    grid-template-columns:1fr;
  }

  .admin-report-transaction-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .admin-report-transaction-grid > div.wide{
    grid-column:1 / -1;
  }

  .admin-report-modal-footer{
    align-items:stretch;
    flex-direction:column-reverse;
  }

  .admin-report-modal-actions{
    justify-content:stretch;
  }

  .admin-report-modal-actions .btn{
    flex:1;
  }
}

@media(max-width:480px){

  .admin-report-transaction-grid{
    grid-template-columns:1fr;
  }

  .admin-report-transaction-grid > div.wide{
    grid-column:auto;
  }

}

/* ===== Admin Transaction Report Final Polish ===== */

.admin-transaction-detail-modal{
  box-sizing:border-box;

  width:min(820px,calc(100vw - 48px));
  max-height:calc(100vh - 48px);

  padding:22px 24px 18px;

  border-radius:16px;
}


/* Header */

.admin-report-modal-header{
  gap:16px;

  margin-bottom:16px;
  padding-bottom:14px;
}

.admin-report-modal-header .review-modal-title{
  font-size:20px;
  line-height:1.25;
}

.admin-report-modal-header .review-modal-product{
  margin-top:3px;

  font-size:12px;
  line-height:1.4;
}

.admin-report-modal-header-actions{
  gap:8px;
}

.admin-report-modal-header-actions .inline-badge{
  padding:5px 9px;

  font-size:11px;
  font-weight:700;
  line-height:1.2;
}


/* Users */

.admin-report-party-grid{
  gap:10px;
  margin-bottom:14px;
}

.admin-report-party-card{
  gap:10px;

  padding:11px 13px;

  border-radius:11px;
}

.admin-report-party-icon{
  width:36px;
  height:36px;
  flex-basis:36px;

  font-size:15px;
}

.admin-report-party-label{
  margin-bottom:2px;

  font-size:10px;
}

.admin-report-party-card strong{
  font-size:13px;
  line-height:1.35;
}

.admin-report-party-card small{
  margin-top:2px;

  font-size:10px;
}


/* Sections */

.admin-detail-block{
  margin-top:14px;
}

.admin-detail-label{
  margin-bottom:7px;

  font-size:12px;
}

.admin-report-reason-box{
  padding:10px 12px;

  border-radius:10px;
}

.admin-report-reason-box .inline-badge{
  padding:5px 9px;

  font-size:11px;
  font-weight:700;
}

.admin-detail-description{
  min-height:60px;

  padding:11px 13px;

  border-radius:10px;

  font-size:12.5px;
  line-height:1.65;
}


/* Transaction */

.admin-report-transaction-box{
  padding:13px;

  border-radius:11px;
}

.admin-report-transaction-grid{
  gap:10px 16px;
}

.admin-report-transaction-grid span{
  margin-bottom:3px;

  font-size:10px;
}

.admin-report-transaction-grid strong{
  font-size:12.5px;
  line-height:1.4;
}


/* Admin note */

#adminTransactionDetailNote{
  min-height:76px;

  padding:10px 12px;

  border-radius:10px;

  font:
    13px/1.55
    'Sarabun',
    sans-serif;
}


/* Footer */

.admin-report-modal-footer{
  position:sticky;
  bottom:-18px;
  z-index:5;

  margin:
    18px
    -24px
    -18px;

  padding:
    13px
    24px
    18px;

  gap:10px;

  background:
    linear-gradient(
      180deg,
      rgba(15,22,40,.92),
      rgba(15,22,40,1) 35%
    );

  border-top:1px solid var(--border);

  box-shadow:
    0 -10px 24px
    rgba(5,9,18,.18);
}

.admin-report-modal-actions{
  gap:7px;
}

.admin-report-modal-footer .btn{
  min-height:36px;

  padding:8px 14px;

  border-radius:9px;

  font-size:12px;
  font-weight:600;
}


/* Status colors */

.admin-report-modal-header-actions
.inline-badge.danger{
  background:rgba(255,91,91,.13);
  border-color:rgba(255,91,91,.35);
  color:#ffaaaa;
}

.admin-report-modal-header-actions
.inline-badge.warn{
  background:rgba(245,185,66,.13);
  border-color:rgba(245,185,66,.35);
  color:#ffd578;
}

.admin-report-modal-header-actions
.inline-badge.success{
  background:rgba(24,195,126,.13);
  border-color:rgba(24,195,126,.35);
  color:#83edbe;
}

.admin-report-modal-header-actions
.inline-badge.info{
  background:rgba(76,140,255,.13);
  border-color:rgba(76,140,255,.35);
  color:#b3cbff;
}


/* Scrollbar */

.admin-transaction-detail-modal{
  scrollbar-width:thin;
  scrollbar-color:
    rgba(76,140,255,.4)
    transparent;
}

.admin-transaction-detail-modal::-webkit-scrollbar{
  width:6px;
}

.admin-transaction-detail-modal::-webkit-scrollbar-track{
  background:transparent;
}

.admin-transaction-detail-modal::-webkit-scrollbar-thumb{
  background:rgba(76,140,255,.35);
  border-radius:999px;
}


/* Smaller screens */

@media(max-width:760px){

  .admin-transaction-detail-modal{
    width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);

    padding:18px 16px 14px;
  }

  .admin-report-modal-footer{
    bottom:-14px;

    margin:
      16px
      -16px
      -14px;

    padding:
      12px
      16px
      14px;
  }

}

/* ===== Admin Report User Moderation ===== */

.admin-report-user-moderation{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  margin-top:4px;
  margin-bottom:14px;

  padding:12px 14px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.012)
    );
}

.admin-report-user-moderation > div:first-child{
  min-width:0;
}

.admin-report-user-moderation
.admin-report-party-label{
  margin-bottom:5px;

  font-size:10px;
  color:var(--muted);
}

.admin-report-user-moderation
.inline-badge{
  padding:5px 9px;

  font-size:11px;
  font-weight:700;
  line-height:1.2;
}

.admin-report-user-moderation-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;

  gap:7px;
  flex-wrap:wrap;
}

.admin-report-user-moderation-actions .btn{
  min-height:34px;

  padding:7px 11px;

  border-radius:8px;

  font-size:11px;
  font-weight:700;

  white-space:nowrap;
}


/* Suspend button */

.admin-report-user-moderation-actions
.btn-warning{
  background:
    rgba(245,185,66,.13);

  color:#ffd578;

  border:
    1px solid
    rgba(245,185,66,.35);
}

.admin-report-user-moderation-actions
.btn-warning:hover{
  background:
    rgba(245,185,66,.22);

  border-color:
    rgba(245,185,66,.58);

  color:#ffe39c;
}


/* Ban button */

.admin-report-user-moderation-actions
.btn-danger{
  background:
    rgba(255,91,91,.13);

  color:#ffaaaa;

  border:
    1px solid
    rgba(255,91,91,.35);
}

.admin-report-user-moderation-actions
.btn-danger:hover{
  background:
    rgba(255,91,91,.22);

  border-color:
    rgba(255,91,91,.58);
}


/* Restore button */

.admin-report-user-moderation-actions
.btn-success{
  background:
    rgba(24,195,126,.13);

  color:#83edbe;

  border:
    1px solid
    rgba(24,195,126,.35);
}

.admin-report-user-moderation-actions
.btn-success:hover{
  background:
    rgba(24,195,126,.22);

  border-color:
    rgba(24,195,126,.58);
}


/* Mobile */

@media(max-width:620px){

  .admin-report-user-moderation{
    align-items:stretch;
    flex-direction:column;

    gap:10px;
  }

  .admin-report-user-moderation-actions{
    justify-content:flex-start;
  }

  .admin-report-user-moderation-actions .btn{
    flex:1;
  }

}

/* ===== Admin Seller Verification ===== */
.admin-seller-verification-modal{width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto}
.admin-verification-profile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.admin-verification-profile>div{padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--card2)}
.admin-verification-profile span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.admin-verification-profile strong{font-size:14px}
.seller-admin-doc-preview-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin-top: 6px;
  border: 0;
  border-radius: 8px;
  background: #070b14;
  overflow: hidden;
  cursor: zoom-in;
}

.seller-admin-doc-preview-btn img {
  display: block;
  width: 100%;
  height: 210px;
  margin: 0;
  object-fit: contain;
  border-radius: 8px;
  background: #070b14;
}

.seller-admin-doc-preview-btn:hover img {
  opacity: .85;
}

.seller-admin-doc-zoom {
  position: absolute;
  right: 9px;
  bottom: 9px;

  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border2);
  border-radius: 9px;

  background: rgba(11,15,26,.9);
  color: #fff;

  pointer-events: none;
}


/* รูปขยาย */

.seller-document-preview[hidden] {
  display: none;
}

.seller-document-preview {
  position: fixed;
  inset: 0;
  z-index: 2000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;
}

.seller-document-preview-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(3,7,18,.88);
  backdrop-filter: blur(4px);
}

.seller-document-preview-dialog {
  position: relative;
  z-index: 1;

  width: min(1200px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);

  display: flex;
  flex-direction: column;

  border: 1px solid var(--border2);
  border-radius: 16px;

  background: var(--card);

  box-shadow: 0 30px 90px rgba(0,0,0,.65);

  overflow: hidden;
}

.seller-document-preview-head {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;
  padding: 12px 16px;

  border-bottom: 1px solid var(--border);
}

.seller-document-preview-head strong {
  font-family: 'Kanit', sans-serif;
  font-size: 17px;
}

.seller-document-preview-close {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border2);
  border-radius: 9px;

  background: var(--card2);
  color: var(--text);

  cursor: pointer;
}

.seller-document-preview-close:hover {
  border-color: var(--accent);
  background: var(--accentDim);
}

.seller-document-preview-image-wrap {
  min-height: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px;

  overflow: auto;

  background: #070b14;
}

.seller-document-preview-image-wrap img {
  display: block;

  max-width: 100%;
  max-height: calc(100vh - 145px);

  width: auto;
  height: auto;

  object-fit: contain;
}

body.seller-document-preview-open {
  overflow: hidden;
}
.seller-admin-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.seller-admin-doc{min-width:0;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--card2)}
.seller-admin-doc > img{display:block;width:100%;height:210px;object-fit:contain;border-radius:8px;background:#070b14;margin-top:6px}
.seller-admin-doc-meta{color:var(--dim);font-size:11px;margin-top:6px}
.seller-admin-doc-empty{min-height:230px;display:flex;flex-direction:column;justify-content:center;text-align:center;color:var(--muted)}
@media(max-width:760px){
  .admin-verification-profile,
  .seller-admin-doc-grid{
    grid-template-columns:1fr
  }

  .seller-admin-doc-preview-btn img{
    height:260px
  }

  .seller-document-preview{
    padding:10px
  }

  .seller-document-preview-dialog{
    width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);
  }

  .seller-document-preview-image-wrap img{
    max-height:calc(100vh - 115px);
  }
}

/* ===== Notifications ===== */
.notification-dropdown-wrap{position:relative;display:flex;align-items:center}
.notification-bell-btn{position:relative;width:38px;height:38px;border:1px solid var(--border2);border-radius:10px;background:var(--card2);color:var(--text);font-size:18px;cursor:pointer}
.notification-bell-btn:hover{border-color:var(--accent);background:var(--accentDim)}
.notification-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)}
.notification-badge[hidden]{display:none}
.notification-dropdown{display:none;position:absolute;right:0;top:46px;width:360px;background:var(--card);border:1px solid var(--border2);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.45);z-index:500;overflow:hidden}
.notification-dropdown.open{display:block}
.notification-dropdown-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.notification-item-mini{width:100%;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);text-align:left;cursor:pointer}
.notification-item-mini:hover{background:var(--card2)}
.notification-item-mini.is-unread{background:rgba(59,130,246,.05)}
.notification-item-mini strong,.notification-item-mini small{display:block}
.notification-item-mini strong{font-size:13px}.notification-item-mini small{margin-top:3px;color:var(--muted);font-size:12px;line-height:1.4}
.notification-empty{padding:24px;text-align:center;color:var(--muted);font-size:13px}
.notification-list{display:flex;flex-direction:column;gap:10px}
.notification-item{position:relative;width:100%;display:flex;align-items:flex-start;gap:12px;padding:15px 16px;border:1px solid var(--border);border-radius:14px;background:var(--card);color:var(--text);text-align:left;cursor:pointer}
.notification-item:hover{border-color:var(--border2);background:var(--card2)}
.notification-item.is-unread{border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.06)}
.notification-icon{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:20px}
.notification-body{display:flex;flex-direction:column;gap:3px;min-width:0}.notification-body strong{font-size:14px}.notification-body span{color:var(--muted);font-size:13px;line-height:1.5}.notification-body time{color:var(--dim);font-size:11px;margin-top:3px}.notification-dot{margin-left:auto;margin-top:5px;width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 8px}
@media(max-width:600px){.notification-dropdown{width:min(360px,calc(100vw - 24px));right:-8px}.notification-dropdown-head{padding:12px}.notification-item{padding:13px}}

/* Email and Phone OTP send buttons */
#profileEmailVerificationSendButton,
#profilePhoneVerificationSendButton {
  width: 112px;
  min-width: 112px;
  min-height: 52px;
  padding: 4px 8px;
  white-space: pre-line;
  line-height: 1.25;
  text-align: center;
}

/* =========================================================
   ADMIN DASHBOARD
   ========================================================= */

.admin-dashboard-page {
  max-width: 1600px;
  width: 100%;
}

.admin-dashboard-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.admin-dashboard-heading-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  background: linear-gradient(
    145deg,
    rgba(59,130,246,.18),
    rgba(59,130,246,.06)
  );
  border: 1px solid rgba(59,130,246,.12);
}

.admin-dashboard-heading .sec-title {
  font-size: 25px;
  font-family: 'Kanit', sans-serif;
}

.admin-dashboard-heading .sec-sub {
  margin-top: 2px;
}


/* ---------- top stats ---------- */

.admin-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.admin-dashboard-stat-card {
  min-height: 126px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;

  background:
    linear-gradient(
      135deg,
      rgba(22,29,46,.98),
      rgba(13,24,43,.98)
    );

  border: 1px solid var(--border);
  border-radius: 15px;
}

.admin-dashboard-stat-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background: rgba(28,37,64,.82);

  font-size: 32px;
}

.admin-dashboard-stat-body {
  min-width: 0;
}

.admin-dashboard-stat-number {
  font-family: 'Kanit', sans-serif;
  font-size: 33px;
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 3px;
}

.admin-dashboard-stat-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 5px;
}

.admin-dashboard-stat-sub {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.stat-blue {
  color: #3b82f6;
}

.stat-green {
  color: #16b364;
}

.stat-orders {
  color: #d7deea;
}

.stat-profit {
  color: var(--warn);
}


/* ---------- action section ---------- */

.admin-dashboard-action-section {
  margin-bottom: 16px;
  padding: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(22,29,46,.98),
      rgba(12,25,45,.98)
    );

  border: 1px solid var(--border);
  border-radius: 15px;
}

.admin-dashboard-section-heading {
  margin-bottom: 14px;
}

.admin-dashboard-section-heading h3,
.admin-dashboard-panel-heading h3 {
  font-family: 'Kanit', sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.admin-dashboard-section-heading p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.admin-dashboard-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-dashboard-action-card {
  width: 100%;
  min-height: 112px;

  display: grid;
  grid-template-columns: 54px 1fr 38px;
  align-items: center;
  gap: 12px;

  padding: 14px;

  border-radius: 13px;
  border: 1px solid var(--border);

  background: rgba(10,22,40,.55);

  color: var(--text);
  font-family: 'Sarabun', sans-serif;
  text-align: left;

  cursor: pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.admin-dashboard-action-card:hover {
  background: rgba(28,37,64,.70);
  border-color: var(--border2);
  transform: translateY(-1px);
}

.admin-dashboard-action-icon {
  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 13px;
  background: var(--card2);

  font-size: 24px;
}

.admin-dashboard-action-card strong {
  display: block;
  font-size: 14px;
  margin-bottom: 1px;
}

.admin-dashboard-action-card span {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.admin-dashboard-action-value {
  font-family: 'Kanit', sans-serif;
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
  margin: 2px 0 3px;
}

.admin-dashboard-action-arrow {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  justify-self: end;

  border-radius: 50%;

  background: rgba(59,130,246,.12);

  color: #c8d4e8;
  font-size: 26px;
}

.value-blue {
  color: var(--accent);
}

.value-yellow {
  color: var(--warn);
}

.value-red {
  color: #ff405e;
}

.value-purple {
  color: #a970ff;
}


/* ---------- bottom panels ---------- */

.admin-dashboard-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.admin-dashboard-panel {
  padding: 16px;

  border: 1px solid var(--border);
  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      rgba(22,29,46,.98),
      rgba(10,23,42,.98)
    );
}

.admin-dashboard-panel-heading {
  min-height: 34px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
  margin-bottom: 8px;
}

.admin-dashboard-panel-heading span {
  color: var(--muted);
  font-size: 12px;
}

.admin-dashboard-text-link {
  border: 0;
  background: transparent;

  color: var(--accent);
  font-family: 'Sarabun', sans-serif;
  font-size: 12px;

  cursor: pointer;
}


/* ---------- recent transaction ---------- */

.admin-dashboard-recent-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;

  min-height: 57px;
  padding: 8px 10px;

  border-top: 1px solid rgba(45,61,90,.55);
}

.admin-dashboard-recent-icon {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  border-radius: 8px;

  background: #0d1424;

  font-size: 19px;
}

.admin-dashboard-recent-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-dashboard-recent-main strong {
  display: block;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 13px;
}

.admin-dashboard-recent-main span,
.admin-dashboard-recent-date {
  color: var(--muted);
  font-size: 11px;
}

.admin-dashboard-success-badge {
  padding: 5px 11px;

  border: 1px solid rgba(16,185,129,.25);
  border-radius: 999px;

  background: rgba(16,185,129,.10);

  color: #34d399;
  font-size: 11px;
  font-weight: 600;
}


/* ---------- popular games ---------- */

.admin-dashboard-game-row {
  display: grid;
  grid-template-columns: 30px 34px minmax(110px, 1fr) minmax(100px, 1.5fr) 70px;
  align-items: center;
  gap: 9px;

  min-height: 48px;
  padding: 6px 7px;

  border-top: 1px solid rgba(45,61,90,.50);
}

.admin-dashboard-game-rank {
  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--card2);

  color: #d9e2f2;
  font-size: 12px;
  font-weight: 700;
}

.admin-dashboard-game-rank.is-first {
  color: #ffd166;
  background: rgba(245,158,11,.18);
}

.admin-dashboard-game-image {
  width: 30px;
  height: 30px;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px;

  background: #0d1424;
}

.admin-dashboard-game-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-dashboard-game-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 12px;
  font-weight: 600;
}

.admin-dashboard-game-bar {
  height: 7px;

  overflow: hidden;

  border-radius: 999px;
  background: rgba(59,130,246,.12);
}

.admin-dashboard-game-bar > span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background: var(--accent);
}

.admin-dashboard-game-count {
  color: #dce5f5;
  font-size: 11px;
  text-align: right;
}


/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .admin-dashboard-stats,
  .admin-dashboard-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .admin-dashboard-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .admin-dashboard-stats,
  .admin-dashboard-action-grid {
    grid-template-columns: 1fr;
  }

  .admin-dashboard-recent-row {
    grid-template-columns: 38px 1fr auto;
  }

  .admin-dashboard-recent-date {
    display: none;
  }
}

/* =========================================================
   ADMIN USERS
   ========================================================= */

.admin-users-page {
  width: 100%;
  max-width: 1600px;
}


/* ---------- Header ---------- */

.admin-users-header {
  margin-bottom: 18px;
}

.admin-users-header > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.admin-users-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.admin-users-title-icon {
  margin-top: 2px;

  color: var(--purple);

  font-size: 28px;
  line-height: 1;
}

.admin-users-title h2 {
  margin: 0;

  color: var(--text);

  font-family: 'Kanit', sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.15;
}

.admin-users-title p {
  margin: 5px 0 0;

  color: var(--muted);

  font-size: 13px;
}

.admin-users-refresh {
  margin-top: 9px;
}


/* ---------- Stats ---------- */

.admin-users-stats {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 15px;
}

.admin-users-stat-card {
  min-height: 128px;

  display: flex;
  align-items: center;

  gap: 18px;

  padding: 20px 24px;

  border: 1px solid var(--border);
  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(18, 30, 49, .98),
      rgba(9, 23, 39, .98)
    );
}

.admin-users-stat-icon {
  width: 58px;
  height: 58px;

  flex: 0 0 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background: rgba(28, 37, 64, .72);

  font-size: 29px;
}

.admin-users-stat-content {
  min-width: 0;
}

.admin-users-stat-number {
  margin-bottom: 2px;

  color: var(--text);

  font-family: 'Kanit', sans-serif;
  font-size: 31px;
  font-weight: 800;
  line-height: 1.05;
}

.admin-users-stat-title {
  color: var(--text);

  font-size: 15px;
  font-weight: 700;
}

.admin-users-stat-sub {
  margin-top: 2px;

  color: var(--muted);

  font-size: 11px;
  line-height: 1.4;
}


/* Card colors */

.stat-users-total
.admin-users-stat-icon {
  color: #a855f7;
}

.stat-users-total
.admin-users-stat-number {
  color: #e8eef7;
}


.stat-users-active
.admin-users-stat-icon {
  color: #34d399;
}

.stat-users-active
.admin-users-stat-number {
  color: #e8eef7;
}


.stat-users-seller
.admin-users-stat-icon {
  color: #3b82f6;
}

.stat-users-seller
.admin-users-stat-number {
  color: #e8eef7;
}


.stat-users-banned
.admin-users-stat-icon {
  color: #ff405e;
}

.stat-users-banned
.admin-users-stat-number {
  color: #e8eef7;
}


/* ---------- Main panel ---------- */

.admin-users-panel {
  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(17, 30, 49, .96),
      rgba(8, 21, 36, .96)
    );
}


/* ---------- Tabs ---------- */

.admin-users-tabs {
  min-height: 62px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding: 0 20px;

  border-bottom: 1px solid var(--border);
}

.admin-users-tab-list {
  display: flex;
  align-items: stretch;

  min-height: 61px;

  gap: 8px;
}

.admin-users-tab {
  position: relative;

  min-height: 61px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 0 18px;

  border: 0;

  background: transparent;

  color: var(--muted);

  font-family: 'Sarabun', sans-serif;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition:
    color .18s ease,
    background .18s ease;
}

.admin-users-tab:hover {
  color: var(--text);
}

.admin-users-tab.active {
  color: var(--text);
}

.admin-users-tab.active::after {
  content: '';

  position: absolute;

  left: 0;
  right: 0;
  bottom: -1px;

  height: 3px;

  border-radius: 999px 999px 0 0;

  background: var(--accent);
}

.admin-user-tab-active-dot {
  width: 17px;
  height: 17px;

  display: inline-block;

  border-radius: 50%;

  background: #34d399;

  box-shadow:
    0 0 12px rgba(52, 211, 153, .30);
}

.admin-users-result-count {
  color: var(--muted);

  font-size: 12px;

  white-space: nowrap;
}


/* ---------- Toolbar ---------- */

.admin-users-toolbar {
  display: grid;

  grid-template-columns:
    minmax(320px, 1.8fr)
    minmax(160px, .65fr)
    minmax(160px, .65fr)
    minmax(160px, .65fr);

  gap: 10px;

  padding: 12px 20px 14px;
}

.admin-users-search {
  min-width: 0;
  height: 43px;

  display: flex;
  align-items: center;

  gap: 10px;

  padding: 0 13px;

  border: 1px solid var(--border2);
  border-radius: 10px;

  background: rgba(9, 18, 33, .65);
}

.admin-users-search > span {
  color: #9bb7e8;

  font-size: 21px;
  line-height: 1;
}

.admin-users-search input {
  width: 100%;
  min-width: 0;

  border: 0;
  outline: 0;

  background: transparent;

  color: var(--text);

  font-family: 'Sarabun', sans-serif;
  font-size: 13px;
}

.admin-users-search input::placeholder {
  color: var(--dim);
}

.admin-users-search:focus-within {
  border-color: var(--accent);

  box-shadow:
    0 0 0 3px var(--accentDim);
}

.admin-users-select {
  width: 100%;
  height: 43px;

  padding: 0 13px;

  border: 1px solid var(--border2);
  border-radius: 10px;

  outline: 0;

  background: #0b1526;

  color: var(--text);

  font-family: 'Sarabun', sans-serif;
  font-size: 13px;

  cursor: pointer;
}

.admin-users-select:focus {
  border-color: var(--accent);

  box-shadow:
    0 0 0 3px var(--accentDim);
}


/* ---------- User list ---------- */

.admin-users-list {
  display: flex;
  flex-direction: column;

  gap: 8px;

  padding: 0 20px 18px;
}

.admin-user-row {
  min-height: 90px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 14px 18px;

  border: 1px solid var(--border);
  border-radius: 11px;

  background:
    rgba(12, 26, 44, .82);

  transition:
    background .18s ease,
    border-color .18s ease;
}

.admin-user-row:hover {
  border-color: var(--border2);

  background:
    rgba(17, 34, 56, .92);
}

.admin-user-row-main {
  min-width: 0;
  flex: 1;
}

.admin-user-row-title {
  display: flex;
  align-items: center;

  gap: 7px;

  flex-wrap: wrap;
}

.admin-user-row-title > strong {
  color: var(--text);

  font-family: 'Kanit', sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.admin-user-row-meta {
  display: flex;
  align-items: center;

  gap: 5px;

  margin-top: 4px;

  color: #9db0ce;

  font-size: 12px;

  flex-wrap: wrap;
}

.admin-user-meta-divider {
  color: var(--dim);
}

.admin-user-row-stats {
  display: flex;
  align-items: center;

  gap: 5px;

  margin-top: 4px;

  color: #9db0ce;

  font-size: 12px;

  flex-wrap: wrap;
}

.admin-user-row-stats strong {
  color: #b9c9e3;

  font-weight: 500;
}

.admin-user-row-action {
  flex: 0 0 auto;
}


/* ---------- Status badges ---------- */

.admin-user-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 23px;

  padding: 2px 9px;

  border: 1px solid transparent;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
}

.admin-user-status-badge.status-active {
  border-color: rgba(16, 185, 129, .30);

  background:
    rgba(16, 185, 129, .14);

  color: #34d399;
}

.admin-user-status-badge.status-suspended {
  border-color: rgba(245, 158, 11, .32);

  background:
    rgba(245, 158, 11, .14);

  color: #fbbf24;
}

.admin-user-status-badge.status-banned {
  border-color: rgba(239, 68, 68, .32);

  background:
    rgba(239, 68, 68, .14);

  color: #fb7185;
}


/* ---------- Role badges ---------- */

.admin-user-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 23px;

  padding: 2px 10px;

  border: 1px solid transparent;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1px;
}

/* User = blue */

.admin-user-role-badge.role-user {
  border-color:
    rgba(59, 130, 246, .42);

  background:
    rgba(59, 130, 246, .16);

  color: #60a5fa;
}


/* Seller = purple */

.admin-user-role-badge.role-seller {
  border-color:
    rgba(168, 85, 247, .48);

  background:
    rgba(126, 34, 206, .25);

  color: #c084fc;
}


/* Admin */

.admin-user-role-badge.role-admin {
  border-color:
    rgba(245, 158, 11, .42);

  background:
    rgba(245, 158, 11, .15);

  color: #fbbf24;
}


/* ---------- Empty ---------- */

.admin-users-empty {
  padding: 42px 20px;

  border: 1px dashed var(--border);
  border-radius: 11px;

  color: var(--muted);

  font-size: 13px;

  text-align: center;
}


/* ---------- Detail button ---------- */

.admin-user-row-action .btn {
  min-width: 112px;
}


/* ---------- Responsive ---------- */

@media (max-width: 1150px) {

  .admin-users-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .admin-users-toolbar {
    grid-template-columns:
      minmax(260px, 1.5fr)
      repeat(3, minmax(140px, 1fr));
  }

}


@media (max-width: 850px) {

  .admin-users-tabs {
    align-items: flex-start;
    flex-direction: column;

    gap: 0;

    padding-top: 4px;
  }

  .admin-users-tab-list {
    width: 100%;

    overflow-x: auto;
  }

  .admin-users-tab {
    flex: 0 0 auto;
  }

  .admin-users-result-count {
    width: 100%;

    padding: 10px 0 12px;
  }

  .admin-users-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .admin-users-search {
    grid-column: 1 / -1;
  }

}


@media (max-width: 650px) {

  .admin-users-stats {
    grid-template-columns: 1fr;
  }

  .admin-users-stat-card {
    min-height: 105px;

    padding: 16px;
  }

  .admin-users-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-users-search {
    grid-column: auto;
  }

  .admin-user-row {
    align-items: stretch;
    flex-direction: column;

    gap: 13px;
  }

  .admin-user-row-action {
    width: 100%;
  }

  .admin-user-row-action .btn {
    width: 100%;
  }

  .admin-users-tabs,
  .admin-users-toolbar,
  .admin-users-list {
    padding-left: 12px;
    padding-right: 12px;
  }

}

/* =========================================================
   ADMIN USER MASTER / DETAIL LAYOUT
   ========================================================= */

.admin-users-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);

  gap: 14px;
  align-items: start;
}

/* เปิด Detail แล้วค่อยแบ่งซ้าย / ขวา */
.admin-users-workspace.is-detail-open {
  grid-template-columns:
    minmax(390px, .64fr)
    minmax(0, 1fr);
}

.admin-user-detail-panel[hidden] {
  display: none;
}


/* =========================
   LEFT - USER LIST
   ========================= */

.admin-users-list-panel {
  min-width: 0;
}

.admin-users-workspace.is-detail-open
.admin-users-tabs {
  flex-direction: column;
  align-items: stretch;

  gap: 0;

  padding:
    0 12px;

  min-height: auto;
}

.admin-users-workspace
.admin-users-tab-list {
  width: 100%;

  min-height: 55px;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: thin;
}

.admin-users-workspace
.admin-users-tab {
  min-height: 55px;

  padding:
    0 13px;

  flex: 0 0 auto;

  white-space: nowrap;
}

.admin-users-workspace
.admin-users-result-count {
  align-self: flex-end;

  padding:
    8px 2px 10px;
}


/* Filters */

.admin-users-workspace.is-detail-open
.admin-users-toolbar {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 8px;

  padding:
    10px 12px 12px;
}

.admin-users-workspace.is-detail-open
.admin-users-search {
  grid-column: 1 / -1;

  height: 40px;
}

.admin-users-workspace
.admin-users-select {
  height: 38px;

  padding:
    0 9px;

  font-size: 12px;
}


/* List */

.admin-users-workspace
.admin-users-list {
  gap: 6px;

  padding:
    0 12px 14px;

  max-height: 680px;

  overflow-y: auto;

  scrollbar-width: thin;
}

.admin-users-workspace
.admin-user-row {
  min-height: 78px;

  padding:
    11px 12px;

  gap: 10px;

  border-radius: 9px;

  cursor: pointer;
}

.admin-users-workspace
.admin-user-row:hover {
  border-color:
    rgba(59, 130, 246, .55);

  background:
    rgba(16, 34, 58, .95);
}

.admin-users-workspace
.admin-user-row.is-selected {
  border-color:
    var(--accent);

  background:
    rgba(20, 48, 82, .94);

  box-shadow:
    inset 3px 0 0 var(--accent),
    0 0 0 1px rgba(59, 130, 246, .10);
}

.admin-users-workspace
.admin-user-row-title > strong {
  font-size: 13px;
}

.admin-users-workspace
.admin-user-row-meta,
.admin-users-workspace
.admin-user-row-stats {
  font-size: 10.5px;

  margin-top: 2px;
}

.admin-users-workspace
.admin-user-row-action .btn {
  min-width: 88px;

  padding:
    6px 9px;

  font-size: 11px;
}


/* =========================
   RIGHT - DETAIL PANEL
   ========================= */

.admin-user-detail-panel {
  min-width: 0;
  min-height: 560px;

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(12, 28, 47, .98),
      rgba(7, 20, 35, .98)
    );
}


/* Empty state */

.admin-user-detail-empty {
  min-height: 560px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding: 40px;

  text-align: center;
}

.admin-user-detail-empty-icon {
  width: 74px;
  height: 74px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 15px;

  border:
    1px solid var(--border);

  border-radius: 50%;

  background:
    rgba(139, 92, 246, .10);

  font-size: 30px;
}

.admin-user-detail-empty h3 {
  margin: 0;

  font-family:
    'Kanit',
    sans-serif;

  font-size: 18px;
}

.admin-user-detail-empty p {
  margin:
    5px 0 0;

  color: var(--muted);

  font-size: 12px;
}


/* Important hidden support */

.admin-user-detail-content[hidden],
.admin-user-detail-empty[hidden] {
  display: none;
}


/* Header */

.admin-user-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding:
    22px 22px 16px;
}

.admin-user-detail-profile {
  display: flex;
  align-items: center;

  gap: 17px;

  min-width: 0;
}

.admin-user-detail-avatar {
  width: 72px;
  height: 72px;

  flex:
    0 0 72px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border:
    1px solid rgba(168, 85, 247, .38);

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #7c3aed,
      #581c87
    );

  color: #fff;

  font-family:
    'Kanit',
    sans-serif;

  font-size: 28px;
  font-weight: 700;
}

.admin-user-detail-avatar img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.admin-user-detail-profile-text {
  min-width: 0;
}

.admin-user-detail-name-row {
  display: flex;
  align-items: center;

  gap: 8px;

  flex-wrap: wrap;
}

.admin-user-detail-name-row h2 {
  margin: 0;

  color: var(--text);

  font-family:
    'Kanit',
    sans-serif;

  font-size: 20px;
  font-weight: 700;
}

.admin-user-detail-email,
.admin-user-detail-joined {
  margin-top: 5px;

  color: #9db0ce;

  font-size: 12px;
}

.admin-user-detail-close {
  width: 34px;
  height: 34px;

  flex:
    0 0 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;

  background: transparent;

  color: #a9b9d2;

  font-size: 18px;

  cursor: pointer;
}

.admin-user-detail-close:hover {
  color: #fff;
}


/* Moderation actions */

.admin-user-detail-actions {
  display: flex;
  justify-content: flex-end;

  gap: 8px;

  padding:
    0 22px 16px;
}

.admin-user-detail-actions:empty {
  display: none;
}


/* Detail tabs */

.admin-user-detail-tabs {
  display: flex;
  align-items: center;

  gap: 5px;

  padding:
    0 14px;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);

  overflow-x: auto;

  scrollbar-width: thin;
}

.admin-user-detail-tab {
  position: relative;

  min-height: 48px;

  flex:
    0 0 auto;

  padding:
    0 13px;

  border: 0;

  background: transparent;

  color: var(--muted);

  font-family:
    'Sarabun',
    sans-serif;

  font-size: 12px;
  font-weight: 600;

  cursor: pointer;
}

.admin-user-detail-tab:hover {
  color: var(--text);
}

.admin-user-detail-tab.active {
  color: var(--text);
}

.admin-user-detail-tab.active::after {
  content: '';

  position: absolute;

  left: 8px;
  right: 8px;
  bottom: -1px;

  height: 3px;

  border-radius:
    999px 999px 0 0;

  background:
    var(--accent);
}


/* Body */

.admin-user-detail-body {
  padding: 16px;

  max-height: 590px;

  overflow-y: auto;

  scrollbar-width: thin;
}

.admin-user-detail-loading {
  padding: 55px 20px;

  color: var(--muted);

  text-align: center;
}


/* =========================
   DETAIL SECTIONS
   ========================= */

.admin-user-detail-section {
  margin-bottom: 14px;

  padding: 14px;

  border:
    1px solid var(--border);

  border-radius: 11px;

  background:
    rgba(15, 32, 53, .72);
}

.admin-user-detail-section:last-child {
  margin-bottom: 0;
}

.admin-user-detail-section-title {
  margin:
    0 0 12px;

  color: var(--text);

  font-family:
    'Kanit',
    sans-serif;

  font-size: 14px;
  font-weight: 700;
}


/* General info */

.admin-user-detail-info-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px 18px;
}

.admin-user-detail-info-item {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  min-height: 35px;

  padding:
    4px 0;

  border-bottom:
    1px solid rgba(45, 61, 90, .42);
}

.admin-user-detail-info-item span {
  color: var(--muted);

  font-size: 11px;
}

.admin-user-detail-info-item strong {
  min-width: 0;

  color: var(--text);

  font-size: 11.5px;
  font-weight: 600;

  text-align: right;

  overflow-wrap: anywhere;
}


/* Metrics */

.admin-user-detail-metrics {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 8px;

  margin-top: 10px;
}

.admin-user-detail-metric {
  min-height: 78px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 4px;

  padding: 11px;

  border:
    1px solid var(--border);

  border-radius: 9px;

  background:
    rgba(8, 21, 37, .65);
}

.admin-user-detail-metric > span {
  color: var(--muted);

  font-size: 10.5px;
}

.admin-user-detail-metric > strong {
  color: var(--text);

  font-family:
    'Kanit',
    sans-serif;

  font-size: 15px;
  font-weight: 700;
}


/* Stars */

.admin-user-detail-stars {
  color: #fbbf24;

  font-size: 12px;

  letter-spacing: 1px;

  white-space: nowrap;
}


/* =========================
   PRODUCTS / PURCHASES
   ========================= */

.admin-user-detail-list {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.admin-user-detail-list-row {
  display: grid;

  grid-template-columns:
    48px minmax(0, 1fr) auto;

  align-items: center;

  gap: 11px;

  min-height: 66px;

  padding: 9px 11px;

  border:
    1px solid var(--border);

  border-radius: 9px;

  background:
    rgba(13, 29, 49, .75);
}

.admin-user-detail-list-row.is-clickable {
  cursor: pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.admin-user-detail-list-row.is-clickable:hover {
  border-color:
    rgba(59, 130, 246, .55);

  background:
    rgba(18, 40, 67, .92);

  transform:
    translateY(-1px);
}

.admin-user-detail-list-row.is-clickable:focus-visible {
  outline: none;

  border-color:
    var(--accent);

  box-shadow:
    0 0 0 3px var(--accentDim);
}

.admin-user-detail-product-thumb,
.admin-user-detail-list-icon {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border-radius: 8px;

  background:
    #081322;

  font-size: 19px;
}

.admin-user-detail-product-thumb img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.admin-user-detail-list-main {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}

.admin-user-detail-list-main strong {
  color: var(--text);

  font-size: 12px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-detail-list-main span,
.admin-user-detail-list-main small {
  color: var(--muted);

  font-size: 10.5px;
}

.admin-user-detail-list-value {
  color: var(--text);

  font-family:
    'Kanit',
    sans-serif;

  font-size: 13px;
  font-weight: 700;

  white-space: nowrap;
}


/* =========================
   REVIEWS
   ========================= */

.admin-user-detail-review {
  padding: 12px;

  border:
    1px solid var(--border);

  border-radius: 9px;

  background:
    rgba(13, 29, 49, .75);
}

.admin-user-detail-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.admin-user-detail-review-head strong {
  color: var(--text);

  font-size: 12px;
}

.admin-user-detail-review p {
  margin:
    7px 0 5px;

  color: #b8c6dc;

  font-size: 11px;
  line-height: 1.5;
}

.admin-user-detail-review small {
  color: var(--dim);

  font-size: 10px;
}


/* Empty content */

.admin-user-detail-empty-list {
  padding:
    60px 20px;

  color: var(--muted);

  text-align: center;

  font-size: 12px;
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1250px) {

  .admin-users-workspace.is-detail-open {
    grid-template-columns:
      minmax(340px, .72fr)
      minmax(0, 1fr);
  }

  .admin-user-detail-metrics {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 980px) {

  .admin-users-workspace {
    grid-template-columns: 1fr;
  }

  .admin-users-workspace
  .admin-users-list {
    max-height: none;
  }

  .admin-user-detail-panel {
    min-height: 400px;
  }

  .admin-user-detail-empty {
    min-height: 400px;
  }

}


@media (max-width: 650px) {

  .admin-users-workspace
  .admin-users-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-users-workspace
  .admin-users-search {
    grid-column: auto;
  }

  .admin-user-detail-header {
    padding:
      16px;
  }

  .admin-user-detail-profile {
    align-items: flex-start;

    gap: 11px;
  }

  .admin-user-detail-avatar {
    width: 54px;
    height: 54px;

    flex-basis: 54px;

    font-size: 21px;
  }

  .admin-user-detail-name-row h2 {
    font-size: 17px;
  }

  .admin-user-detail-actions {
    justify-content: stretch;

    padding:
      0 16px 14px;
  }

  .admin-user-detail-actions .btn {
    flex: 1;
  }

  .admin-user-detail-info-grid,
  .admin-user-detail-metrics {
    grid-template-columns: 1fr;
  }

  .admin-user-detail-list-row {
    grid-template-columns:
      42px minmax(0, 1fr);
  }

  .admin-user-detail-list-value {
    grid-column: 2;

    justify-self: start;
  }

}

/* =========================================================
   ADMIN PRODUCT DETAIL MODAL
   ========================================================= */

.admin-user-product-detail-modal {
  width: min(100%, 980px);
  max-height: calc(100vh - 48px);

  padding: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid var(--border2);

  border-radius: 16px;

  background:
    #0b1728;

  box-shadow:
    0 24px 80px rgba(0, 0, 0, .55);
}


/* =========================
   HEADER
   ========================= */

.admin-user-product-detail-head {
  min-height: 76px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding:
    16px 20px;

  flex: 0 0 auto;

  border-bottom:
    1px solid var(--border);

  background:
    #0d1b2e;
}

.admin-user-product-detail-title {
  color: var(--text);

  font-family:
    'Kanit',
    sans-serif;

  font-size: 18px;
  font-weight: 700;
}

.admin-user-product-detail-subtitle {
  margin-top: 3px;

  color: var(--muted);

  font-size: 11px;
}

.admin-user-product-detail-close {
  width: 36px;
  height: 36px;

  flex:
    0 0 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border:
    1px solid var(--border);

  border-radius: 9px;

  background:
    rgba(255, 255, 255, .025);

  color:
    var(--muted);

  font-size: 18px;

  cursor: pointer;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.admin-user-product-detail-close:hover {
  color: #fff;

  border-color:
    var(--accent);

  background:
    var(--accentDim);
}


/* =========================
   BODY
   ========================= */

.admin-user-product-detail-body {
  min-height: 0;

  padding: 22px;

  overflow-y: auto;

  scrollbar-width: thin;
}

.admin-user-product-loading {
  min-height: 320px;

  display: flex;
  align-items: center;
  justify-content: center;

  color:
    var(--muted);

  font-size: 13px;
}


/* =========================
   TOP PRODUCT AREA
   ========================= */

.admin-user-product-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(280px, .85fr);

  gap: 22px;

  align-items: start;
}


/* =========================
   GALLERY
   ========================= */

.admin-user-product-gallery {
  min-width: 0;
}

.admin-user-product-main-image {
  width: 100%;

  aspect-ratio:
    16 / 9;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius: 12px;

  background:
    #07111e;
}

.admin-user-product-main-image > img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;
}

.admin-user-product-no-image {
  min-height: 220px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;

  color:
    var(--muted);
}

.admin-user-product-no-image span {
  font-size: 42px;
}

.admin-user-product-no-image strong {
  color:
    var(--muted);

  font-size: 12px;
  font-weight: 500;
}


/* Thumbnails */

.admin-user-product-thumbs {
  display: flex;

  gap: 8px;

  margin-top: 10px;

  padding-bottom: 3px;

  overflow-x: auto;

  scrollbar-width: thin;
}

.admin-user-product-thumb {
  width: 74px;
  height: 58px;

  flex:
    0 0 74px;

  padding: 0;

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius: 8px;

  background:
    #07111e;

  cursor: pointer;

  opacity: .65;

  transition:
    opacity .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.admin-user-product-thumb:hover {
  opacity: 1;

  border-color:
    rgba(59, 130, 246, .65);
}

.admin-user-product-thumb.is-active {
  opacity: 1;

  border-color:
    var(--accent);

  box-shadow:
    0 0 0 2px
    rgba(59, 130, 246, .14);
}

.admin-user-product-thumb img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


/* =========================
   PRODUCT SUMMARY
   ========================= */

.admin-user-product-summary {
  min-width: 0;

  padding: 18px;

  border:
    1px solid var(--border);

  border-radius: 12px;

  background:
    rgba(12, 27, 46, .9);
}

.admin-user-product-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 10px;
}

.admin-user-product-game {
  color:
    var(--accent2);

  font-size: 12px;
  font-weight: 600;
}

.admin-user-product-name {
  margin:
    0 0 8px !important;

  color:
    var(--text);

  font-family:
    'Kanit',
    sans-serif;

  font-size: 22px;
  line-height: 1.35;

  word-break: break-word;
}

.admin-user-product-price {
  margin-bottom: 18px;

  color:
    var(--accent2);

  font-family:
    'Kanit',
    sans-serif;

  font-size: 28px;
  font-weight: 700;
}

.admin-user-product-price span {
  margin-left: 3px;

  color:
    var(--muted);

  font-size: 13px;
  font-weight: 500;
}


/* Summary small cards */

.admin-user-product-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}

.admin-user-product-summary-grid > div {
  min-width: 0;

  padding:
    10px 11px;

  border:
    1px solid var(--border);

  border-radius: 8px;

  background:
    rgba(6, 17, 30, .5);
}

.admin-user-product-summary-grid span {
  display: block;

  margin-bottom: 3px;

  color:
    var(--muted);

  font-size: 10px;
}

.admin-user-product-summary-grid strong {
  display: block;

  overflow: hidden;

  color:
    var(--text);

  font-size: 12px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================
   DETAIL SECTIONS
   ========================= */

.admin-user-product-section {
  margin-top: 16px;

  padding: 16px;

  border:
    1px solid var(--border);

  border-radius: 11px;

  background:
    rgba(12, 27, 46, .72);
}

.admin-user-product-section > h3 {
  margin:
    0 0 12px;

  color:
    var(--text);

  font-family:
    'Kanit',
    sans-serif;

  font-size: 14px;
  font-weight: 600;
}


/* Description */

.admin-user-product-description {
  color:
    #becbe0;

  font-size: 12px;
  line-height: 1.75;

  white-space: pre-wrap;
  word-break: break-word;
}


/* =========================
   GAME ATTRIBUTES
   ========================= */

.admin-user-product-attributes {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}

.admin-user-product-attribute {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  min-width: 0;

  padding:
    10px 12px;

  border:
    1px solid var(--border);

  border-radius: 8px;

  background:
    rgba(7, 18, 32, .62);
}

.admin-user-product-attribute span {
  color:
    var(--muted);

  font-size: 11px;
}

.admin-user-product-attribute strong {
  color:
    var(--text);

  font-size: 12px;
  font-weight: 600;

  text-align: right;

  word-break: break-word;
}

.admin-user-product-empty {
  padding:
    24px 12px;

  color:
    var(--muted);

  text-align: center;

  font-size: 11px;
}


/* =========================
   PRODUCT META
   ========================= */

.admin-user-product-meta-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}

.admin-user-product-meta-grid > div {
  padding:
    10px 12px;

  border:
    1px solid var(--border);

  border-radius: 8px;

  background:
    rgba(7, 18, 32, .62);
}

.admin-user-product-meta-grid span {
  display: block;

  margin-bottom: 4px;

  color:
    var(--muted);

  font-size: 10px;
}

.admin-user-product-meta-grid strong {
  color:
    var(--text);

  font-size: 12px;
  font-weight: 600;
}


/* =========================
   MODERATION
   ========================= */

.admin-user-product-warning {
  border-color:
    rgba(245, 158, 11, .3);

  background:
    rgba(245, 158, 11, .07);

  color:
    #f8c66c;

  font-size: 12px;
}

.admin-user-product-warning > h3 {
  color:
    #fbbf24;
}

.admin-user-product-actions {
  display: flex;
  justify-content: flex-end;

  gap: 8px;

  margin-top: 16px;
}


/* =========================
   RESPONSIVE PRODUCT DETAIL
   ========================= */

@media (max-width: 820px) {

  .admin-user-product-detail-modal {
    max-height:
      calc(100vh - 24px);
  }

  .admin-user-product-layout {
    grid-template-columns:
      1fr;
  }

  .admin-user-product-main-image {
    aspect-ratio:
      16 / 10;
  }

}


@media (max-width: 560px) {

  .modal-backdrop {
    padding: 10px;
  }

  .admin-user-product-detail-head {
    min-height: 66px;

    padding:
      13px 14px;
  }

  .admin-user-product-detail-title {
    font-size: 16px;
  }

  .admin-user-product-detail-body {
    padding: 13px;
  }

  .admin-user-product-summary {
    padding: 14px;
  }

  .admin-user-product-name {
    font-size: 19px;
  }

  .admin-user-product-price {
    font-size: 24px;
  }

  .admin-user-product-summary-grid,
  .admin-user-product-attributes,
  .admin-user-product-meta-grid {
    grid-template-columns:
      1fr;
  }

  .admin-user-product-section {
    padding: 13px;
  }

}

/* ===== Admin Games: status dropdown ===== */

#adminGameStatusFilter {
  background: #0b1526;
  color: var(--text);

  font-family: 'Sarabun', sans-serif;
  font-size: 13px;

  cursor: pointer;
}

#adminGameStatusFilter option {
  background: #0b1526;
  color: var(--text);
}

/* ===== Admin Seller Verification: status dropdown ===== */

#adminSellerVerificationStatus {
  color: #ffffff;
}

#adminSellerVerificationStatus option {
  background: #1c2540;
  color: #e8eef7;
}

/* ===== My Listings Preview ===== */

.my-product-card {
  margin-bottom: 12px;
  padding: 14px 18px;

  display: grid;
  grid-template-columns:
    132px
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 18px;
}

.my-product-preview {
  width: 132px;
  height: 92px;

  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--card2);
}

.my-product-preview-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.my-product-preview-empty {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--muted);
  font-size: 12px;
}

.my-product-info {
  min-width: 0;
}

.my-product-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-weight: 700;
  font-size: 15px;
}

.my-product-meta {
  margin-top: 4px;

  color: var(--muted);
  font-size: 13px;
}

.my-product-price {
  margin-top: 8px;

  color: var(--accent);
  font-size: 20px;
  font-weight: 800;
}

.my-product-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .my-product-card {
    grid-template-columns:
      110px
      minmax(0, 1fr);
  }

  .my-product-preview {
    width: 110px;
    height: 80px;
  }

  .my-product-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .my-product-card {
    grid-template-columns: 1fr;
  }

  .my-product-preview {
    width: 100%;
    height: 160px;
  }

  .my-product-actions {
    grid-column: auto;
    justify-content: flex-start;
  }
}

/* ===== Order Detail Seller ===== */

.order-detail-seller-row {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-top: 7px;

  color: var(--muted);
  font-size: 13px;
}

.order-detail-seller-link {
  border: 0;
  padding: 0;

  background: transparent;
  color: var(--accent);

  font: inherit;
  font-weight: 700;

  cursor: pointer;
}

.order-detail-seller-link:hover {
  text-decoration: underline;
}

.order-detail-seller-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.order-detail-seller-action {
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.order-detail-seller-action .btn {
  white-space: nowrap;
}


/* Tablet / Small screen */

@media (max-width: 600px) {

  .order-detail-product-card {
    flex-wrap: wrap !important;
  }

  .order-detail-seller-action {
    width: 100%;
    justify-content: flex-end;
  }
}


/* Mobile */

@media (max-width: 420px) {

  .order-detail-seller-action {
    width: 100%;
  }

  .order-detail-seller-action .btn {
    width: 100%;
  }
}

/* ===== Trade History Seller Link ===== */

.history-trade-seller-link {
  border: 0;
  padding: 0;
  margin: 0;

  background: transparent;
  color: var(--accent);

  font: inherit;
  font-weight: 700;

  cursor: pointer;
  vertical-align: baseline;
}

.history-trade-seller-link:hover {
  text-decoration: underline;
}

.history-trade-seller-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ===== Public Seller Contact Button ===== */

.seller-public-main {
  min-width: 0;
  flex: 1;
}

.seller-public-actions {
  margin-left: auto;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  flex-shrink: 0;
}

.seller-public-contact-btn {
  min-width: 168px;
  min-height: 44px;

  padding: 10px 18px;

  font-size: 14px;
  font-weight: 700;

  white-space: nowrap;
}


/* Tablet */

@media (max-width: 720px) {

  .seller-public-hero {
    flex-wrap: wrap;
  }

  .seller-public-actions {
    width: 100%;
    margin-left: 0;

    justify-content: flex-end;
  }
}


/* Mobile */

@media (max-width: 520px) {

  .seller-public-actions {
    width: 100%;
  }

  .seller-public-contact-btn {
    width: 100%;
  }
}

/* ===== Valorant Account Verification ===== */

.create-product-valorant-verification {
  margin-bottom: 18px;
  padding: 16px;

  border: 1px solid var(--border2);
  border-radius: 14px;

  background: var(--card2);
}

.create-product-valorant-verification[hidden] {
  display: none;
}

.create-product-valorant-verification-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 16px;
}

.create-product-valorant-verification-title {
  color: var(--text);

  font-size: 15px;
  font-weight: 800;
}

.create-product-valorant-verification-subtitle {
  margin-top: 4px;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.6;
}

.create-product-valorant-fields {
  gap: 12px;
  margin-bottom: 4px;
}

.create-product-valorant-fields .inp-group {
  margin-bottom: 10px;
}

.create-product-valorant-verification-feedback {
  min-height: 18px;
  margin-top: 10px;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.6;
}

.create-product-valorant-verification-feedback.is-success {
  color: var(--success);
  font-weight: 700;
}

.create-product-valorant-verification-feedback.is-error {
  color: var(--danger);
  font-weight: 700;
}


/* Mobile */

@media (max-width: 520px) {

  .create-product-valorant-verification {
    padding: 14px;
  }

  .create-product-valorant-verification-head {
    flex-direction: column;
    gap: 8px;
  }

  .create-product-valorant-fields {
    grid-template-columns: 1fr;
  }

  .create-product-valorant-verification
  #create-product-valorant-verify-button {
    width: 100%;
  }
}

.ui-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;

  background-color: currentColor;

  vertical-align: -4px;
}

.ui-emoji {
  display: inline-block;
  width: 1em;
  height: 1em;
  object-fit: contain;
  vertical-align: -0.125em;
  flex: none;
}

.emoji-search-input {
  background-image: url('../icons/magnifyingGlass.svg');
  background-repeat: no-repeat;
  background-size: 1em 1em;
  background-position: 14px center;
  padding-left: 34px;
}

.ui-icon-wallet {
  -webkit-mask:
    url('../icons/wallet.svg')
    center / contain
    no-repeat;

  mask:
    url('../icons/wallet.svg')
    center / contain
    no-repeat;
}

.product-verified-badge {
  display: inline-flex;
  align-items: center;

  padding: 4px 8px;

  border: 1px solid
    rgba(16, 185, 129, 0.28);

  border-radius: 999px;

  background:
    rgba(16, 185, 129, 0.08);

  color: var(--success);

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Signed-in homepage search (B1): scoped to avoid changing marketplace or admin layouts. */
#pg-home-user .home-marketplace-search {
  margin-bottom: 28px;
}
#pg-home-user .home-marketplace-search-heading h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}
#pg-home-user .home-marketplace-search-heading p {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 16px;
}
#pg-home-user .home-marketplace-search-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
#pg-home-user .home-marketplace-search-form .inp {
  flex: 1 1 220px;
  min-width: 0;
}
#pg-home-user .home-marketplace-search-form .btn[hidden],
#pg-home-user .home-marketplace-results[hidden] {
  display: none;
}
#pg-home-user .home-marketplace-results {
  margin-bottom: 28px;
}
#pg-home-user .home-marketplace-results-header {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
#pg-home-user #homeMarketplaceResultCount {
  font-size: 13px;
  color: var(--muted);
}
#pg-home-user .home-marketplace-message {
  grid-column: 1 / -1;
  padding: 28px;
  text-align: center;
  color: var(--muted);
}
@media (max-width: 560px) {
  #pg-home-user .home-marketplace-search-form .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Signed-in dashboard: game category, price, sort and paging controls (B2-B4). */
#pg-home-user .home-marketplace-game-filter {
  margin-top: 18px;
}
#pg-home-user .home-marketplace-filter-label,
#pg-home-user .home-marketplace-filter-field span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 9px;
}
#pg-home-user .home-marketplace-game-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#pg-home-user .home-marketplace-game-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--text);
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
#pg-home-user .home-marketplace-game-chip:hover {
  border-color: var(--accent);
}
#pg-home-user .home-marketplace-game-chip.active {
  background: var(--accentDim);
  border-color: var(--accent);
  color: var(--accent);
}
#pg-home-user .home-marketplace-game-chip:focus-visible,
#pg-home-user .home-marketplace-page-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#pg-home-user .home-marketplace-game-image {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 6px;
}
#pg-home-user .home-marketplace-game-status {
  color: var(--muted);
  font-size: 12px;
}
#pg-home-user .home-marketplace-filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
#pg-home-user .home-marketplace-filter-field {
  display: block;
  min-width: 0;
}
#pg-home-user .home-marketplace-filter-field .inp {
  width: 100%;
}
#pg-home-user .home-marketplace-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
}
#pg-home-user .home-marketplace-pagination[hidden] {
  display: none;
}
#pg-home-user .home-marketplace-page-btn {
  padding: 8px 11px;
  min-width: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
#pg-home-user .home-marketplace-page-btn.active {
  color: var(--accent);
  background: var(--accentDim);
  border-color: var(--accent);
}
#pg-home-user .home-marketplace-page-btn:disabled {
  cursor: default;
  opacity: .45;
}
@media (max-width: 580px) {
  #pg-home-user .home-marketplace-filter-row { grid-template-columns: minmax(0, 1fr); }
}

/* Fee settings only: scoped to admin dashboard. */
#pg-admin-dashboard .gm-fee-panel { margin:24px 0; padding:22px; }
#pg-admin-dashboard .gm-fee-panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
#pg-admin-dashboard .gm-fee-panel-head h3 { margin:0 0 5px; font-size:18px; font-weight:700; }
#pg-admin-dashboard .gm-fee-panel-head p { margin:0; font-size:12px; color:var(--muted); }
#pg-admin-dashboard .gm-fee-current { margin-top:18px; border:1px solid var(--border); border-radius:12px; background:var(--card2); padding:16px 18px; }
#pg-admin-dashboard .gm-fee-current-value { color:var(--accent); font-size:30px; line-height:1.25; font-weight:800; }
#pg-admin-dashboard .gm-fee-current-note { color:var(--muted); font-size:12px; overflow-wrap:anywhere; margin-top:5px; }
#pg-admin-dashboard .gm-fee-form { display:grid; gap:10px; margin-top:16px; }
#pg-admin-dashboard .gm-fee-form[hidden] { display:none; }
#pg-admin-dashboard .gm-fee-form label { font-size:13px; font-weight:600; }
#pg-admin-dashboard .gm-fee-form .inp { max-width:550px; width:100%; }
#pg-admin-dashboard .gm-fee-preview { border:1px solid var(--border); border-radius:9px; background:var(--card2); color:var(--muted); font-size:13px; padding:12px; }
#pg-admin-dashboard .gm-fee-actions { display:flex; gap:9px; flex-wrap:wrap; }
#pg-admin-dashboard .gm-fee-status { font-size:13px; margin-top:11px; }
#pg-admin-dashboard .gm-fee-status.error { color:var(--danger); }
@media (max-width:560px) {
  #pg-admin-dashboard .gm-fee-panel { padding:15px; }
  #pg-admin-dashboard .gm-fee-actions .btn { flex:1; }
}

/* Signed-in home marketplace: one search/filter/results panel (no gradients). */
#pg-home-user .home-marketplace-search {
  padding: 20px;
  margin-bottom: 0;
}
#pg-home-user .home-marketplace-search-heading h2 { font-size: 21px; }
#pg-home-user .home-marketplace-input-wrap {
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
}
#pg-home-user .home-marketplace-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  pointer-events: none;
}
#pg-home-user .home-marketplace-input-wrap .inp {
  width: 100%;
  padding-left: 42px;
}
#pg-home-user .home-marketplace-results {
  margin: 22px 0 0;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
#pg-home-user .home-marketplace-results-header { margin-bottom: 16px; }
#pg-home-user .home-marketplace-results-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}
#pg-home-user .home-marketplace-results .grid3 { gap: 14px; }
#pg-home-user .home-marketplace-results .card.card-hover {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
}
#pg-home-user .home-marketplace-results .card.card-hover > .flex-between { margin-top: auto; }
@media (max-width: 1100px) {
  #pg-home-user .home-marketplace-results .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #pg-home-user .container > div:first-child { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 580px) {
  #pg-home-user .home-marketplace-search { padding: 14px; }
  #pg-home-user .home-marketplace-search-form { gap: 8px; }
  #pg-home-user .home-marketplace-results .grid3 { grid-template-columns: minmax(0, 1fr); }
}

/* GameMarket SVG icon harmonization: visuals only. */
#navLinks .nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
#navLinks .nav-menu-icon{width:17px;height:17px;flex-shrink:0}
.dropdown-item .ui-emoji,.admin-nav-item .ui-emoji{width:16px;height:16px;margin-right:5px}
.devbtn .ui-emoji,.btn .ui-emoji,.sec-title .ui-emoji{width:1.12em;height:1.12em}
#pg-home-user .stat-card .ui-emoji,.admin-dashboard-stat-icon .ui-emoji{width:1em;height:1em}