/* ===========================
   Core Theme Tokens
   =========================== */

:root {
  --bg:        radial-gradient(circle at 20% 20%, #0f172a 0%, #000212 70%);
  --panel:     rgba(21, 28, 44, 0.8);
  --panel-solid:#151c2c;
  --panel2:    rgba(13, 20, 34, 0.75);
  --panel-hover: rgba(34, 44, 73, 0.82);

  --card-bg:   rgba(16,22,38,0.7);
  --card-border: rgba(255,255,255,.07);

  --border:    rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);

  --text:      #eef2ff;
  --text-dim:  #c7cae6;
  --muted:     #8f96b8;

  --accent:           #4a7aff;
  --accent-glow:      rgba(74,122,255,.4);
  --accent-grad:      radial-gradient(circle at 0% 0%, #4a7aff 0%, #1d2c8d 60%);
  --accent-border:    rgba(74,122,255,.5);

  --danger:           #dc3545;
  --danger-border:    rgba(220,53,69,.4);
  --danger-glow:      rgba(220,53,69,.4);

  --success:          #22c55e;

  --chip-bg:          rgba(30,37,61,.6);
  --chip-border:      rgba(255,255,255,.08);

  --chip-admin:       linear-gradient(135deg,#5b2bd4 0%,#2a145f 60%);
  --chip-staff:       linear-gradient(135deg,#1f8356 0%,#0f412b 60%);
  --chip-sponsored:   linear-gradient(135deg,#8d680a 0%,#3a2d06 60%);
  --chip-danger-bg:   linear-gradient(135deg,#611822 0%,#2e0b11 60%);
  --chip-verified-bg: linear-gradient(135deg,#174a2f 0%,#0d271a 60%);
  --chip-verified-text:#7bd88f;

  --donor-diamond:    radial-gradient(circle at 0% 0%, #9d72ff 0%, #2f1f58 60%);
  --donor-plat:       radial-gradient(circle at 0% 0%, #8ae3ff 0%, #1e2e4f 60%);
  --donor-gold:       radial-gradient(circle at 0% 0%, #ffd24a 0%, #2d2a14 60%);
  --donor-bronze:     radial-gradient(circle at 0% 0%, #c28d5a 0%, #3a2511 60%);
  --donor-silver:     radial-gradient(circle at 0% 0%, #cfd8ff 0%, #2f2f4b 60%);

  --msg-me:           rgba(42, 54, 92, 0.8);
  --msg-other:        rgba(27, 35, 58, 0.8);

  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill:999px;

  --gap:12px;
  --shadow-card:0 30px 80px rgba(0,0,0,.8);

  --fast: 120ms;
  --med:  200ms;
  --slow: 320ms;

  /* Layout spacers */
  --public-header-h: auto;
  --admin-header-h:  auto;
  --footer-pad-y:    24px;
}

/* ===========================
   Global / Typography
   =========================== */

body.app-bg {
  background: var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
  margin:0;
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--accent);
  text-decoration:none;
  transition: color var(--fast) ease;
}
a:hover {
  color:#6f8fff;
  text-decoration:underline;
}

.text-light  { color: var(--text); }
.text-danger { color: var(--danger); }
.text-center { text-align:center; }
.text-right  { text-align:right; }

.muted { color: var(--muted); }
.tiny  { font-size:12px; line-height:1.3; }
.small { font-size:13px; line-height:1.35; }

.username-big   { font-size:16px; font-weight:600; color:#fff; }
.username-small { font-size:14px; font-weight:600; color:#fff; }

.uid { color:var(--muted); }

.mt-1 { margin-top:4px; }
.mt-2 { margin-top:8px; }
.mt-3 { margin-top:12px; }
.mb-1 { margin-bottom:4px; }
.mb-2 { margin-bottom:8px; }
.mb-3 { margin-bottom:12px; }
.ml-1 { margin-left:4px; }
.ml-2 { margin-left:8px; }
.mr-2 { margin-right:8px; }
.ml-auto { margin-left:auto; }

.row-flex { display:flex; align-items:flex-start; }
.row-flex.wrap { flex-wrap:wrap; }
.row-flex.between { justify-content:space-between; }
.align-right { text-align:right; }
.flex-grow { flex:1; }

.grid-2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
@media(max-width:800px){
  .grid-2 { grid-template-columns:1fr; }
}

.page-wrap {
  padding:24px 16px 80px 16px;
  max-width:1280px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.page-section {
  margin-bottom:32px;
  position:relative;
  z-index:2;
  animation: fadeUp var(--slow) ease both;
}

.center-col {
  max-width:380px;
  margin:48px auto;
}

/* ===========================
   Animations
   =========================== */

@keyframes fadeUp {
  0%   { opacity:0; transform:translateY(8px) scale(.98); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}

@keyframes pulseGlowBlue {
  0%   { box-shadow:0 0 8px rgba(74,122,255,.4),0 0 40px rgba(74,122,255,.15); }
  100% { box-shadow:0 0 20px rgba(74,122,255,.7),0 0 60px rgba(74,122,255,.25); }
}

@keyframes pulseGlowRed {
  0%   { box-shadow:0 0 8px rgba(220,53,69,.4),0 0 40px rgba(220,53,69,.15); }
  100% { box-shadow:0 0 20px rgba(220,53,69,.7),0 0 60px rgba(220,53,69,.25); }
}

.glass {
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* ===========================
   Cards / Panels / Sections
   =========================== */

.card {
  background: var(--card-bg);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border:1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  position:relative;
  overflow:hidden;
  transition: all var(--med) ease;
  padding:16px;
}

.card:hover {
  box-shadow:0 40px 120px rgba(0,0,0,.9),
             0 0 60px rgba(74,122,255,.07);
  transform:translateY(-2px) scale(1.01);
  border-color:var(--accent-border);
}

.card-subsection {
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  padding:16px;
  margin-bottom:24px;
  position:relative;
  transition:all var(--med) ease;
}
.card-subsection:last-child {
  margin-bottom:0;
}
.card-subsection:hover {
  background: var(--panel-hover);
  border-color: var(--accent-border);
  box-shadow:0 20px 60px rgba(0,0,0,.8),
             0 0 40px rgba(74,122,255,.1);
}

.p-2 { padding:8px; }
.p-3 { padding:12px; }

.divider {
  border:0;
  border-top:1px solid var(--border);
  margin:16px 0;
  opacity:.5;
}

/* ===========================
   Headers / Nav Bars
   =========================== */

/* Public header */
.public-header {
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(16,22,38,0.6);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:0 30px 80px rgba(0,0,0,.8);
  padding-top:12px;
  padding-bottom:12px;
  margin-bottom:24px; /* space before first card */
}

/* Admin header */
.admin-header {
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(10,10,10,0.6);
  border-bottom:1px solid #333;
  box-shadow:0 40px 120px rgba(0,0,0,.9);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  padding-top:12px;
  padding-bottom:12px;
  margin-bottom:24px;
}

.header-inner {
  max-width:1280px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0 16px;
}

/* public header layout: brand+nav left / user right on single row */
.header-left,
.header-right {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
}

/* For public header, we want row on desktop */
.public-header .header-inner {
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:space-between;
}
@media(max-width:700px){
  .public-header .header-inner {
    flex-direction:column;
    align-items:flex-start;
  }
  .header-right {
    width:100%;
    justify-content:flex-start;
  }
}

/* Admin header has two rows: top-row and nav row */
.admin-inner {
  flex-direction:column;
  align-items:stretch;
}
.admin-top-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Brand */
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1.2;
  color:#fff;
  text-decoration:none;
  transition:color var(--fast) ease;
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.03em;
}
.brand:hover {
  color:var(--accent);
  text-decoration:none;
}
.brand-logo,
.admin-logo,
.footer-logo {
  width:28px;
  height:28px;
  border-radius:var(--radius-md);
  background:var(--accent-grad);
  border:1px solid var(--accent-border);
  box-shadow:0 0 20px var(--accent-glow),
             0 20px 40px rgba(0,0,0,.8);
}
.brand-text {
  color:#fff;
}

/* Nav links (public) */
.main-nav {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  line-height:1.2;
}
.nav-link {
  color:var(--text);
  font-size:13px;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 0;
  position:relative;
  text-decoration:none;
  border-radius:var(--radius-pill);
  transition:all var(--fast) ease;
}
.nav-link:hover {
  color:#fff;
  text-decoration:none;
}
.nav-link:hover::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:2px;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
  border-radius:var(--radius-pill);
}
.nav-admin {
  color:#ffd24a;
}
.nav-admin i {
  font-size:14px;
  line-height:1;
}

/* Header right pill */
.user-pill {
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:6px 12px;
  font-size:12px;
  line-height:1.2;
  color:var(--text);
  box-shadow:0 20px 50px rgba(0,0,0,.7);
  text-decoration:none;
  transition:all var(--fast) ease;
}
.user-pill:hover {
  background:var(--panel-hover);
  border-color:var(--accent-border);
  box-shadow:0 30px 80px rgba(0,0,0,.8),0 0 30px rgba(74,122,255,.25);
  text-decoration:none;
  color:#fff;
}
.staff-pill {
  background:var(--panel2);
  border-color:var(--accent-border);
}
.user-pill-meta {
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.user-pill-name {
  font-weight:600;
  color:#fff;
  font-size:12px;
}
.user-pill-sub {
  font-size:11px;
}

/* avatar in pill */
.avatar-sm {
  background-size:cover;
  background-position:center;
  background-color:#1a1f2f;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.7);
  width:24px;
  height:24px;
  flex-shrink:0;
  transition:all var(--fast) ease;
}
.avatar-sm:hover {
  border-color:var(--accent-border);
  box-shadow:0 30px 80px rgba(0,0,0,.8),
             0 0 30px rgba(74,122,255,.25);
}

/* Admin nav pills under top row */
.admin-nav {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:4px;
}
.admin-nav-link {
  display:flex;
  align-items:center;
  font-size:12px;
  color:#ccc;
  padding:7px 12px;
  border-radius:var(--radius-pill);
  line-height:1.2;
  border:1px solid transparent;
  background:rgba(255,255,255,0);
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  transition:all var(--fast) ease;
  text-decoration:none;
}
.admin-nav-link i {
  margin-right:6px;
  font-size:14px;
}
.admin-nav-link:hover {
  color:#fff;
  background:rgba(255,255,255,.03);
  border:1px solid var(--accent-border);
  box-shadow:0 25px 60px rgba(0,0,0,.75),
             0 0 20px rgba(74,122,255,.4);
  text-decoration:none;
}
.admin-nav-link.active {
  color:#fff;
  background:var(--accent-grad);
  border:1px solid var(--accent-border);
  box-shadow:0 0 20px var(--accent-glow),
             0 40px 100px rgba(0,0,0,.9);
  font-weight:600;
}

/* ===========================
   Footer
   =========================== */

.site-footer {
  width:100%;
  background:radial-gradient(circle at 0% 0%, rgba(26,32,58,.6) 0%, rgba(0,0,0,.4) 70%);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-top:1px solid var(--border);
  box-shadow:0 -30px 80px rgba(0,0,0,.8),
             0 0 80px rgba(74,122,255,.15);
  padding-top:var(--footer-pad-y);
  padding-bottom:var(--footer-pad-y);
  margin-top:64px;
}

.footer-inner {
  max-width:1280px;
  margin:0 auto;
  padding:0 16px;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.footer-top-row {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.footer-brand {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:12px;
}
.footer-logo {
  width:32px;
  height:32px;
  border-radius:var(--radius-md);
}
.brand-block {
  display:flex;
  flex-direction:column;
  line-height:1.3;
}
.footer-title {
  color:#fff;
  font-weight:600;
  font-size:13px;
}
.footer-sub {
  max-width:260px;
}

.footer-links {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:120px;
}
.footer-link {
  color:var(--text);
  text-decoration:none;
  line-height:1.3;
  font-weight:500;
  transition:all var(--fast) ease;
}
.footer-link:hover {
  color:var(--accent);
  text-decoration:none;
  text-shadow:0 0 8px var(--accent-glow);
}

.footer-bottom-row {
  display:flex;
  flex-direction:column;
  gap:4px;
  line-height:1.4;
  max-width:800px;
}

/* ===========================
   Avatars / Status
   =========================== */

.avatar,
.avatar-lg,
.avatar-xl {
  background-size:cover;
  background-position:center;
  background-color:#1a1f2f;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.7);
  flex-shrink:0;
  transition:all var(--fast) ease;
}
.avatar { width:32px; height:32px; }
.avatar-lg { width:48px; height:48px; }
.avatar-xl { width:64px; height:64px; }

.avatar:hover,
.avatar-lg:hover,
.avatar-xl:hover {
  border-color:var(--accent-border);
  box-shadow:0 30px 80px rgba(0,0,0,.8),
             0 0 30px rgba(74,122,255,.25);
}

.online-dot {
  position:absolute;
  bottom:4px;
  right:4px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--success);
  border:2px solid var(--panel-solid);
  box-shadow:0 0 6px var(--success),0 0 16px rgba(34,197,94,.4);
  animation:pulseGlowBlue 2s infinite alternate;
}

/* ===========================
   Chips / Badges
   =========================== */

.chips-line {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:4px;
}
.chip {
  border-radius:var(--radius-pill);
  padding:3px 8px;
  font-size:11px;
  line-height:1.2;
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:1px solid var(--chip-border);
  box-shadow:0 16px 40px rgba(0,0,0,.7);
  transition:all var(--fast) ease;
}
.chip i {
  font-size:12px;
  line-height:1;
}
.chip-generic {
  background:var(--chip-bg);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
}
.chip-generic:hover {
  box-shadow:0 24px 60px rgba(0,0,0,.8),
             0 0 20px rgba(255,255,255,.07);
}

.chip-admin {
  background:var(--chip-admin);
  border:1px solid rgba(255,255,255,.2);
}
.chip-staff {
  background:var(--chip-staff);
  border:1px solid rgba(255,255,255,.2);
}
.chip-sponsored {
  background:var(--chip-sponsored);
  color:#ffd24a;
  border:1px solid rgba(255,210,74,.4);
  box-shadow:0 0 20px rgba(255,210,74,.5);
}
.chip-danger {
  background:var(--chip-danger-bg);
  color:#ff6b7a;
  border:1px solid var(--danger-border);
  box-shadow:0 0 20px var(--danger-glow);
}
.chip-verified {
  background:var(--chip-verified-bg);
  color:var(--chip-verified-text);
  border:1px solid rgba(123,216,143,.4);
  box-shadow:0 0 20px rgba(123,216,143,.4);
}
.chip-remove {
  background:none;
  border:0;
  color:#fff;
  cursor:pointer;
  font-size:12px;
  line-height:1;
  padding:0 4px;
  border-radius:var(--radius-pill);
  transition:all var(--fast) ease;
}
.chip-remove:hover {
  color:#ff6b7a;
  text-shadow:0 0 8px #ff6b7a;
}

.chip-diamond { background:var(--donor-diamond); color:#fff; border:1px solid rgba(255,255,255,.3); box-shadow:0 0 20px rgba(157,114,255,.5); }
.chip-plat    { background:var(--donor-plat);    color:#fff; border:1px solid rgba(255,255,255,.3); box-shadow:0 0 20px rgba(138,227,255,.5); }
.chip-gold    { background:var(--donor-gold);    color:#ffd24a; border:1px solid rgba(255,210,74,.5); box-shadow:0 0 20px rgba(255,210,74,.6); }
.chip-bronze  { background:var(--donor-bronze);  color:#ffd9b3; border:1px solid rgba(194,141,90,.4); }
.chip-silver  { background:var(--donor-silver);  color:#fff; border:1px solid rgba(255,255,255,.4); }

.chip-offer {
  background:var(--donor-gold);
  color:#ffd24a;
  border:1px solid rgba(255,210,74,.5);
  font-weight:500;
}

/* ===========================
   Offer Cards / Market
   =========================== */

.offer-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
@media(min-width:700px){
  .offer-grid { grid-template-columns:1fr 1fr; }
}
@media(min-width:1100px){
  .offer-grid { grid-template-columns:1fr 1fr; }
}

.offer-card {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:16px;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:all var(--med) ease;
}
.offer-card:hover {
  background:var(--panel-hover);
  border-color:var(--accent-border);
  box-shadow:0 40px 120px rgba(0,0,0,.9),
             0 0 60px rgba(74,122,255,.25);
  transform:translateY(-3px) scale(1.015);
}

.offer-head {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  row-gap:12px;
  column-gap:16px;
}

.stat-val {
  font-size:13px;
  font-weight:600;
  color:#fff;
  line-height:1.3;
}
.sell-color {
  color:#ffd24a;
  text-shadow:0 0 10px rgba(255,210,74,.5);
}
.buy-color {
  color:#7bd88f;
  text-shadow:0 0 10px rgba(123,216,143,.5);
}

.note-box {
  background:rgba(0,0,0,.3);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:8px;
  line-height:1.4;
  box-shadow:inset 0 0 30px rgba(0,0,0,.6);
  color:var(--text-dim);
  margin-top:8px;
}

.offer-actions {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}

.section-header-row,
.section-title-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  width:100%;
  row-gap:8px;
}

/* ===========================
   Buttons
   =========================== */

.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost {
  cursor:pointer;
  border-radius:var(--radius-pill);
  font-size:13px;
  line-height:1.2;
  font-weight:500;
  padding:7px 12px;
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:30px;
  transition:all var(--fast) ease;
  box-shadow:0 20px 50px rgba(0,0,0,.7);
}
.btn-primary.sm,
.btn-secondary.sm,
.btn-danger.sm,
.btn-ghost.sm { font-size:12px; padding:5px 10px; min-height:0; }
.btn-primary.xs,
.btn-secondary.xs,
.btn-danger.xs,
.btn-ghost.xs { font-size:11px; padding:4px 8px; min-height:0; }

.btn-primary {
  background:var(--accent-grad);
  border:1px solid var(--accent-border);
  color:#fff;
  text-shadow:0 0 8px rgba(0,0,0,.8);
  box-shadow:0 0 20px var(--accent-glow),0 30px 80px rgba(0,0,0,.8);
}
.btn-primary:hover {
  box-shadow:0 0 30px var(--accent-glow),0 40px 110px rgba(0,0,0,.9);
  transform:translateY(-1px) scale(1.03);
}

.btn-secondary {
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  color:var(--text);
}
.btn-secondary:hover {
  background:rgba(255,255,255,.08);
  border-color:var(--accent-border);
  box-shadow:0 25px 70px rgba(0,0,0,.8),
             0 0 20px rgba(255,255,255,.12);
  transform:translateY(-1px) scale(1.02);
}

.btn-danger {
  background:radial-gradient(circle at 0% 0%, #dc3545 0%, #4a0d13 60%);
  border:1px solid var(--danger-border);
  color:#fff;
  text-shadow:0 0 8px rgba(0,0,0,.8);
  box-shadow:0 0 20px var(--danger-glow),0 30px 80px rgba(0,0,0,.8);
}
.btn-danger:hover {
  box-shadow:0 0 30px var(--danger-glow),0 40px 110px rgba(0,0,0,.9);
  transform:translateY(-1px) scale(1.03);
}

.btn-ghost {
  background:rgba(255,255,255,0);
  border:1px solid var(--border);
  color:var(--text);
}
.btn-ghost:hover {
  background:rgba(255,255,255,.05);
  border-color:var(--accent-border);
  box-shadow:0 25px 70px rgba(0,0,0,.8),
             0 0 20px rgba(255,255,255,.15);
  transform:translateY(-1px) scale(1.02);
}

/* inline-form */
.inline-form {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.inline-form input,
.inline-form select {
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:#fff;
  padding:6px 8px;
  font-size:12px;
  min-width:0;
  line-height:1.3;
  transition:all var(--fast) ease;
}
.inline-form input:focus,
.inline-form select:focus {
  outline:none;
  border-color:var(--accent-border);
  box-shadow:0 0 10px var(--accent-glow);
}

/* ===========================
   Tables (admin)
   =========================== */

.admin-table {
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.8);
  background:rgba(0,0,0,.15);
  border:1px solid var(--border);
}
.admin-table thead tr {
  background:rgba(255,255,255,.03);
}
.admin-table th,
.admin-table td {
  text-align:left;
  padding:10px 12px;
  font-size:12px;
  line-height:1.4;
  color:var(--text);
  border-bottom:1px solid var(--border);
}
.admin-table tbody tr:hover {
  background:rgba(255,255,255,.03);
}

/* ===========================
   Chat / Tickets
   =========================== */

.chat-shell {
  display:grid;
  grid-template-columns:320px 1fr;
  gap:24px;
}
@media(max-width:900px){
  .chat-shell { grid-template-columns:1fr; }
}

.chat-list {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  max-height:80vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:all var(--med) ease;
}
.chat-list:hover {
  border-color:var(--accent-border);
  box-shadow:0 40px 120px rgba(0,0,0,.9),
             0 0 60px rgba(74,122,255,.2);
  transform:translateY(-2px) scale(1.01);
}

.chat-list-head {
  border-bottom:1px solid var(--border);
  padding:10px 12px;
  background:rgba(255,255,255,.02);
  font-size:13px;
  font-weight:600;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.chat-list-body {
  overflow-y:auto;
  max-height:calc(80vh - 44px);
}

.chat-list-ul {
  list-style:none;
  padding:0;
  margin:0;
}

.chat-list-item {
  border-bottom:1px solid var(--border);
}
.chat-list-link {
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  color:var(--text);
  text-decoration:none;
  position:relative;
  transition:all var(--fast) ease;
}
.chat-list-link:hover {
  background:var(--panel2);
  text-decoration:none;
  box-shadow:inset 0 0 30px rgba(0,0,0,.6);
}
.chat-list-link .username-small {
  font-size:13px;
}
.chat-list-link .tiny.muted {
  font-size:11px;
}
.unread-pill {
  background:var(--danger);
  color:#fff;
  font-size:10px;
  line-height:1.2;
  padding:2px 6px;
  border-radius:var(--radius-pill);
  box-shadow:0 0 12px rgba(220,53,69,.7),0 20px 40px rgba(0,0,0,.8);
  border:1px solid var(--danger-border);
}

.ellipsis {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chat-pane {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  display:flex;
  flex-direction:column;
  max-height:80vh;
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:all var(--med) ease;
}
.chat-pane:hover {
  border-color:var(--accent-border);
  box-shadow:0 40px 120px rgba(0,0,0,.9),
             0 0 60px rgba(74,122,255,.2);
  transform:translateY(-2px) scale(1.01);
}

.chat-header {
  border-bottom:1px solid var(--border);
  align-items:flex-start;
  gap:12px;
  padding:16px;
  background:rgba(255,255,255,.02);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  row-gap:8px;
}

.chat-messages {
  flex:1;
  overflow-y:auto;
  padding:16px;
  background:var(--panel2);
  box-shadow:inset 0 20px 40px rgba(0,0,0,.6);
}

.msg-row {
  display:flex;
  align-items:flex-start;
  margin-bottom:16px;
  gap:10px;
  transform-origin:bottom left;
  animation: fadeUp var(--med) ease both;
}
.msg-row.me {
  flex-direction:row-reverse;
  transform-origin:bottom right;
}
.msg-avatar {
  width:32px;
  height:32px;
  background-size:cover;
  background-position:center;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  box-shadow:0 20px 50px rgba(0,0,0,.7);
}
.msg-bubble {
  max-width:70%;
  background:var(--msg-other);
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  padding:10px 12px;
  font-size:13px;
  line-height:1.4;
  color:var(--text);
  box-shadow:0 30px 80px rgba(0,0,0,.8);
  position:relative;
  transition:all var(--fast) ease;
}
.msg-row.me .msg-bubble {
  background:var(--msg-me);
}
.msg-bubble:hover {
  box-shadow:0 40px 100px rgba(0,0,0,.9),
             0 0 40px rgba(74,122,255,.15);
  border-color:var(--accent-border);
}
.msg-head {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:4px;
  font-weight:500;
  font-size:12px;
  line-height:1.3;
}
.msg-head .chip-staff,
.msg-head .chip-admin {
  font-size:10px;
  padding:2px 6px;
  line-height:1.2;
}
.msg-time {
  font-weight:400;
}
.msg-img {
  max-width:220px;
  max-height:220px;
  border-radius:var(--radius-md);
  margin-top:6px;
  border:1px solid var(--border);
  box-shadow:0 30px 80px rgba(0,0,0,.9);
  object-fit:cover;
}

.chat-compose {
  border-top:1px solid var(--border);
  background:var(--panel);
  padding:16px;
  box-shadow:0 -30px 80px rgba(0,0,0,.8);
}
.chat-compose form {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  width:100%;
}
.chat-input {
  flex:1;
  min-width:0;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  color:#fff;
  font-size:13px;
  padding:10px 12px;
  line-height:1.3;
  transition:all var(--fast) ease;
}
.chat-input:focus {
  outline:none;
  border-color:var(--accent-border);
  box-shadow:0 0 10px var(--accent-glow);
}

/* ===========================
   Reports / Notes / Reviews
   =========================== */

.report-list {
  list-style:none;
  padding:0;
  margin:0;
}
.report-item {
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.8);
  transition:all var(--fast) ease;
  margin-bottom:16px;
}
.report-item:last-child {
  margin-bottom:0;
}
.report-item:hover {
  background:var(--panel-hover);
  border-color:var(--accent-border);
  box-shadow:0 40px 120px rgba(0,0,0,.9),
             0 0 40px rgba(74,122,255,.2);
}

.review-list {
  margin:0;
  padding:0;
  list-style:none;
}
.review-item {
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px;
  margin-bottom:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.8);
  transition:all var(--fast) ease;
}
.review-item:last-child {
  margin-bottom:0;
}
.review-item:hover {
  background:var(--panel-hover);
  border-color:var(--accent-border);
  box-shadow:0 30px 80px rgba(0,0,0,.9),
             0 0 30px rgba(74,122,255,.15);
}
.review-head {
  display:flex;
  align-items:flex-start;
  flex-wrap:nowrap;
  gap:10px;
  margin-bottom:8px;
}
.review-head .avatar {
  width:32px;
  height:32px;
  background-size:cover;
  background-position:center;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  box-shadow:0 20px 50px rgba(0,0,0,.7);
}

/* ===========================
   Forms & Modals
   =========================== */

form label.tiny {
  color:#fff;
  font-size:12px;
  margin-bottom:4px;
  display:block;
}
form input,
form textarea,
form select {
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  color:#fff;
  padding:10px 12px;
  font-size:13px;
  line-height:1.3;
  width:100%;
  min-width:0;
  transition:all var(--fast) ease;
}
form input:focus,
form textarea:focus,
form select:focus {
  outline:none;
  border-color:var(--accent-border);
  box-shadow:0 0 10px var(--accent-glow);
}

.modal-backdrop {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index:9998;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--fast) ease;
}
.modal-backdrop.show {
  opacity:1;
  pointer-events:auto;
}

.modal {
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transform:scale(.96) translateY(8px);
  transition:all var(--fast) ease;
}
.modal.show {
  opacity:1;
  pointer-events:auto;
  transform:scale(1) translateY(0);
}

.modal-card {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  width:100%;
  max-width:400px;
  color:#fff;
  box-shadow:0 50px 140px rgba(0,0,0,.9),0 0 80px rgba(74,122,255,.2);
  position:relative;
  overflow:hidden;
  animation:fadeUp var(--med) ease both;
  padding:16px;
}
.modal-card h3 {
  font-size:14px;
  font-weight:600;
  margin:0 0 12px 0;
  color:#fff;
}
.modal-card form label.tiny {
  display:block;
  color:#fff;
  font-size:12px;
  margin-bottom:4px;
}
.modal-card form input,
.modal-card form textarea,
.modal-card form select {
  width:100%;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  color:#fff;
  padding:10px 12px;
  font-size:13px;
  line-height:1.3;
  transition:all var(--fast) ease;
  margin-bottom:12px;
}
.modal-card form input:focus,
.modal-card form textarea:focus,
.modal-card form select:focus {
  outline:none;
  border-color:var(--accent-border);
  box-shadow:0 0 10px var(--accent-glow);
}
.modal-card .row-flex.between {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}

/* ===========================
   Admin Dashboard KPIs / Lists
   =========================== */

.kpi-card {
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.8);
  position:relative;
  overflow:hidden;
  transition:all var(--fast) ease;
}
.kpi-card:hover {
  background:var(--panel-hover);
  border-color:var(--accent-border);
  box-shadow:0 40px 120px rgba(0,0,0,.9),
             0 0 40px rgba(74,122,255,.2);
  transform:translateY(-2px) scale(1.02);
}
.kpi-value {
  font-size:16px;
  font-weight:600;
  color:#fff;
  text-shadow:0 0 8px rgba(0,0,0,.9);
}
.kpi-label {
  font-size:11px;
  line-height:1.2;
  color:var(--muted);
  margin-bottom:4px;
}

.user-list-admin .user-row-admin {
  border-bottom:1px solid var(--border);
  padding:12px 0;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-start;
  transition:all var(--fast) ease;
}
.user-list-admin .user-row-admin:hover {
  background:rgba(255,255,255,.02);
  box-shadow:inset 0 0 30px rgba(0,0,0,.6);
  border-radius:var(--radius-md);
  padding:12px;
}

/* ===========================
   Scrollbars
   =========================== */

::-webkit-scrollbar {
  width:6px;
  height:6px;
}
::-webkit-scrollbar-track {
  background:#0b0f17;
}
::-webkit-scrollbar-thumb {
  background:linear-gradient(#4a7aff,#1d2c8d);
  border-radius:var(--radius-pill);
  box-shadow:0 0 10px rgba(74,122,255,.6);
}
::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(#6f8fff,#2b3fae);
}