/* ===== Payment Styles — Unive Roleplay ===== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --bg-deep: #07090f;
  --bg-card: #101420;
  --bg-inset: #151a28;
  --bg-raised: #1b2232;
  --bg-secondary: #151a28;
  --bg-dark: #07090f;
  --card-bg: #101420;
  --border: #293246;
  --border-color: #293246;
  --border-bright: #3b4760;
  --text-primary: #f5f7fb;
  --text-secondary: #b6bed2;
  --text-muted: #828ca3;
  --accent: #38bdf8;
  --accent-dim: rgba(56, 189, 248, 0.14);
  --accent-glow: rgba(56, 189, 248, 0.24);
  --accent-purple: #8b5cf6;
  --accent-purple-dim: rgba(139, 92, 246, 0.18);
  --accent-purple-glow: rgba(139, 92, 246, 0.32);
  --swish-green: #15B857;
  --swish-green-dim: rgba(21, 184, 87, 0.12);
  --success: #2dd47a;
  --warning: #f5b942;
  --error: #ff5c6c;
  --danger: #ff5c6c;
  --radius: 8px;
  --radius-lg: 8px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --radius-xs: 4px;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
}

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

/* Custom scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-bright) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

html {
  overflow-y: scroll;            /* fallback for older Safari */
  scrollbar-gutter: stable;      /* modern: reserves space without visible track */
}

body {
  font-family: var(--font-body);
  background:
    linear-gradient(180deg, #080a11 0%, var(--bg-deep) 240px),
    var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: transparent;
  letter-spacing: 0;
}

/* Restore caret in actual text input fields (not selects) */
input, textarea, [contenteditable="true"] {
  caret-color: auto;
}

/* Prevent blinking caret on non-editable form elements */
label, .form-label, .form-group, .form-header, legend {
  -webkit-user-select: none;
  user-select: none;
}

/* Ambient background glow */
body.pay-page::before {
  content: '';
  position: fixed;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(79,195,247,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ===== Layout ===== */
.container {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* ===== Branding ===== */
.brand-header {
  text-align: center;
  margin-bottom: 24px;
  animation: fadeSlideDown 0.6s ease-out both;
}

.brand-logo {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 12px;
  overflow: hidden;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-logo svg {
  width: 100%;
  height: 100%;
}

.brand-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.brand-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-top: 2px;
  text-transform: uppercase;
}

/* ===== Card ===== */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 28px 24px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  animation: fadeSlideUp 0.5s ease-out 0.1s both;
}

/* Subtle top-edge glow line */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
  opacity: 0.4;
}

.payment-card {
  padding-bottom: 20px;
  min-height: 540px;
}

/* ===== Amount Display ===== */
.amount-display {
  text-align: center;
  padding: 24px 16px;
  margin-bottom: 20px;
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  position: relative;
}

.amount-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.amount-value {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
  text-shadow: 0 0 40px var(--accent-glow);
}

.amount-value .currency {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 4px;
  vertical-align: super;
}

.amount-vat {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* ===== Payment Info ===== */
.payment-info {
  margin-bottom: 20px;
  animation: fadeSlideUp 0.5s ease-out 0.2s both;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(30, 30, 66, 0.6);
}

.info-row:last-child {
  border-bottom: none;
}

.info-row .label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.info-row .value {
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
  max-width: 65%;
  word-break: break-word;
}

.info-row .value .badge-type {
  display: inline-block;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== Form Sections ===== */
.form-section {
  margin-bottom: 20px;
  animation: fadeSlideUp 0.5s ease-out 0.3s both;
}

.form-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}

.help-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  line-height: 1.5;
}

/* File Upload */
.file-upload-zone {
  position: relative;
  border: 1px dashed var(--border-bright);
  border-radius: var(--radius-sm);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
  background: var(--bg-inset);
}

.file-upload-zone:hover {
  border-color: var(--accent);
  background: rgba(79, 195, 247, 0.03);
}

.file-upload-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.file-upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.file-upload-icon {
  color: var(--text-muted);
  margin-bottom: 6px;
}

.file-upload-text {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.file-upload-text span {
  color: var(--accent);
  font-weight: 500;
}

.file-upload-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.file-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.file-item button {
  background: none;
  border: none;
  color: var(--error);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 2px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.file-item button:hover {
  opacity: 1;
}

.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  color: var(--text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.or-divider::before,
.or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.text-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.text-input::placeholder {
  color: var(--text-muted);
}

.text-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ===== Consent / Terms ===== */
.terms-section {
  animation: fadeSlideUp 0.5s ease-out 0.35s both;
}

.consent-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}

.consent-label:hover {
  background: rgba(79, 195, 247, 0.03);
}

.consent-label.checked {
  border-color: rgba(79, 195, 247, 0.15);
  background: rgba(79, 195, 247, 0.04);
}

.consent-checkbox {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.consent-checkbox input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1;
}

.consent-checkbox .checkmark {
  position: absolute;
  inset: 0;
  background: var(--bg-inset);
  border: 2px solid var(--border-bright);
  border-radius: 4px;
  transition: background 0.2s, border-color 0.2s;
}

.consent-checkbox .checkmark::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid var(--bg-card);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s ease;
}

.consent-checkbox input:checked ~ .checkmark {
  background: var(--accent);
  border-color: var(--accent);
}

.consent-checkbox input:checked ~ .checkmark::after {
  transform: rotate(45deg) scale(1);
}

.consent-text a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.consent-text a:hover {
  border-bottom-color: var(--accent);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.25s ease;
  text-align: center;
}

.btn-pay {
  width: 100%;
  margin-top: 20px;
  padding: 16px 24px;
  font-size: 1rem;
  background: var(--swish-green);
  color: #fff;
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  animation: fadeSlideUp 0.5s ease-out 0.4s both;
}

.btn-pay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.btn-pay:hover:not(:disabled)::before {
  opacity: 1;
}

.btn-pay:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(21, 184, 87, 0.3);
}

.btn-pay:active:not(:disabled) {
  transform: translateY(0);
}

.btn-pay:disabled {
  background: var(--bg-raised);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.btn-pay:disabled svg {
  opacity: 0.3;
}

.btn-pay .swish-logo {
  height: 24px;
  width: 24px;
  flex-shrink: 0;
}

.btn-pay .btn-text {
  flex: 1;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-raised);
  color: var(--accent);
  border: 1px solid var(--border-bright);
  padding: 12px 20px;
  font-size: 0.85rem;
  font-family: inherit;
  line-height: 1.4;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.btn-secondary:hover {
  background: var(--border);
  border-color: var(--accent);
}

.btn-secondary svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-swish-open {
  display: flex;
  width: 100%;
  background: var(--swish-green);
  color: #fff;
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 12px;
  transition: all 0.25s;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-swish-open:hover {
  background: #12a34e;
  box-shadow: 0 4px 16px rgba(21, 184, 87, 0.3);
}

/* ===== Overlays ===== */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 100%;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: var(--radius);
  opacity: 0;
  animation: overlayFadeIn 0.4s ease-out forwards;
}

.overlay-content {
  text-align: center;
  padding: 32px 20px;
  width: 100%;
}

.overlay-content h2 {
  margin-bottom: 8px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
}

.overlay-content p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* QR Section */
.qr-section {
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.qr-frame {
  background: #ffffff;
  border-radius: 14px;
  padding: 12px;
  display: inline-flex;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

.qr-frame img {
  width: 220px;
  height: 220px;
  display: block;
  border-radius: 6px;
}

.swish-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--swish-green-dim);
  border: 1px solid rgba(21, 184, 87, 0.2);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--swish-green);
}

.swish-badge svg {
  width: 16px;
  height: 16px;
}

.status-text {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.status-text .pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

/* ===== Success ===== */
.success-content {
  text-align: center;
  padding: 36px 20px;
}

.success-icon-ring {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.1);
  border: 2px solid rgba(34, 197, 94, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: successPop 0.5s ease-out both;
}

.success-icon-ring svg {
  width: 32px;
  height: 32px;
  color: var(--success);
  animation: checkDraw 0.4s ease-out 0.3s both;
}

.success-content h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.success-content p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.6;
}

.success-actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===== Error / Expired ===== */
.error-content {
  text-align: center;
  padding: 36px 20px;
}

.error-icon-ring {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  border: 2px solid rgba(239, 68, 68, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-icon-ring svg {
  width: 32px;
  height: 32px;
  color: var(--error);
}

.error-content h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.error-content p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.error-content .discord-hint {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.error-content .discord-hint svg {
  width: 20px;
  height: 20px;
  color: #5865F2;
  flex-shrink: 0;
}

/* ===== Spinner ===== */
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ===== Confetti Canvas ===== */
.confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

/* ===== Footer ===== */
.footer {
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  animation: fadeSlideUp 0.5s ease-out 0.5s both;
}

.footer a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.footer a:hover {
  color: var(--text-secondary);
}

/* ===== Animations ===== */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

@keyframes successPop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes checkDraw {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== Hidden ===== */
.hidden {
  display: none !important;
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
  .container {
    padding: 12px 10px;
  }

  .card {
    padding: 22px 16px;
    border-radius: 14px;
  }

  .amount-value {
    font-size: 1.9rem;
  }

  .info-row {
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
  }

  .info-row .value {
    max-width: 100%;
    text-align: left;
  }

  .consent-label {
    padding: 8px 10px;
    font-size: 0.75rem;
  }

  .qr-frame img {
    width: 180px;
    height: 180px;
  }

  /* Admin responsive overrides (keep admin intact) */
  .admin-nav {
    flex-direction: column;
    gap: 12px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .data-table {
    font-size: 0.8rem;
  }

  .data-table th,
  .data-table td {
    padding: 8px 10px;
  }
}

/* ===== Admin Styles ===== */
.admin-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.admin-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #1a1a2e;
  border-radius: 12px;
  margin-bottom: 24px;
  border: 1px solid #2a2a4a;
}

.admin-nav .nav-links {
  display: flex;
  gap: 16px;
}

.admin-nav a {
  color: #888;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s;
}

.admin-nav a:hover,
.admin-nav a.active {
  color: #4fc3f7;
  background: #16213e;
}

.admin-nav .user-info {
  color: #888;
  font-size: 0.85rem;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stats-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
}

.stat-card {
  background: #1a1a2e;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #2a2a4a;
}

.stat-card .stat-label {
  color: #888;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-card .stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #4fc3f7;
  margin-top: 4px;
}

/* Table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #1a1a2e;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #2a2a4a;
}

.data-table th {
  background: #16213e;
  padding: 12px 16px;
  text-align: left;
  font-size: 0.8rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-table td {
  padding: 12px 16px;
  border-top: 1px solid #2a2a4a;
  font-size: 0.9rem;
}

.data-table a {
  text-decoration: none;
}

.data-table a:hover {
  text-decoration: underline;
}

.data-table tr:hover {
  background: #16213e;
}

/* Status badges */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-paid { background: #1b5e20; color: #66bb6a; }
.badge-pending { background: #e65100; color: #ff9800; }
.badge-expired { background: #4a1010; color: #e57373; }
.badge-cancelled { background: rgba(136, 136, 136, 0.15); color: #888; }

.badge-green { background: rgba(16, 185, 129, 0.13); color: #34d399; }
.badge-gray { background: rgba(100, 116, 139, 0.13); color: #94a3b8; }
.badge-purple { background: rgba(168, 85, 247, 0.13); color: #c084fc; }
.badge-amber { background: rgba(245, 158, 11, 0.13); color: #fbbf24; }
.badge-orange { background: rgba(251, 146, 60, 0.13); color: #fb923c; }
.badge-red { background: rgba(239, 68, 68, 0.13); color: #f87171; }
.badge-blue { background: rgba(59, 130, 246, 0.13); color: #60a5fa; }
.badge-violet { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
.badge-muted { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }
.badge-sm { font-size: 0.65rem; margin-left: 0.375rem; vertical-align: 1px; }

/* Ban status badges */
.badge-aktiv { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.badge-havd { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.badge-felaktig { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.badge-klakesko { background: rgba(220, 38, 38, 0.15); color: #ef4444; }
.badge-discord { background: rgba(124, 58, 237, 0.15); color: #a78bfa; }

/* Severity badges */
.severity-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.severity-mild { background: rgba(46, 204, 113, 0.15); color: #2ecc71; }
.severity-normal { background: rgba(243, 156, 18, 0.15); color: #f39c12; }
.severity-severe { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.severity-remark { background: rgba(155, 89, 182, 0.15); color: #9b59b6; }
.severity-blacklist { background: rgba(220, 38, 38, 0.2); color: #dc2626; }

/* Gender badges */
.gender-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600; }
.gender-male { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.gender-female { background: rgba(236, 72, 153, 0.15); color: #f472b6; }

/* Pagination (legacy block removed - see main pagination below) */

/* Detail sections */
.detail-section {
  background: #1a1a2e;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
  border: 1px solid #2a2a4a;
}

.detail-section h3 {
  color: #ccc;
  font-size: 1rem;
  margin-bottom: 12px;
}

.detail-row {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #16213e;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row .label {
  width: 200px;
  color: #888;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.detail-row .value {
  color: #e0e0e0;
  font-size: 0.9rem;
}

/* Login page */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  text-align: center;
  padding: 48px 40px;
}

.btn-discord {
  background: #5865F2;
  color: #fff;
  padding: 14px 32px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
  transition: background 0.2s;
}

.btn-discord:hover {
  background: #4752c4;
}

/* ===== Product Admin Styles ===== */
.btn-admin-action {
  display: inline-block;
  padding: 10px 20px;
  background: #4fc3f7;
  color: #07070e;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}

.btn-admin-action:hover {
  background: #81d4fa;
  box-shadow: 0 2px 12px rgba(79, 195, 247, 0.3);
}

.btn-admin-cancel {
  display: inline-block;
  padding: 10px 20px;
  background: transparent;
  color: #888;
  font-weight: 500;
  font-size: 0.85rem;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid #2a2a4a;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-admin-cancel:hover {
  color: #ccc;
  border-color: #4a4a6a;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.filter-chip {
  display: inline-block;
  padding: 5px 14px;
  background: #1a1a2e;
  border: 1px solid #2a2a4a;
  border-radius: 20px;
  color: #888;
  text-decoration: none;
  font-size: 0.8rem;
  transition: all 0.2s;
}

.filter-chip:hover {
  color: #4fc3f7;
  border-color: #4fc3f7;
}

.filter-chip.active {
  background: rgba(79, 195, 247, 0.1);
  color: #4fc3f7;
  border-color: #4fc3f7;
}

.category-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #16213e;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #aaa;
  white-space: nowrap;
}

.row-inactive {
  opacity: 0.5;
}

.action-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-small {
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
  font-family: var(--font-body);
  display: inline-block;
}

.btn-edit {
  background: #16213e;
  color: #4fc3f7;
  border: 1px solid #2a2a4a;
}

.btn-edit:hover {
  border-color: #4fc3f7;
}

.btn-warn {
  background: rgba(255, 152, 0, 0.1);
  color: #ff9800;
  border: 1px solid rgba(255, 152, 0, 0.2);
}

.btn-warn:hover {
  border-color: #ff9800;
}

.btn-activate {
  background: rgba(102, 187, 106, 0.1);
  color: #66bb6a;
  border: 1px solid rgba(102, 187, 106, 0.2);
}

.btn-activate:hover {
  border-color: #66bb6a;
}

.btn-delete {
  background: rgba(229, 115, 115, 0.1);
  color: #e57373;
  border: 1px solid rgba(229, 115, 115, 0.2);
}

.btn-delete:hover {
  border-color: #e57373;
}

/* Kebab action menu */
.action-cell { position: relative; }
.kebab-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: rgba(255,255,255,0.4); font-size: 1.125rem; cursor: pointer; transition: all 0.15s; line-height: 1; letter-spacing: 2px; }
.kebab-btn:hover, .kebab-btn.active { background: rgba(79,195,247,0.08); color: #4fc3f7; border-color: var(--border); }
.kebab-menu { display: none; position: absolute; right: 0; top: 100%; min-width: 160px; padding: 4px; background: #12122a; border: 1px solid #2a2a4a; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 50; }
.kebab-menu.open { display: block; }
.kebab-menu-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; border-radius: 6px; background: none; border: none; color: #e5e7eb; font-size: 0.8rem; cursor: pointer; text-align: left; transition: background 0.12s; font-family: inherit; text-decoration: none; }
.kebab-menu-item:hover { background: rgba(255,255,255,0.06); }
.kebab-menu-item.danger { color: #f87171; }
.kebab-menu-item.danger:hover { background: rgba(239,68,68,0.12); }
.kebab-menu-item.warn { color: #fbbf24; }
.kebab-menu-item.warn:hover { background: rgba(251,191,36,0.12); }
.kebab-menu-item.success { color: #4ade80; }
.kebab-menu-item.success:hover { background: rgba(74,222,128,0.12); }
.kebab-menu-divider { height: 1px; background: #2a2a4a; margin: 4px 8px; }

/* Form styles */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-full {
  grid-column: 1 / -1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 0.8rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-control {
  padding: 10px 14px;
  background: #0e0e1e;
  border: 1px solid #2a2a4a;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 0.9rem;
  font-family: var(--font-body);
  line-height: 1.4;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.form-control:focus {
  outline: none;
  border-color: #4fc3f7;
}

/* select.form-control styled globally with custom arrow */

textarea.form-control {
  min-height: 80px;
  resize: vertical;
}

.form-textarea {
  min-height: 80px;
  resize: vertical;
}

.form-hint {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #ccc;
  font-size: 0.9rem;
}

.toggle-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #4fc3f7;
}

/* Alert system */
.alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  border-left: 3px solid;
}
.alert-success {
  background: rgba(16, 185, 129, 0.15);
  border-left-color: #10b981;
  color: #34d399;
}
.alert-error {
  background: rgba(239, 68, 68, 0.15);
  border-left-color: #ef4444;
  color: #f87171;
}
.alert-warning {
  background: rgba(251, 191, 36, 0.15);
  border-left-color: #f59e0b;
  color: #fbbf24;
}

/* ===== Group Payment Styles ===== */
.group-progress {
  margin: 16px 0;
  animation: fadeSlideUp 0.5s ease-out 0.15s both;
}

.group-progress-bar {
  height: 8px;
  background: var(--bg-inset);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.group-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--swish-green));
  border-radius: 4px;
  transition: width 0.5s ease-out;
  min-width: 0;
}

.group-progress-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
}

.group-participants {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.participant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  transition: border-color 0.2s;
}

.participant-row.participant-current {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.participant-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.participant-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
}

.participant-share {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.participant-status {
  flex-shrink: 0;
}

.group-your-share {
  text-align: center;
  padding: 16px;
  margin: 16px 0 4px;
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  animation: fadeSlideUp 0.5s ease-out 0.25s both;
}

/* Admin group payment styles */
.admin-progress-bar {
  height: 6px;
  background: #16213e;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.admin-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4fc3f7, #15B857);
  border-radius: 3px;
}

.badge-open { background: rgba(79, 195, 247, 0.15); color: #4fc3f7; }
.badge-completed { background: #1b5e20; color: #66bb6a; }
.badge-closed { background: #333; color: #888; }

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    flex-direction: column;
  }
}

/* =========================================================
   STAFF DASHBOARD STYLES
   ========================================================= */

/* Layout */
.staff-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.staff-main {
  flex: 1;
  padding: 24px;
}

.staff-container {
  max-width: 1200px;
  margin: 0 auto;
}

.staff-container--narrow {
  max-width: 720px;
}

/* Nav */
.staff-nav,
.player-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 500;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
  flex-shrink: 0;
}

.nav-brand-text {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  transition: all 0.2s;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--text-primary);
  background: var(--bg-raised);
}

.nav-link:focus {
  outline: none;
  color: inherit;
  background: inherit;
}

.nav-link:focus-visible {
  outline: 1px solid var(--border);
  outline-offset: -1px;
}

.nav-link.active {
  color: var(--accent);
  background: var(--accent-dim);
}

/* ===== Nav Dropdowns ===== */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--text-secondary);
  background: none;
  border: none;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.nav-dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
  margin-bottom: 2px;
  transition: transform 0.2s;
}

.nav-dropdown:hover .nav-dropdown-toggle::after {
  transform: rotate(-135deg);
  margin-bottom: -2px;
}

.nav-dropdown-toggle:hover,
.nav-dropdown:hover .nav-dropdown-toggle {
  color: var(--text-primary);
  background: var(--bg-raised);
}

.nav-dropdown-toggle.has-active {
  color: var(--accent);
  background: var(--accent-dim);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  padding-top: 8px;
  margin-top: -4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 200;
}

.nav-dropdown:hover .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu .nav-link {
  width: 100%;
  border-radius: 6px;
}

.nav-dropdown-menu .nav-divider {
  height: 1px;
  background: var(--border);
  margin: 5px 8px;
}

.nav-dropdown-menu .nav-group-label {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 12px 2px;
  font-weight: 600;
  user-select: none;
}

/* ── Mega menu (wide dropdown with columns) ── */
.nav-dropdown-menu.nav-mega {
  display: none;
  min-width: auto;
  width: max-content;
  padding: 12px 6px;
}
.nav-dropdown:hover .nav-dropdown-menu.nav-mega {
  display: flex;
  flex-direction: row;
  gap: 0;
}
.nav-mega-col {
  min-width: 140px;
  padding: 0 6px;
}
.nav-mega-col + .nav-mega-col {
  border-left: 1px solid var(--border);
}
.nav-mega-col .nav-group-label {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 8px 6px;
  font-weight: 600;
  user-select: none;
  white-space: nowrap;
}
.nav-mega-col .nav-link {
  width: 100%;
  border-radius: 6px;
  font-size: 0.82rem;
  padding: 7px 8px;
  white-space: nowrap;
}
.nav-mega-col .nav-divider { display: none; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-right .nav-link {
  padding: 6px 8px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.nav-icon-btn:hover {
  color: var(--text-primary);
  background: var(--bg-raised);
}
.nav-icon-btn.nav-logout:hover,
.nav-link.nav-logout:hover {
  color: var(--error);
  background: rgba(239, 68, 68, 0.1);
}

/* Nav user (player nav — avatar + username) */
.nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.nav-username {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.nav-role-badge {
  font-size: 0.65rem;
  color: var(--accent);
  opacity: 0.8;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ===== Online Indicator ===== */
.online-indicator {
  display: flex;
  align-items: center;
  cursor: default;
  position: relative;
}
.online-avatars {
  display: flex;
  align-items: center;
}
.online-avatar {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--bg-dark);
  margin-left: -6px;
  object-fit: cover;
  transition: transform 0.15s, z-index 0s;
  position: relative;
}
.online-avatar:first-child {
  margin-left: 0;
}
.online-avatar:hover {
  transform: translateY(-2px);
  z-index: 10;
}
.online-overflow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--bg-dark);
  margin-left: -6px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.online-empty {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--text-muted);
}
.online-empty-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.4;
}
.online-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 0;
  min-width: 180px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 100;
  display: none;
}
.online-indicator:hover .online-tooltip {
  display: block;
}
.online-tooltip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 0.8rem;
}
.online-tooltip-item img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.online-tooltip-name {
  color: var(--text-primary);
  font-weight: 500;
}
.online-tooltip-role {
  color: var(--text-muted);
  font-size: 0.7rem;
}

/* Notification bell (notif-badge inherits from nav-icon-btn) */

.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--error);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Notification popup */
.notif-wrapper {
  position: relative;
}
.notif-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-height: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notif-popup.hidden {
  display: none;
}
.notif-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}
.notif-mark-all {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}
.notif-mark-all:hover {
  background: var(--accent-dim);
}
.notif-popup-list {
  overflow-y: auto;
  flex: 1;
  max-height: 320px;
}
.notif-popup-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.notif-popup-item {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s;
}
.notif-popup-item:hover {
  background: rgba(79, 195, 247, 0.05);
}
.notif-popup-item.notif-read {
  opacity: 0.6;
}
.notif-popup-title {
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 2px;
}
.notif-popup-msg {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-popup-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 3px;
}
.notif-popup-footer {
  display: block;
  padding: 10px 14px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
  border-top: 1px solid var(--border);
  transition: background 0.15s;
}
.notif-popup-footer:hover {
  background: var(--accent-dim);
}

/* Page header */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.page-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--accent);
  color: var(--bg-deep);
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}

.btn-primary:hover {
  background: #81d4fa;
  box-shadow: 0 2px 12px rgba(79, 195, 247, 0.3);
}

.btn-sm {
  padding: 8px 14px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(30, 41, 59, 0.6);
  color: #e2e8f0;
  border: 1px solid #1e293b;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: background 0.15s;
}
.btn-sm:hover { background: rgba(30, 41, 59, 0.9); }
a.btn-sm, a.btn-sm:visited { color: #e2e8f0; text-decoration: none; }
.btn-block { width: 100%; justify-content: center; }

.btn-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: opacity 0.2s;
}

.btn-link:hover { opacity: 0.8; }

.link-accent {
  color: var(--accent);
  text-decoration: none;
}

.link-accent:hover { text-decoration: underline; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  margin-bottom: 16px;
  transition: color 0.2s;
}

.back-link:hover { color: var(--accent); }

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color 0.2s, transform 0.2s;
  animation: fadeSlideUp 0.4s ease-out both;
}

.stat-card:hover {
  border-color: var(--border-bright);
  transform: translateY(-1px);
}

.stat-icon { font-size: 1.5rem; }

.stat-info { display: flex; flex-direction: column; }

.stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
  line-height: 1.2;
}

.stat-card .stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-card--success .stat-value { color: var(--success); }
.stat-card--warning .stat-value { color: #f59e0b; }
.stat-card--accent .stat-value { color: var(--accent); }
.stat-card--delivery .stat-value { color: #a78bfa; }

/* Section cards */
.section-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  animation: fadeSlideUp 0.4s ease-out both;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.section-header .section-title {
  margin-bottom: 0;
}

.section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}

/* Hawk PC Check Review */
.pc-check-subtitle {
  color: var(--text-muted);
  margin: 4px 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.pc-check-create-card,
.pc-check-list-card {
  padding: 18px 20px 20px;
}

.pc-check-card-head,
.pc-check-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.pc-check-card-head p,
.pc-check-list-head p {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.pc-check-create-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.pc-check-field {
  min-width: 0;
  margin: 0;
}

.pc-check-field-wide,
.pc-check-submit-row {
  grid-column: 1 / -1;
}

.pc-check-field .form-control,
.pc-check-filter-form .search-input {
  min-height: 38px;
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.18);
}

.pc-check-field textarea.form-control {
  min-height: 58px;
}

input.form-control[type="file"] {
  padding: 8px 12px;
}

input.form-control[type="file"]::file-selector-button {
  margin-right: 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.1);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.78rem;
  padding: 7px 10px;
  cursor: pointer;
}

.pc-check-submit-row {
  display: flex;
  justify-content: flex-end;
}

.pc-check-filter-form {
  display: grid;
  grid-template-columns: 150px minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: min(100%, 520px);
}

.pc-check-filter-form .btn-sm {
  min-height: 38px;
}

.pc-check-open-link {
  min-width: 72px;
  justify-content: center;
}

@media (max-width: 900px) {
  .pc-check-create-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pc-check-list-head {
    flex-direction: column;
  }

  .pc-check-filter-form {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .pc-check-create-card,
  .pc-check-list-card {
    padding: 14px;
  }

  .pc-check-card-head,
  .pc-check-list-head {
    margin-bottom: 12px;
  }

  .pc-check-create-form,
  .pc-check-filter-form {
    grid-template-columns: 1fr;
  }

  .pc-check-submit-row,
  .pc-check-submit-row .btn-primary,
  .pc-check-filter-form .btn-sm {
    width: 100%;
  }
}

/* Attention section */
.attention-section {
  border-color: rgba(239, 68, 68, 0.2);
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(239, 68, 68, 0.03) 100%);
}

.attention-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.attention-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  transition: all 0.2s;
}

.attention-item:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.attention-badges {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.attention-info {
  flex: 1;
  min-width: 0;
}

.attention-player {
  font-weight: 600;
  font-size: 0.85rem;
}

.attention-desc {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attention-amount {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}

/* Table */
.table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.data-table {
  border: none;
  border-radius: 0;
}

.clickable-row,
.data-table tbody tr[onclick],
.data-table tbody tr[style*="cursor: pointer"] {
  cursor: pointer;
  transition: background 0.15s;
  -webkit-user-select: none;
  user-select: none;
}

.clickable-row:hover,
.data-table tbody tr[onclick]:hover,
.data-table tbody tr[style*="cursor: pointer"]:hover {
  background: var(--accent-dim) !important;
}

.text-truncate {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-muted { color: var(--text-muted); }
.text-sm { font-size: 0.8rem; }
.text-xs { font-size: 0.75rem; }
.mono { font-family: var(--font-mono); }

/* Disciplinary player identity stack */
.disc-player-cell {
  min-width: 220px;
}

.disc-player-card {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  gap: 5px;
  color: inherit;
  text-decoration: none;
  vertical-align: top;
}

.disc-player-card:hover .disc-player-name,
.disc-player-name:hover {
  color: var(--accent);
}

.disc-player-name {
  display: block;
  min-width: 0;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
}

.disc-player-card--compact .disc-player-name {
  max-width: 210px;
  font-size: 0.84rem;
}

.disc-player-card--unknown .disc-player-name {
  color: var(--text-secondary);
  font-weight: 600;
}

.disc-player-identities {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 360px;
}

.identity-chip-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}

.identity-chip-list--detail {
  margin-top: 2px;
}

.identity-detail-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.disc-player-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  min-height: 25px;
  padding: 4px 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 5px;
  background: rgba(15, 23, 42, 0.38);
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.25;
  cursor: copy;
  font-family: inherit;
}

.disc-player-chip:hover {
  border-color: rgba(79, 195, 247, 0.42);
  background: rgba(79, 195, 247, 0.1);
  color: var(--accent);
}

.disc-player-chip.is-copied {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.disc-player-chip.is-copy-error {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.disc-player-chip-label {
  flex: 0 0 auto;
  color: inherit;
  font-family: inherit;
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .disc-player-cell {
    min-width: 0;
  }

  .disc-player-card,
  .disc-player-name,
  .disc-player-identities {
    max-width: 100%;
  }

  .disc-player-chip {
    max-width: 100%;
  }
}

/* Detail field label (uppercase muted small label above a value) */
.detail-label {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Compact detail value with minimal margin */
.detail-value {
  margin: 2px 0;
}

/* Icon box used for evidence/link/text icons */
.icon-box {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  border-radius: 6px;
  flex-shrink: 0;
}

/* Two-column detail grid */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  overflow: hidden;
}

/* Two-column form grid with smaller gap (for cayden/config forms) */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

/* Small form label (used in cayden config forms) */
.form-label-sm {
  display: block;
  margin-bottom: 3px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Flex row with centered items and gap */
.flex-row-center {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Vertical flex list (column direction) */
.flex-col {
  display: flex;
  flex-direction: column;
}

/* Section card with compact padding */
.section-card--compact {
  padding: 16px;
}

/* Section sub-heading (used in character detail, etc.) */
.section-sub-heading {
  margin: 0 0 12px 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Action card heading (smaller, for form action cards) */
.action-heading {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
}

/* Table cell padding for detail tables */
.detail-table {
  width: 100%;
  font-size: 0.85rem;
}
.detail-table td {
  padding: 4px 8px 4px 0;
}
.detail-table td:first-child {
  width: 130px;
}

/* Flex item that fills available space with word wrapping */
.flex-fill {
  flex: 1;
  min-width: 0;
}

/* Radio/checkbox label with flex alignment */
.radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Optimize option label styling */
.optimize-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.optimize-label span {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Alert banner flex row (icon + text side by side) */
.alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.empty-text, .empty-state {
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.chart-fallback {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 22px;
  border: 1px dashed rgba(94, 110, 146, 0.42);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(15, 20, 33, 0.72), rgba(10, 14, 24, 0.72));
  color: var(--text-muted);
  text-align: center;
}

.chart-fallback__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  border: 1px solid rgba(139, 92, 246, 0.26);
  border-radius: 8px;
  color: #9f7aea;
  background: rgba(139, 92, 246, 0.12);
}

.chart-fallback__title {
  display: block;
  margin-bottom: 4px;
  color: var(--text-primary);
  font-weight: 700;
}

.chart-fallback__text {
  display: block;
  max-width: 280px;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Unread dot */
.unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: badgePulse 2s ease-in-out infinite;
}

/* Badges */
.badge-unread {
  background: rgba(79, 195, 247, 0.15);
  color: var(--accent);
}

.badge-issue {
  background: rgba(239, 68, 68, 0.15);
  color: var(--error);
}

.badge-delivery-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.badge-delivery-delivered {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}

.badge-delivery-added {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.badge-delivery-issue {
  background: rgba(239, 68, 68, 0.15);
  color: var(--error);
}

/* ===== Detail Layout ===== */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  align-items: start;
}

.detail-main { min-width: 0; }

/* Sidebar */
.sidebar-info {
  display: flex;
  flex-direction: column;
}

.sidebar-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(30, 30, 66, 0.4);
  gap: 12px;
}

.sidebar-row:last-child { border-bottom: none; }

.sidebar-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 90px;
}

.sidebar-row > span:last-child {
  text-align: right;
  font-size: 0.85rem;
  word-break: break-word;
}

/* ===== Conversation (Xenforo-inspired) ===== */
.conversation-card {
  display: flex;
  flex-direction: column;
  height: 700px;
  max-height: 80vh;
}

.chat-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 0;
  flex-shrink: 0;
}

.chat-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  background: none;
  border: none;
  color: #888;
  font-size: 0.85rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.chat-tab:hover {
  color: #ccc;
}

.chat-tab.active {
  color: #4fc3f7;
  border-bottom-color: #4fc3f7;
}

.chat-tab[data-tab="staff"].active {
  color: #ff9800;
  border-bottom-color: #ff9800;
}

.chat-tab-count {
  background: #e53935;
  color: #fff;
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  font-weight: 600;
}

.conversation-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-behavior: smooth;
}

.conversation-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
}

/* Message post (Xenforo-style) */
.msg-post {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.msg-post.msg-new {
  animation: msgSlideIn 0.4s ease-out both;
}

@keyframes msgSlideIn {
  from { opacity: 0.6; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.msg-author-col {
  width: 100px;
  flex-shrink: 0;
  padding: 12px 10px;
  background: var(--bg-inset);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.msg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.msg-author-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
}

.msg-role-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
}

.msg-role-player { background: rgba(79, 195, 247, 0.15); color: var(--accent); }
.msg-role-staff { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.msg-role-admin { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.msg-content-col {
  flex: 1;
  padding: 12px 16px;
  min-width: 0;
}

.msg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.msg-author-mobile {
  display: none;
  font-weight: 600;
  font-size: 0.85rem;
}

.msg-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: auto;
}

.msg-body {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Internal messages */
.msg-internal {
  border-color: rgba(245, 158, 11, 0.2);
  background: rgba(245, 158, 11, 0.03);
}

.msg-internal .msg-author-col {
  background: rgba(245, 158, 11, 0.06);
}

.msg-internal-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

/* System messages */
.msg-system {
  text-align: center;
  padding: 8px 16px;
  flex-shrink: 0;
}

.msg-system.msg-new {
  animation: msgSlideIn 0.3s ease-out both;
}

.msg-system-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--bg-inset);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
}

.msg-system .msg-time {
  display: block;
  margin-top: 2px;
  margin-left: 0;
}

/* Message input */
.msg-input-form {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: auto;
}

.msg-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msg-textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.4;
  resize: vertical;
  min-height: 60px;
  transition: border-color 0.2s;
}

.msg-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.msg-input-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.msg-internal-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.msg-internal-toggle:hover {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.msg-internal-toggle input { display: none; }

.msg-internal-toggle input:checked + svg { color: #f59e0b; }

.btn-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent);
  color: var(--bg-deep);
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-send:hover {
  background: #81d4fa;
}

/* ===== Delivery Section ===== */
.delivery-section {
  border-color: rgba(167, 139, 250, 0.2);
}

.delivery-status-display {
  margin-bottom: 12px;
}

.delivery-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
}

.delivery-pending {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.delivery-delivered {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.delivery-added {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.delivery-issue {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.delivery-note {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}

.delivery-actions {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.delivery-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-delivery {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-delivery-ok {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.btn-delivery-ok:hover {
  background: rgba(34, 197, 94, 0.25);
}

.btn-delivery-added {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.btn-delivery-added:hover {
  background: rgba(59, 130, 246, 0.25);
}

.btn-delivery-issue {
  background: rgba(239, 68, 68, 0.15);
  color: var(--error);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-delivery-issue:hover {
  background: rgba(239, 68, 68, 0.25);
}

.btn-delivery-reset {
  background: var(--bg-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.btn-delivery-reset:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-delivery-undo {
  background: rgba(239, 68, 68, 0.08);
  color: #e57373;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.btn-delivery-undo:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: #ef4444;
  color: #f87171;
}

.cancel-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.cancel-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.delivery-issue-form {
  display: flex;
  gap: 8px;
}

.form-control-sm {
  padding: 8px 12px;
  font-size: 0.8rem;
  flex: 1;
}

/* ===== Attachment list ===== */
.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* ===== Payment Form ===== */
.create-form .form-group {
  margin-bottom: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.discord-user-input {
  position: relative;
}

.discord-user-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--success);
  animation: fadeSlideUp 0.2s ease-out both;
}

.discord-preview-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.discord-user-error {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--error);
  animation: fadeSlideUp 0.2s ease-out both;
}

/* Type selector */
.type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.type-option input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  background: var(--bg-inset);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.85rem;
}

.type-card:hover {
  border-color: var(--border-bright);
  color: var(--text-primary);
}

.type-option input:checked + .type-card {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

/* Product search dropdown */
.product-search-wrap {
  position: relative;
}

.product-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  margin-top: 4px;
  z-index: 50;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.product-dropdown-item {
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border);
}

.product-dropdown-item:last-child { border-bottom: none; }

.product-dropdown-item:hover {
  background: var(--accent-dim);
}

.product-dropdown-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.product-dropdown-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.product-dropdown-price {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
}

/* ===== Notifications ===== */
.notif-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: all 0.2s;
  position: relative;
}

.notif-item:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.notif-unread {
  background: rgba(79, 195, 247, 0.03);
  border-color: rgba(79, 195, 247, 0.15);
}

.notif-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bg-inset);
  color: var(--text-muted);
}

.notif-unread .notif-icon {
  background: var(--accent-dim);
  color: var(--accent);
}

.notif-content { flex: 1; min-width: 0; }

.notif-title {
  font-size: 0.85rem;
  font-weight: 600;
}

.notif-message {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.notif-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 6px;
  animation: badgePulse 2s ease-in-out infinite;
}

/* ===== Player Messaging (on payment page) ===== */
.player-messages-card {
  margin-top: 16px;
  animation: fadeSlideUp 0.5s ease-out both;
}

.player-msg-thread {
  max-height: 350px;
  overflow-y: auto;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-behavior: smooth;
}

.player-msg-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 20px;
}

.player-msg {
  animation: fadeSlideUp 0.2s ease-out both;
}

.player-msg.player-msg-new {
  animation: msgSlideIn 0.3s ease-out both;
}

.player-msg-player { display: flex; justify-content: flex-end; }
.player-msg-staff { display: flex; justify-content: flex-start; }

.player-msg-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.85rem;
}

.player-msg-player .player-msg-bubble {
  background: var(--accent-dim);
  border: 1px solid rgba(79, 195, 247, 0.2);
  border-bottom-right-radius: 4px;
}

.player-msg-staff .player-msg-bubble {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.player-msg-author {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.player-msg-text {
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

.player-msg-time {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 4px;
  text-align: right;
}

.player-msg-system {
  text-align: center;
  padding: 4px;
}

.player-msg-sys-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

.player-msg-input-wrap {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.player-msg-input-wrap .text-input {
  flex: 1;
}

.btn-send-player {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--accent);
  color: var(--bg-deep);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.btn-send-player:hover {
  background: #81d4fa;
}

/* ===== Delivery Banner (Player Success Page) ===== */
.delivery-banner {
  margin: 16px 0;
}

.delivery-banner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  animation: fadeSlideUp 0.3s ease-out both;
}

.delivery-banner--pending {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.delivery-banner--delivered {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: var(--success);
}

.delivery-banner--added {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.delivery-banner--issue {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--error);
}

.delivery-banner-sub {
  font-size: 0.8rem;
  font-weight: 400;
  margin-top: 4px;
  opacity: 0.8;
}

/* ===== Responsive: Staff ===== */
/* ===== Mobile hamburger button ===== */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
}
.nav-hamburger:hover { color: var(--text-primary); background: var(--bg-raised); }
.nav-hamburger .bar {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: all 0.2s;
}
.nav-hamburger .bar + .bar { margin-top: 3px; }

/* Medium screens — compact nav to fit on one line */
@media (max-width: 1400px) {
  .staff-nav,
  .player-nav {
    gap: 6px;
    padding: 8px 12px;
  }
  .nav-brand { gap: 6px; margin-right: 0; }
  .nav-brand-text { display: none; }
  .nav-links { gap: 1px; }
  .nav-links .nav-link,
  .nav-links .nav-dropdown-toggle {
    padding: 6px 8px;
    font-size: 0.8rem;
    gap: 4px;
  }
  .nav-links .nav-link svg,
  .nav-links .nav-dropdown-toggle svg {
    display: none;
  }
  .nav-right { gap: 2px; }
  .nav-username { display: none; }
}

@media (max-width: 900px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }

  .nav-hamburger { display: flex; flex-direction: column; }

  .staff-nav,
  .player-nav {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
  }

  .nav-brand { margin-right: 0; }
  .nav-brand-text { display: none; }
  .nav-username { display: none; }

  .nav-right .nav-link {
    font-size: 0;
    gap: 0;
    padding: 6px;
  }
  .nav-right .nav-link svg { font-size: initial; }

  .nav-links {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 8px 0 4px;
    border-top: 1px solid var(--border);
  }
  .nav-links.open { display: flex; }

  .nav-links .nav-link svg,
  .nav-links .nav-dropdown-toggle svg {
    display: inline-block;
  }

  .nav-links .nav-link,
  .nav-links .nav-dropdown-toggle {
    padding: 10px 12px;
    font-size: 0.85rem;
    border-radius: 8px;
  }

  .nav-links .nav-dropdown { width: 100%; }

  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 2px 0 2px 28px;
    min-width: 0;
    margin-top: 0;
  }
  .nav-dropdown-menu .nav-link {
    padding: 9px 12px;
    font-size: 0.83rem;
    opacity: 0.85;
  }
  .nav-dropdown:hover .nav-dropdown-menu { display: none; }
  .nav-dropdown.open .nav-dropdown-menu { display: flex; flex-direction: column; }

  /* Mega menu → vertical on mobile */
  .nav-dropdown:hover .nav-dropdown-menu.nav-mega { display: none; }
  .nav-dropdown.open .nav-dropdown-menu.nav-mega { display: flex; flex-direction: column; width: auto; min-width: 0; padding: 2px 0 2px 28px; }
  .nav-mega-col { min-width: 0; padding: 0; }
  .nav-mega-col + .nav-mega-col { border-left: none; }
  .nav-mega-col .nav-group-label { padding: 8px 12px 2px; }

  .nav-dropdown-toggle::after {
    margin-left: auto;
  }
  .nav-dropdown.open .nav-dropdown-toggle::after {
    transform: rotate(-135deg);
    margin-bottom: -2px;
  }

  .online-indicator { display: none; }

  /* Notification popup — full-width on mobile */
  .notif-popup {
    position: fixed;
    top: 52px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: 70vh;
    z-index: 600;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .msg-author-col {
    width: 60px;
    padding: 8px 6px;
  }
  .msg-avatar { width: 32px; height: 32px; }
  .msg-author-name { font-size: 0.65rem; }

  .form-row {
    grid-template-columns: 1fr;
  }

  .delivery-issue-form {
    flex-direction: column;
  }

  .table-wrap {
    margin-left: -12px;
    margin-right: -12px;
    border-radius: 0;
  }

  .data-table { font-size: 0.8rem; }
  .data-table th, .data-table td { padding: 8px 10px; }
}

@media (max-width: 640px) {
  .staff-main { padding: 10px; }

  .msg-author-col { display: none; }
  .msg-author-mobile { display: inline; }
  .msg-content-col { padding: 10px 12px; }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .type-selector {
    grid-template-columns: 1fr;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .search-bar {
    flex-direction: column;
  }
  .search-bar .btn-primary,
  .search-bar .btn-sm {
    width: 100%;
  }

  .section-card {
    padding: 12px;
  }
}

/* =========================================================
   ORDER STATUS PAGE (Player success.ejs)
   ========================================================= */
.container--order {
  max-width: 580px;
  justify-content: flex-start;
  padding-top: 40px;
}

.order-status-card {
  padding: 24px;
}

.order-success-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: var(--success);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.order-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
}

.order-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(30, 30, 66, 0.5);
}

.order-info-row:last-child {
  border-bottom: none;
}

.order-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.order-value {
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
}

.order-delivery {
  padding: 16px;
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

.order-delivery-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* Delivery progress bar (steps) */
.delivery-progress {
  margin-top: 16px;
}

.delivery-progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.delivery-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.delivery-progress-step span {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}

.delivery-progress-step.active span {
  color: var(--accent);
  font-weight: 600;
}

.delivery-step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 2px solid var(--border-bright);
  transition: all 0.3s;
}

.delivery-progress-step.active .delivery-step-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.delivery-progress-line {
  width: 40px;
  height: 2px;
  background: var(--border-bright);
  margin: 0 8px;
  margin-bottom: 22px;
  transition: background 0.3s;
}

.delivery-progress-line.active {
  background: var(--accent);
}

/* Order actions */
.order-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.btn-receipt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

/* Messages card */
.order-messages-card {
  padding: 20px;
}

.order-messages-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.order-messages-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* Player message avatars */
.player-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 8px;
}

.player-msg-staff {
  gap: 0;
}

.player-msg-role {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  margin-left: 4px;
}

@media (max-width: 640px) {
  .container--order {
    padding-top: 20px;
  }

  .order-info-row {
    flex-direction: column;
    gap: 2px;
  }

  .order-value {
    text-align: left;
  }

  .delivery-progress-line {
    width: 24px;
  }
}

/* ===== Tillgodo Section (Payment Form) ===== */
.tillgodo-section .form-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tillgodo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 10px;
}

.tillgodo-banner-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tillgodo-label {
  font-size: 0.8rem;
  color: var(--text-secondary, #94a3b8);
}

.tillgodo-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #10b981;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.tillgodo-apply-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.tillgodo-apply-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #10b981;
  cursor: pointer;
}

.tillgodo-toggle-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary, #e2e8f0);
}

.tillgodo-details {
  margin-top: 12px;
  animation: fadeSlideIn 0.2s ease;
}

.tillgodo-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.tillgodo-item {
  padding: 10px 14px;
  background: rgba(30, 30, 66, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.tillgodo-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tillgodo-item-value {
  font-weight: 600;
  color: #10b981;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.tillgodo-item-desc {
  font-size: 0.82rem;
  color: var(--text-secondary, #94a3b8);
}

.tillgodo-item-expires {
  font-size: 0.75rem;
  color: var(--text-secondary, #94a3b8);
  margin-top: 4px;
  opacity: 0.7;
}

.tillgodo-summary {
  padding: 12px 14px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 8px;
  animation: fadeSlideIn 0.2s ease;
}

.tillgodo-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 0.85rem;
  color: var(--text-secondary, #94a3b8);
}

.tillgodo-summary-row .text-green {
  color: #10b981;
  font-weight: 600;
}

.tillgodo-summary-total {
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, #e2e8f0);
}

/* ===== Tillgodo Sidebar (Payment Detail) ===== */
.tillgodo-sidebar-card .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tillgodo-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tillgodo-sidebar-item {
  padding: 10px 12px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.12);
  border-radius: 8px;
}

.tillgodo-sidebar-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tillgodo-sidebar-value {
  font-weight: 700;
  color: #10b981;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.tillgodo-sidebar-type {
  font-size: 0.7rem;
}

.tillgodo-sidebar-desc {
  font-size: 0.8rem;
  color: var(--text-secondary, #94a3b8);
  margin-top: 4px;
}

.tillgodo-sidebar-expires {
  font-size: 0.72rem;
  color: var(--text-secondary, #94a3b8);
  opacity: 0.7;
  margin-top: 4px;
}

.tillgodo-sidebar-total {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text-primary, #e2e8f0);
  text-align: center;
}

.tillgodo-sidebar-total strong {
  color: #10b981;
}

/* ===== Tillgodos List Page ===== */
.tillgodo-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.tillgodo-stat-card {
  padding: 16px;
  background: rgba(30, 30, 66, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  text-align: center;
}

.tillgodo-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary, #e2e8f0);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.tillgodo-stat-value.text-green { color: #10b981; }
.tillgodo-stat-value.text-blue { color: #4fc3f7; }
.tillgodo-stat-value.text-yellow { color: #fbbf24; }
.tillgodo-stat-value.text-red { color: #f87171; }
.tillgodo-stat-value.text-muted { color: #64748b; }

.tillgodo-stat-label {
  font-size: 0.78rem;
  color: var(--text-secondary, #94a3b8);
  margin-top: 4px;
}

.badge-active {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}
.badge-redeemed {
  background: rgba(79, 195, 247, 0.15);
  color: #4fc3f7;
}
.badge-expired {
  background: rgba(100, 116, 139, 0.15);
  color: #64748b;
}
.badge-denied {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}
.badge-inactive {
  background: rgba(100, 116, 139, 0.15);
  color: #64748b;
}
.btn-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.btn-danger:hover {
  background: rgba(239, 68, 68, 0.25);
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Drag & Drop Reorder (Products) ===== */
.drag-handle {
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.15s;
}

.drag-handle:hover {
  background: rgba(255, 255, 255, 0.08);
}

.drag-handle:active {
  cursor: grabbing;
}

.drag-col {
  width: 36px;
  text-align: center;
}

tr.dragging {
  position: relative;
  z-index: 100;
  background: rgba(30, 30, 66, 0.95) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(79, 195, 247, 0.3);
  border-radius: 6px;
  opacity: 0.95;
}

tr.drag-placeholder {
  height: 48px;
  background: rgba(79, 195, 247, 0.06);
  border: 2px dashed rgba(79, 195, 247, 0.25);
  border-radius: 6px;
}

tr.drag-placeholder td {
  border: none !important;
}

.reorder-hint {
  font-size: 0.8rem;
  color: var(--text-secondary, #94a3b8);
  animation: fadeSlideIn 0.2s ease;
}

.reorder-save-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: rgba(14, 14, 30, 0.95);
  border: 1px solid rgba(79, 195, 247, 0.2);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  animation: slideUp 0.25s ease;
  backdrop-filter: blur(12px);
}

.reorder-save-text {
  font-size: 0.85rem;
  color: var(--text-primary, #e2e8f0);
}

.reorder-save-actions {
  display: flex;
  gap: 8px;
}

#reorderToggle.active {
  background: rgba(79, 195, 247, 0.15);
  border-color: rgba(79, 195, 247, 0.3);
  color: #4fc3f7;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== Player Portal ===== */

/* ===== Public Layout ===== */
.public-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.public-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
}

.public-header .nav-brand-text {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.public-header .nav-links {
  display: flex;
  gap: 4px;
  flex: 1;
}

.public-header .nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}

.public-header .nav-link:hover {
  color: var(--text-primary);
  background: var(--bg-raised);
}

.public-header .nav-link.active {
  color: var(--accent);
  background: var(--accent-dim);
}

.public-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  flex: 1;
  width: 100%;
}

/* ===== Tabs ===== */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.tab-btn {
  padding: 10px 18px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  font-family: var(--font-body);
  margin-bottom: -1px;
  text-decoration: none;
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--text-primary);
}

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ===== Search Bar ===== */
.search-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  align-items: center;
}

.search-input {
  flex: 1;
  padding: 10px 16px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: var(--font-body);
  line-height: 1.4;
  outline: none;
  transition: border-color 0.2s;
}

.search-input:focus {
  border-color: var(--accent);
}

.search-input::placeholder {
  color: var(--text-muted);
}

select.search-input,
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* ===== Ban Search ===== */
.ban-search-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: end;
  margin: 0 0 16px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.ban-search-panel--compact {
  margin-bottom: 16px;
}

.ban-search-main {
  min-width: 0;
}

.ban-search-label {
  display: block;
  margin: 0 0 5px;
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ban-search-input {
  min-width: 0;
  width: 100%;
}

.ban-search-hint {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.ban-search-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ban-search-actions .btn-primary.btn-sm {
  border-color: rgba(56, 189, 248, 0.66);
  background: linear-gradient(180deg, #67d8ff, #22b8ed);
  color: #06131d;
}

.ban-search-controls {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}

.ban-search-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.ban-search-chip-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ban-search-filter-chip {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.ban-search-filter-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ban-search-filter-chip:has(input:checked) {
  border-color: var(--accent-purple);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(56, 189, 248, 0.1));
  color: #dff8ff;
}

.ban-search-note {
  margin: -6px 0 14px;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.ban-search-note a {
  color: var(--accent);
  text-decoration: none;
}

.ban-search-note a:hover {
  text-decoration: underline;
}

.ban-search-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 0.86rem;
}

.ban-search-summary strong {
  color: var(--text-primary);
}

.ban-search-summary span {
  color: var(--text-muted);
}

.ban-results-wrap {
  margin-top: 0;
}

.ban-results-table td {
  vertical-align: middle;
}

.ban-result-identifiers {
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 0.76rem;
}

.ban-result-identifiers summary {
  width: max-content;
  cursor: pointer;
  color: var(--accent);
}

.ban-result-identifiers div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  margin-top: 5px;
  max-width: 520px;
}

.ban-result-identifiers code {
  overflow-wrap: anywhere;
  color: var(--text-primary);
}

.ban-search-empty {
  margin-top: 0;
}

/* ===== Sound Grid ===== */
.sound-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.sound-chip {
  padding: 10px 16px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-primary);
  transition: border-color 0.2s;
}

.sound-chip:hover {
  border-color: var(--border-bright);
}

/* ===== Stat Cards (player) ===== */
.player-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.player-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.player-stat-card .stat-icon {
  font-size: 1.5rem;
}

.player-stat-card .stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.player-stat-card .stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.player-stat-card--accent .stat-value { color: var(--accent); }
.player-stat-card--success .stat-value { color: var(--success); }
.player-stat-card--warning .stat-value { color: #f59e0b; }
.player-stat-card--error .stat-value { color: var(--error); }

/* ===== Membership Status ===== */
.membership-status {
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}

.membership-status--active {
  border-color: rgba(34, 197, 94, 0.3);
}

.membership-status--active .membership-icon {
  color: var(--success);
}

.membership-status--test {
  border-color: rgba(79, 195, 247, 0.3);
}

.membership-status--test .membership-icon {
  color: var(--accent);
}

.membership-status--revoked {
  border-color: rgba(239, 68, 68, 0.3);
}

.membership-status--revoked .membership-icon {
  color: var(--error);
}

.membership-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.membership-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.membership-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ===== Freeze Banner ===== */
.freeze-banner {
  padding: 14px 20px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  color: var(--error);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}

.freeze-banner svg {
  flex: 0 0 auto;
}

.freeze-banner__content {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.freeze-banner__meta {
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.35;
}

.krim-pause-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 18px 0 22px;
  padding: 18px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(59, 130, 246, 0.08));
}

.krim-pause-panel__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.24);
}

.krim-pause-panel__content {
  min-width: 0;
}

.krim-pause-panel__kicker {
  display: block;
  margin-bottom: 3px;
  color: #f59e0b;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.krim-pause-panel h2 {
  margin: 0 0 5px;
  color: var(--text-primary);
  font-size: 1.05rem;
  line-height: 1.25;
}

.krim-pause-panel p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.45;
}

.krim-pause-panel p.krim-pause-panel__reason {
  margin-top: 4px;
}

.krim-pause-panel__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: rgba(59, 130, 246, 0.16);
  color: #93c5fd;
  border: 1px solid rgba(147, 197, 253, 0.24);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.krim-pause-panel__link:hover {
  background: rgba(59, 130, 246, 0.24);
  color: #bfdbfe;
}

.disciplinary-mini-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 18px 0 22px;
  padding: 18px;
  border: 1px solid rgba(79, 195, 247, 0.24);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(79, 195, 247, 0.1), rgba(34, 197, 94, 0.07));
}

.disciplinary-mini-panel--blocked {
  border-color: rgba(239, 68, 68, 0.34);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.13), rgba(245, 158, 11, 0.08));
}

.disciplinary-mini-panel__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: #7dd3fc;
  background: rgba(79, 195, 247, 0.13);
  border: 1px solid rgba(79, 195, 247, 0.2);
}

.disciplinary-mini-panel--blocked .disciplinary-mini-panel__icon {
  color: #f87171;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.22);
}

.disciplinary-mini-panel__content {
  min-width: 0;
}

.disciplinary-mini-panel__kicker {
  display: block;
  margin-bottom: 3px;
  color: #7dd3fc;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.disciplinary-mini-panel--blocked .disciplinary-mini-panel__kicker {
  color: #f87171;
}

.disciplinary-mini-panel h2 {
  margin: 0 0 5px;
  color: var(--text-primary);
  font-size: 1.05rem;
  line-height: 1.25;
}

.disciplinary-mini-panel p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.45;
}

.disciplinary-mini-panel__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.disciplinary-mini-panel__metrics span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.disciplinary-mini-panel__metrics strong {
  color: var(--text-primary);
  font-weight: 800;
}

.disciplinary-mini-panel__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: rgba(79, 195, 247, 0.14);
  color: #93c5fd;
  border: 1px solid rgba(147, 197, 253, 0.24);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.disciplinary-mini-panel__link:hover {
  background: rgba(79, 195, 247, 0.22);
  color: #bfdbfe;
}

@media (max-width: 640px) {
  .krim-pause-panel,
  .disciplinary-mini-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .krim-pause-panel__link,
  .disciplinary-mini-panel__link {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* ===== Product/Price Cards ===== */
.category-section {
  margin-bottom: 32px;
}

.category-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  transition: border-color 0.2s;
}

.product-card:hover {
  border-color: var(--border-bright);
}

.product-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.product-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.product-price {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
}

/* ===== List Tables (fixed layout to prevent width jumping between pages) ===== */
.list-table-fixed {
  table-layout: fixed;
}

.list-table-fixed td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-table-fixed td:has(.ped-thumb-link) {
  overflow: visible;
  white-space: normal;
}

/* ===== List Overview Cards ===== */
.list-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.list-overview-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 24px;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}

.list-overview-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.list-overview-card .card-icon {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.list-overview-card .card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.list-overview-card .card-count {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ===== Pagination ===== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.pagination a,
.pagination span.current,
.pagination span.pagination-dots {
  padding: 7px 12px;
  border-radius: var(--radius-xs);
  font-size: 0.8rem;
  text-decoration: none;
  transition: all 0.15s;
}

.pagination a {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.pagination a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.pagination a.active,
.pagination span.current {
  background: var(--accent-dim);
  border: 1px solid rgba(79, 195, 247, 0.3);
  color: var(--accent);
  font-weight: 600;
  pointer-events: none;
}

.pagination a.disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ===== Delivery/Tillgodo Badge ===== */
.badge-tillgodo { background: rgba(79, 195, 247, 0.15); color: #4fc3f7; }
.badge-used { background: rgba(136, 136, 136, 0.15); color: #888; }
.badge-permanent { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.badge-temporary { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

/* ===== Asset Tag ===== */
.asset-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(79, 195, 247, 0.1);
  border: 1px solid rgba(79, 195, 247, 0.2);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--accent);
  margin: 2px;
}

/* ===== Login Button ===== */
.login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #5865F2;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.2s;
}

.login-btn:hover {
  background: #4752C4;
}

/* ===== Profile Header ===== */
.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}

.profile-header__left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--border-bright);
  flex-shrink: 0;
  object-fit: cover;
}

/* ===== Status Banners ===== */
.status-banner {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.status-banner strong {
  font-weight: 600;
}

.status-banner--red {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
}

.status-banner--orange {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #f59e0b;
}

.status-banner--blue {
  background: rgba(79, 195, 247, 0.08);
  border: 1px solid rgba(79, 195, 247, 0.25);
  color: #4fc3f7;
}

/* ===== Profile Subsection Titles ===== */
.profile-subsection-title {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin: 16px 0 8px;
}

.profile-subsection-title:first-of-type {
  margin-top: 0;
}

/* ===== Clickable Table Rows ===== */
.clickable-row {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.clickable-row:hover {
  background: var(--bg-raised) !important;
}

/* ===== Membership Inline Cards ===== */
.membership-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.membership-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  font-size: 0.85rem;
}

.membership-inline--revoked {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.membership-inline--test {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.15);
}

/* ===== Responsive: Player & Public ===== */
@media (max-width: 768px) {
  .public-header {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 8px;
  }

  .public-header .nav-brand {
    flex: 0 0 auto;
  }

  .public-header .nav-right {
    margin-left: auto;
  }

  .public-header .login-btn {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 8px;
  }

  .public-header .nav-links {
    order: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    overflow-x: visible;
  }

  .public-header .nav-link {
    justify-content: center;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid rgba(82, 97, 131, 0.38);
    background: rgba(15, 20, 33, 0.72);
  }

  .public-container {
    padding: 16px;
  }

  .player-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .list-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sound-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  .player-stats {
    grid-template-columns: 1fr;
  }

  .list-overview-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Image Thumbnails ===== */
.ped-thumb-link {
  display: inline-block;
}
.ped-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--bg-inset);
  vertical-align: middle;
  transition: transform 0.2s, border-color 0.2s;
}
.ped-thumb:hover {
  transform: scale(1.5);
  border-color: var(--accent);
  z-index: 10;
  position: relative;
}

/* ===== Pagination Info ===== */
.pagination-info {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-left: 8px;
}

.pagination-dots {
  color: var(--text-muted);
  padding: 7px 2px;
  font-size: 0.8rem;
  user-select: none;
  border: none;
  background: none;
}

.pagination-goto {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.pagination-goto .pagination-input {
  width: 52px;
  padding: 6px 8px;
  background: var(--bg-inset);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.8rem;
  text-align: center;
  -moz-appearance: textfield;
}

.pagination-goto .pagination-input::-webkit-inner-spin-button,
.pagination-goto .pagination-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pagination-goto .pagination-input:focus {
  outline: none;
  background: var(--bg-secondary);
}

.pagination-goto button {
  padding: 6px 10px;
  background: var(--bg-inset);
  border: none;
  color: var(--text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.pagination-goto button:hover {
  background: var(--accent-dim);
  color: var(--accent);
}

/* ===== Player Links ===== */
.player-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.player-link:hover {
  border-bottom-color: var(--accent);
}

/* ===== Notes Links ===== */
.notes-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85rem;
  border-bottom: 1px dotted var(--accent);
}
.notes-link:hover {
  border-bottom-style: solid;
}
.notes-text {
  font-size: 0.85rem;
  cursor: default;
}

/* ===== Lightbox ===== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  cursor: zoom-out;
}
.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}
.lightbox-overlay img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lightbox-overlay.active img {
  transform: scale(1);
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  background: none;
  border: none;
  line-height: 1;
}
.lightbox-close:hover {
  opacity: 1;
}

/* ===== No Access Page ===== */
.no-access-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark);
  padding: 24px;
}
.no-access-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  max-width: 440px;
  text-align: center;
}
.no-access-icon {
  margin-bottom: 20px;
  opacity: 0.9;
}
.no-access-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.no-access-text {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 8px;
}

/* ===== Welcome Section ===== */
.welcome-hero {
  background: linear-gradient(135deg, rgba(79, 195, 247, 0.08) 0%, rgba(79, 195, 247, 0.02) 100%);
  border: 1px solid rgba(79, 195, 247, 0.15);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.welcome-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(79, 195, 247, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.welcome-greeting {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.welcome-greeting span {
  color: var(--accent);
}
.welcome-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 520px;
}
.welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(79, 195, 247, 0.1);
  border: 1px solid rgba(79, 195, 247, 0.2);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.78rem;
  color: var(--accent);
  margin-top: 16px;
  font-weight: 500;
}
.welcome-quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.welcome-quick-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: border-color 0.2s, background 0.2s;
}
.welcome-quick-link:hover {
  border-color: var(--accent);
  background: rgba(79, 195, 247, 0.04);
}
.welcome-quick-link svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* ===== Number Stepper ===== */
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-inset);
}
.stepper-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: none;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.stepper-btn:hover {
  background: var(--accent);
  color: #fff;
}
.stepper-btn:active {
  transform: scale(0.95);
}
.stepper-input {
  width: 48px;
  height: 36px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: var(--bg-inset);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-mono);
  -moz-appearance: textfield;
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ===== Community Dashboard ===== */

/* Server Status Bar */
.server-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 0.85rem;
  gap: 16px;
}
.server-status-bar--online {
  border-color: rgba(34, 197, 94, 0.3);
}
.server-status-bar--offline {
  border-color: rgba(239, 68, 68, 0.3);
}
.server-status-left {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.server-status-right {
  display: flex;
  align-items: center;
  gap: 20px;
  line-height: 1;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.server-status-bar .status-text {
  line-height: 1;
  margin-top: 0;
  display: inline;
  font-size: 0.85rem;
}
.server-status-bar--online .status-dot {
  background: var(--success);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  animation: pulse-dot 2s infinite;
}
.server-status-bar--offline .status-dot {
  background: var(--error);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}
.server-status-bar--online .status-text {
  color: var(--success);
  font-weight: 600;
  margin-top: 0;
}
.server-status-bar--offline .status-text {
  color: var(--error);
  font-weight: 600;
  margin-top: 0;
}
.status-players,
.status-uptime {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.status-players svg,
.status-uptime svg {
  color: var(--text-muted);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Recent Members Grid */
.recent-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.recent-member-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.recent-member-card:hover {
  border-color: var(--accent);
  background: rgba(79, 195, 247, 0.04);
}
.recent-member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.recent-member-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.recent-member-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-member-time {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Members Strip (horizontal avatar row) */
.members-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.members-strip-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}
.members-strip-avatars {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.members-strip-avatars::-webkit-scrollbar { display: none; }
.members-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  flex-shrink: 0;
}
.members-strip-item img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}
.members-strip-item:hover img {
  border-color: var(--accent);
}
.members-strip-item span {
  font-size: 0.65rem;
  color: var(--text-secondary);
  max-width: 56px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Community Grid (two-column) */
.community-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.community-grid--single {
  grid-template-columns: 1fr;
}

/* Event Feed */
.event-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.event-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.event-item:last-child {
  border-bottom: none;
}
.event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 7px;
}
.event-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.event-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.event-name {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
}
.event-name:hover {
  color: var(--accent);
}
.event-time {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Top Members / Veterans */
.top-members-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.top-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background 0.15s;
}
.top-member-row:last-child {
  border-bottom: none;
}
.top-member-row:hover {
  background: rgba(79, 195, 247, 0.04);
}
.top-rank {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.top-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.top-member-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.top-member-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-member-since {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Personal Section Divider */
.personal-section-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0 20px;
}
.personal-section-divider::before,
.personal-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.personal-section-divider span {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ===== Community Dashboard Responsive ===== */
@media (max-width: 768px) {
  .server-status-bar {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .server-status-right {
    justify-content: center;
    gap: 14px;
  }
  .community-grid {
    grid-template-columns: 1fr;
  }
  .recent-members-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* ===== Chat File Attachments ===== */
.btn-attach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s;
  flex-shrink: 0;
}
.btn-attach:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

.msg-file {
  margin-top: 6px;
}
.msg-file-thumb-link {
  display: block;
  margin-bottom: 6px;
}
.msg-file-thumb {
  max-width: 240px;
  max-height: 180px;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.15s;
}
.msg-file-thumb:hover {
  opacity: 0.85;
}
.msg-file-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.82rem;
  transition: all 0.15s;
}
.msg-file-link:hover {
  background: var(--accent-dim);
  border-color: rgba(79, 195, 247, 0.3);
}
.msg-file-size {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-family: var(--font-mono);
}
.msg-file-expired {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: italic;
}

.msg-file-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  font-size: 0.82rem;
}
.msg-file-preview-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-file-preview-remove {
  cursor: pointer;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 2px;
  display: flex;
  align-items: center;
  font-size: 1rem;
}
.msg-file-preview-remove:hover {
  color: #ef4444;
}
.msg-file-preview-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
}
.msg-file-preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--bg-raised);
  border-radius: 6px;
  min-width: 0;
  max-width: 100%;
}
.msg-file-preview-item .msg-file-preview-thumb {
  width: 32px;
  height: 32px;
}
.msg-upload-progress {
  height: 3px;
  background: var(--bg-inset);
  border-radius: 3px;
  margin: 0 12px 6px;
  overflow: hidden;
}
.msg-upload-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s;
  width: 0%;
}

/* Player chat file elements */
.player-msg-file {
  margin-top: 6px;
}
.player-msg-file-thumb {
  max-width: 200px;
  max-height: 150px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  object-fit: cover;
  cursor: pointer;
  display: block;
  margin-bottom: 4px;
  transition: opacity 0.15s;
}
.player-msg-file-thumb:hover {
  opacity: 0.85;
}
.player-msg-file-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(79, 195, 247, 0.08);
  border: 1px solid rgba(79, 195, 247, 0.15);
  border-radius: 8px;
  color: #4fc3f7;
  text-decoration: none;
  font-size: 0.8rem;
  transition: all 0.15s;
}
.player-msg-file-link:hover {
  background: rgba(79, 195, 247, 0.15);
}
.player-chat-file-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: rgba(79, 195, 247, 0.06);
  border: 1px solid rgba(79, 195, 247, 0.15);
  border-radius: 10px;
  font-size: 0.82rem;
}
.player-chat-file-preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(79, 195, 247, 0.08);
  border-radius: 6px;
  min-width: 0;
  max-width: 100%;
}
.player-chat-file-preview-item img {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.player-chat-file-preview-item svg {
  flex-shrink: 0;
  color: var(--text-secondary, rgba(255,255,255,0.5));
}
.player-chat-file-preview-item .file-info {
  flex: 1;
  min-width: 0;
}
.player-chat-file-preview-item .file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.player-chat-file-preview-item .file-meta {
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
}
.player-chat-file-remove {
  cursor: pointer;
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  padding: 2px;
  display: flex;
  font-size: 1rem;
}
.player-chat-file-remove:hover {
  color: #ef4444;
}
.player-chat-upload-progress {
  height: 3px;
  background: rgba(79, 195, 247, 0.15);
  border-radius: 3px;
  margin: 6px 0;
  overflow: hidden;
}
.player-chat-upload-progress-bar {
  height: 100%;
  background: #4fc3f7;
  border-radius: 3px;
  transition: width 0.3s;
  width: 0%;
}
.player-msg-input-wrap.chat-closed {
  opacity: 0.6;
  pointer-events: none;
}
.chat-closed-notice {
  text-align: center;
  padding: 12px;
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ===== Discord-style drag-and-drop overlay ===== */
.chat-drop-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(10, 10, 26, 0.92);
  border: 2px dashed rgba(79, 195, 247, 0.5);
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  animation: dropFadeIn 0.15s ease;
}
.chat-drop-overlay.visible {
  display: flex;
}
.chat-drop-overlay svg {
  color: #4fc3f7;
  opacity: 0.8;
}
.chat-drop-overlay-title {
  color: #4fc3f7;
  font-weight: 700;
  font-size: 1.1rem;
}
.chat-drop-overlay-hint {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
}
@keyframes dropFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* Make conversation card a drop target */
.conversation-card {
  position: relative;
}

/* Player chat (success page) drop target */
.order-messages-card {
  position: relative;
}

/* ===== Asset Filter Bar ===== */
.section-card .filter-bar {
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 0;
}
.filter-search {
  position: relative;
}
.filter-search input {
  width: 100%;
  padding: 0.625rem 0.75rem 0.625rem 2.25rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-family: var(--font-body);
  transition: border-color 0.15s;
}
.filter-search input:focus {
  outline: none;
  border-color: var(--accent);
}
.filter-search input::placeholder {
  color: var(--text-muted);
}
.filter-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 0.875rem;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.filter-divider {
  width: 1px;
  height: 1.25rem;
  background: var(--border-bright);
  margin: 0 0.25rem;
  flex-shrink: 0;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  transition: all 0.15s;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.3;
}
.filter-pill:hover {
  color: var(--text-primary);
  border-color: var(--border-bright);
  background: var(--bg-raised);
}
.filter-pill.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}
.filter-pill .pill-count {
  font-size: 0.7rem;
  opacity: 0.6;
  font-weight: 400;
}
.filter-pill.active .pill-count {
  opacity: 0.8;
}
.filter-select {
  padding: 0.375rem 0.625rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-family: var(--font-body);
  cursor: pointer;
}
.filter-select:focus {
  outline: none;
  border-color: var(--accent);
}
.filter-count {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ===== Sortable Table Headers ===== */
th.sortable,
.th-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th.sortable:hover,
.th-sortable:hover {
  color: var(--accent);
}
.sort-header {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.sort-header:hover {
  color: var(--accent);
}
.sort-arrow {
  font-size: 0.7em;
  margin-left: 0.25rem;
  opacity: 0.4;
}
.sort-arrow.active {
  opacity: 1;
  color: var(--accent);
}
.group-header-row td {
  background: var(--bg-raised);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.875rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.badge-source-def {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}
.badge-source-imp {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}
.badge-patent {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}
.badge-category {
  background: rgba(107, 114, 128, 0.2);
  color: #d1d5db;
  font-size: 0.75rem;
}
.ped-category-header {
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ped-category-header .count {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 400;
}

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.active {
  display: flex;
}
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.modal-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title .modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}
.modal-title .modal-close:hover {
  color: var(--text-primary);
}
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* Player disciplinary modals
   Kept outside the EJS <head> so PJAX navigations get the same centered modal. */
.disc-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: transparent;
  border: 0;
  border-radius: 0;
  width: auto;
  max-width: none;
  max-height: none;
  overflow: visible;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  isolation: isolate;
  transition: opacity 0.2s ease;
}

.disc-profile-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.disc-profile-modal__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(3, 6, 13, 0.76);
}

.disc-profile-modal__content {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  max-height: min(84vh, calc(100vh - 48px));
  overflow-y: auto;
  padding: 24px;
  background: #111827;
  border: 1px solid rgba(88, 101, 242, 0.32);
  border-radius: 12px;
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.62);
  transform: translateY(8px);
  transition: transform 0.2s ease;
}

.disc-profile-modal.active .disc-profile-modal__content {
  transform: translateY(0);
}

.disc-profile-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .disc-profile-modal {
    align-items: flex-start;
    padding: 18px 14px calc(96px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }

  .disc-profile-modal__content {
    width: 100%;
    max-height: none;
    padding: 20px;
  }

  .disc-profile-modal__actions {
    justify-content: stretch;
  }

  .disc-profile-modal__actions .btn,
  .disc-profile-modal__actions .btn-primary,
  .disc-profile-modal__actions .btn-secondary,
  .disc-profile-modal__actions .btn-sm {
    flex: 1 1 140px;
  }
}

/* ===== Disciplinary ===== */

.disciplinary-responsive-table {
  width: 100%;
}

.disciplinary-responsive-table .data-table {
  width: 100%;
}

.disciplinary-responsive-table .disc-player-cell,
.disciplinary-responsive-table .text-truncate {
  min-width: 0;
}

.disciplinary-locked-state {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
  color: #fbbf24;
  font-size: 0.86rem;
  line-height: 1.45;
}

.disciplinary-locked-state strong {
  color: #fde68a;
}

.disciplinary-action-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

@media (max-width: 760px) {
  .staff-main:has(.disciplinary-responsive-table),
  .staff-main:has(.disc-track-grid),
  .staff-main:has(.collision-list) {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .search-bar {
    align-items: stretch;
  }

  .search-bar .btn-primary,
  .search-bar .btn-secondary,
  .search-bar .btn-sm {
    min-height: 42px;
  }

  .disciplinary-responsive-table.table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .disciplinary-responsive-table .mobile-card-table {
    min-width: 0 !important;
  }

  .disciplinary-responsive-table .mobile-card-table tr {
    background: linear-gradient(180deg, rgba(18, 23, 36, 0.97), rgba(11, 15, 26, 0.97));
  }

  .disciplinary-responsive-table .mobile-card-table td[data-label]:not(.mobile-card-title)::before {
    display: inline !important;
    margin-right: 6px;
    color: #6f7b94;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .disciplinary-responsive-table .mobile-card-table td[data-label]:not(.mobile-card-title) {
    display: block !important;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
  }

  .disciplinary-responsive-table .mobile-card-table .mobile-card-title {
    grid-column: 1 / -1;
    margin-bottom: 4px !important;
  }

  .disciplinary-responsive-table .mobile-card-table td:last-child .btn-sm,
  .disciplinary-responsive-table .mobile-card-table td:last-child .btn-primary,
  .disciplinary-responsive-table .mobile-card-table td:last-child .btn-secondary,
  .disciplinary-responsive-table .mobile-card-table td:last-child form,
  .disciplinary-responsive-table .mobile-card-table td:last-child a {
    width: 100%;
    justify-content: center;
  }

  .disciplinary-responsive-table .evi-detail-row {
    margin-top: -6px;
    border-top: 0;
    background: rgba(2, 6, 23, 0.72);
  }

  .disciplinary-responsive-table .evi-detail-row td {
    display: block !important;
    width: 100% !important;
  }

  .disc-events-table,
  .disc-krim-events-table,
  .disc-blacklist-table,
  .disc-table {
    min-width: 0 !important;
    table-layout: auto !important;
  }

  .disc-reason-text,
  .disc-event-rule-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .collision-topline,
  .collision-search-form {
    width: 100%;
  }
}

/* Level badge (search + player profile) */
.disc-level-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 6px; font-weight: 600; font-size: 0.9rem;
}

/* Progress bars (player profile) */
.disc-progress { margin-top: 16px; }
.disc-progress-labels {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px;
}
.disc-progress-track {
  background: var(--bg-inset); border-radius: 4px; height: 8px; overflow: hidden;
}
.disc-progress-fill {
  height: 100%; border-radius: 4px; transition: width 0.3s;
}

/* Meta grid (player profile) */
.disc-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px;
}
.disc-meta-grid > div > label {
  color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.disc-meta-grid > div > p { margin: 2px 0; }

/* Ban status inline badge */
.disc-ban-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 4px; font-weight: 600; font-size: 0.85rem;
}

.disc-actor-cell {
  min-width: 130px;
  max-width: 190px;
}

.disc-actor-name {
  display: block;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 650;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.disc-actor-id {
  display: block;
  max-width: 160px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.disc-origin-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 3px;
  padding: 1px 6px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 650;
}

/* Actions row */
.disc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Blacklist badge */
.bl-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 500;
}

.disc-blacklist-table {
  width: 100%;
}

.disc-blacklist-actions-cell {
  white-space: nowrap;
}

.disc-blacklist-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.disc-blacklist-actions form {
  display: inline-flex;
  margin: 0;
}

.disc-blacklist-action-btn {
  min-height: 30px;
  padding: 5px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.disc-blacklist-action-btn--neutral {
  background: rgba(107, 114, 128, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.26);
  color: #a8b2c9;
}

.disc-blacklist-action-btn--neutral:hover {
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(148, 163, 184, 0.42);
  color: #dbe4f5;
}

.disc-blacklist-action-btn--ip {
  background: rgba(79, 195, 247, 0.1);
  border: 1px solid rgba(79, 195, 247, 0.28);
  color: var(--accent);
}

.disc-blacklist-action-btn--ip:hover {
  background: rgba(79, 195, 247, 0.16);
  border-color: rgba(79, 195, 247, 0.48);
}

/* Remark form (player profile) */
.remark-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.remark-form .form-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.remark-form .form-row .form-group { flex: 1; min-width: 200px; }

/* Voided row in events table */
.data-table tr.voided td { opacity: 0.5; text-decoration: line-through; }

/* Evidence toggle button */
.evi-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 10px; cursor: pointer;
  color: var(--accent); font-size: 0.78rem; font-weight: 500;
  transition: all 0.15s;
}
.evi-toggle:hover { background: rgba(79, 195, 247, 0.08); border-color: var(--accent); }
.evi-toggle .evi-chevron { transition: transform 0.2s; flex-shrink: 0; }
.evi-toggle.expanded { background: rgba(79, 195, 247, 0.06); border-color: rgba(79, 195, 247, 0.4); }
.evi-toggle.expanded .evi-chevron { transform: rotate(180deg); }

/* Evidence detail row */
.evi-detail-cell {
  padding: 12px 16px 14px 16px; background: var(--bg-inset);
  border-left: 3px solid rgba(79, 195, 247, 0.35);
}
.evi-detail-cell .evi-item {
  display: flex; align-items: baseline; gap: 8px; font-size: 0.82rem;
  padding: 4px 0;
}
.evi-detail-cell .evi-item + .evi-item { border-top: 1px solid rgba(255,255,255,0.04); }
.evi-upload-form {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--border);
}
.evi-upload-form .evi-field label {
  font-size: 0.72rem; color: var(--text-muted); display: block; margin-bottom: 3px;
}
.evi-upload-form .evi-field input[type="text"] { font-size: 0.8rem; padding: 6px 10px; }
.evi-upload-form .evi-field input[type="file"] { font-size: 0.78rem; max-width: 200px; }

/* Blacklist type badges */
.bl-type-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.bl-type-duping      { background: rgba(239, 68, 68, 0.15); color: var(--error); }
.bl-type-moddare     { background: rgba(239, 68, 68, 0.15); color: var(--error); }
.bl-type-rasism       { background: rgba(127, 29, 29, 0.25); color: #fca5a5; }
.bl-type-tredjeparts  { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.bl-type-perma        { background: rgba(239, 68, 68, 0.14); color: #f87171; }
.bl-type-grooming     { background: rgba(127, 29, 29, 0.25); color: #fca5a5; }
.bl-type-klakesko     { background: rgba(220, 38, 38, 0.15); color: #dc2626; }
.bl-type-other        { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }

/* Blacklist status badges */
.status-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.status-confirmed { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.status-pending   { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.status-revoked   { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }

/* Revoke detail */
.revoke-detail {
  margin-top: 6px;
  padding: 4px 0 4px 8px;
  border-left: 2px solid rgba(156, 163, 175, 0.3);
  font-size: 0.75rem;
  line-height: 1.5;
  color: #6b7280;
  max-width: 200px;
}
.revoke-detail span { color: #9ca3af; }

/* Dashboard quick links */
.quick-links { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.quick-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--bg-inset); border-radius: 8px; text-decoration: none;
  color: var(--text-primary); font-size: 0.85rem; transition: background 0.15s;
}
.quick-link:hover { background: var(--border); }
.quick-link-icon { font-size: 1.1rem; width: 24px; text-align: center; }
.quick-link-label { flex: 1; }
.quick-link-arrow { color: var(--text-muted); font-size: 0.8rem; }

/* Dashboard two-column grid */
.two-col-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;
}
@media (max-width: 768px) {
  .two-col-grid { grid-template-columns: 1fr; }
}

/* Ban type table (config) */
.ban-type-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.ban-type-table th {
  text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border);
  color: var(--text-muted); font-weight: 500; text-transform: uppercase; font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.ban-type-table td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ban-type-table tr:hover td { background: rgba(255,255,255,0.02); }

/* Config row (config page) */
.config-grid { display: flex; flex-direction: column; gap: 24px; }
.config-row {
  display: grid; grid-template-columns: 200px 100px 1fr; gap: 10px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.config-row:last-child { border-bottom: none; }
.config-label { font-size: 0.85rem; color: var(--text-secondary); }
.config-badge {
  font-size: 0.72rem; padding: 2px 8px; border-radius: 4px; text-align: center; white-space: nowrap;
}
.badge-default { background: rgba(100,100,100,0.15); color: var(--text-muted); }
.badge-custom { background: rgba(79, 195, 247, 0.15); color: var(--accent); }

/* Preview card (register form) */
.preview-card {
  padding: 16px; background: var(--bg-raised); border: 1px solid var(--border-bright);
  border-radius: 10px; font-size: 0.85rem; color: var(--text-secondary);
  transition: all 0.3s ease;
}
.preview-card.has-data { border-color: var(--accent); }
.preview-card.ban-triggered { border-color: var(--error); background: rgba(239,68,68,0.06); }
.preview-card.blacklist-type { border-color: #dc2626; background: rgba(220,38,38,0.08); }
.preview-bar-bg {
  height: 10px; background: var(--bg-deep); border-radius: 5px; overflow: hidden;
  margin: 6px 0;
}
.preview-bar-fill {
  height: 100%; border-radius: 5px; transition: width 0.4s ease;
}
.preview-label { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 2px; }
.preview-value { font-weight: 600; font-size: 0.95rem; }
.preview-separator { border-top: 1px solid var(--border-bright); margin: 10px 0; }
.preview-alert {
  padding: 8px 12px; border-radius: 6px; margin-top: 8px;
  font-size: 0.82rem; font-weight: 500;
}
.preview-alert-info { background: rgba(79,195,247,0.1); color: var(--accent); }
.preview-alert-warn { background: rgba(243,156,18,0.1); color: #f39c12; }
.preview-alert-ban { background: rgba(239,68,68,0.12); color: #f87171; }
.preview-alert-blacklist { background: rgba(220,38,38,0.15); color: #dc2626; }

/* Ban type dropdown (register form) */
.bantyp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bantyp-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid rgba(79, 195, 247, 0.3); border-radius: 6px;
  padding: 3px 8px; font-size: 0.8rem; cursor: default;
}
.bantyp-tag button {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 2px;
}
.bantyp-tag button:hover { color: var(--error); }
.bantyp-dropdown { position: relative; }
.bantyp-options {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: var(--bg-raised); border: 1px solid var(--border-bright); border-radius: 8px;
  max-height: 250px; overflow-y: auto; display: none; margin-top: 4px;
}
.bantyp-options.open { display: block; }
.bantyp-option {
  padding: 8px 12px; cursor: pointer; font-size: 0.85rem;
  border-bottom: 1px solid var(--bg-inset);
}
.bantyp-option:hover { background: rgba(79, 195, 247, 0.08); }
.bantyp-option.selected { background: rgba(79, 195, 247, 0.12); color: var(--accent); }
.bantyp-option .bantyp-key { color: var(--text-muted); font-size: 0.7rem; font-family: monospace; }
.bantyp-option .bantyp-severity {
  font-size: 0.65rem; font-weight: 600; border-radius: 3px;
  padding: 1px 5px; margin-left: 6px;
}

/* ===== Clothing ===== */

/* Pack type badges (overview, detail, discover) */
.pack-type-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 6px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; }
.type-base { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.type-addon { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.type-job { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.type-other { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }

/* Capacity bar (overview, add-universal) */
.capacity-bar { height: 6px; background: var(--bg-inset); border-radius: 3px; overflow: hidden; margin-top: 0.5rem; }
.capacity-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.capacity-text { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; }

/* File upload drop zone (add, add-universal) */
.file-drop { border: 2px dashed var(--border); border-radius: 10px; padding: 1.5rem; text-align: center; color: var(--text-muted); transition: border-color 0.2s, background 0.2s; cursor: pointer; }
.file-drop:hover, .file-drop.dragover { border-color: var(--accent); background: rgba(79,195,247,0.05); }
.file-drop input[type="file"] { display: none; }
.file-drop-label { font-size: 0.85rem; }
.file-drop-files { margin-top: 0.5rem; font-size: 0.8rem; color: var(--accent); }

/* Slot choice radio (add, add-universal) */
.slot-choice { display: flex; gap: 1rem; align-items: center; }
.slot-choice label { font-size: 0.85rem; cursor: pointer; }

/* Upload form layout (add, add-universal) */
.upload-form { max-width: 720px; }
.upload-form .form-group { margin-bottom: 1rem; }
.upload-form .form-label { display: block; margin-bottom: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.upload-form .form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }

/* Number stepper (base-offsets, detail) */
.num-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; height: 34px; }
.num-stepper input[type="number"] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; border: none; background: var(--bg-inset); color: var(--text-primary); text-align: center; width: 60px; font-size: 0.85rem; padding: 0; margin: 0; outline: none; }
.num-stepper input[type="number"]::-webkit-inner-spin-button,
.num-stepper input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.num-stepper-btn { display: flex; align-items: center; justify-content: center; width: 30px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.9rem; font-weight: 700; transition: background 0.12s, color 0.12s; user-select: none; }
.num-stepper-btn:hover { background: rgba(79,195,247,0.12); color: var(--accent); }
.num-stepper-btn:active { background: rgba(79,195,247,0.2); }

/* DLC grid (overview) */
.dlc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.dlc-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; transition: border-color 0.2s; }
.dlc-card:hover { border-color: var(--accent); }
.dlc-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
.dlc-card-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.dlc-card-model { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }
.dlc-stats { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.dlc-stat { display: flex; flex-direction: column; align-items: center; padding: 0.5rem 0.75rem; background: var(--bg-inset); border-radius: 8px; min-width: 60px; }
.dlc-stat-value { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.dlc-stat-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.15rem; }
.dlc-actions { margin-top: 1rem; display: flex; gap: 0.5rem; }

/* Action bar (overview, diagnostik) */
.action-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

/* Preallocated badge */
.prealloc-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 6px; font-size: 0.65rem; font-weight: 600; background: rgba(99,102,241,0.12); color: #818cf8; }

@media (max-width: 600px) {
  .register-form .form-grid { grid-template-columns: 1fr; }
}

/* ===== PJAX Progress Bar ===== */
.pjax-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.pjax-progress.active { opacity: 1; }
.pjax-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #38bdf8); border-radius: 0 2px 2px 0; box-shadow: 0 0 8px rgba(79,195,247,0.4); }

/* ===== Hawk AC tier system ===== */
.hawk-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
}
.hawk-tier-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.hawk-tier-critical {
  background: rgba(127, 29, 29, 0.18);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.35);
}
.hawk-tier-critical .hawk-tier-dot { background: #f87171; box-shadow: 0 0 8px rgba(248,113,113,0.8); }
.hawk-tier-red {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
}
.hawk-tier-red .hawk-tier-dot { background: #ef4444; }
.hawk-tier-orange {
  background: rgba(249, 115, 22, 0.15);
  color: #fdba74;
  border-color: rgba(249, 115, 22, 0.3);
}
.hawk-tier-orange .hawk-tier-dot { background: #f97316; }
.hawk-tier-yellow {
  background: rgba(234, 179, 8, 0.22);
  color: #fcd34d;
  border-color: rgba(234, 179, 8, 0.45);
}
.hawk-tier-yellow .hawk-tier-dot { background: #eab308; }
.hawk-tier-green {
  background: rgba(34, 197, 94, 0.13);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.25);
}
.hawk-tier-green .hawk-tier-dot { background: #22c55e; }

.hawk-tier-hero {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid transparent;
}
.hawk-tier-hero-value { font-size: 3rem; line-height: 1; font-weight: 800; }
.hawk-tier-hero-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }

.hawk-evidence-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-inset);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-family: monospace;
  margin-right: 4px;
  margin-bottom: 2px;
  border: 1px solid var(--border);
}
.hawk-evidence-chip-key { color: var(--text-muted); }
.hawk-evidence-chip-val { color: var(--text-primary); font-weight: 600; }

.hawk-detector-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.78rem;
  background: rgba(79, 195, 247, 0.12);
  color: #7dd3fc;
  border: 1px solid rgba(79, 195, 247, 0.25);
}

.hawk-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.hawk-breadcrumbs a { color: var(--text-secondary); text-decoration: none; }
.hawk-breadcrumbs a:hover { color: var(--accent); }
.hawk-breadcrumbs .sep { color: var(--text-muted); opacity: 0.5; }

.hawk-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: fadeSlideUp 0.25s ease-out;
  z-index: 9999;
  max-width: 420px;
}
.hawk-toast-undo { background: transparent; border: 1px solid var(--accent); color: var(--accent); padding: 4px 10px; border-radius: 4px; font-size: 0.8rem; cursor: pointer; }
.hawk-toast-undo:hover { background: rgba(79,195,247,0.1); }

@media (max-width: 700px) {
  .hawk-tier-hero-value { font-size: 2.2rem; }
  .hawk-evidence-chip { font-size: 0.72rem; padding: 1px 6px; }
  .hawk-tier { font-size: 0.75rem; padding: 2px 8px; }
}

/* Hawk verdict/action button variants (moved from inline styles) */
.btn-success, .btn-sm.btn-success {
  background: #22c55e;
  color: white;
  border: 1px solid #16a34a;
}
.btn-success:hover { background: #16a34a; }
.btn-danger, .btn-sm.btn-danger {
  background: #ef4444;
  color: white;
  border: 1px solid #dc2626;
}
.btn-danger:hover { background: #dc2626; }

.btn-bans-klakesko {
  background: rgba(220, 38, 38, 0.08);
  color: #f87171;
  border: 1px solid rgba(220, 38, 38, 0.4);
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.btn-bans-klakesko:hover {
  background: rgba(220, 38, 38, 0.16);
  border-color: rgba(220, 38, 38, 0.7);
  color: #fca5a5;
}

/* =========================================================
   DESIGN REFRESH 2026-05
   Shared polish pass for portal, staff, public and admin views.
   ========================================================= */

body,
.staff-layout,
.public-layout {
  background:
    linear-gradient(180deg, rgba(23, 19, 43, 0.38) 0, rgba(9, 16, 28, 0.18) 180px, rgba(7, 9, 15, 0) 320px),
    var(--bg-deep);
}

.staff-main,
.public-container,
.admin-container {
  padding-top: 32px;
}

.public-container,
.admin-container {
  max-width: 1220px;
}

.staff-container {
  max-width: 1200px;
}

.page-header {
  margin-bottom: 28px;
}

.page-title {
  font-size: 1.62rem;
  letter-spacing: 0;
  line-height: 1.15;
}

.page-subtitle {
  color: var(--text-secondary);
  margin-top: 4px;
}

.staff-nav,
.player-nav,
.public-header {
  min-height: 54px;
  background: rgba(13, 16, 25, 0.94);
  border-bottom-color: rgba(82, 97, 131, 0.42);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 12px 30px rgba(0,0,0,0.18), 0 0 24px rgba(139, 92, 246, 0.035);
}

.nav-brand svg {
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 0 14px rgba(139, 92, 246, 0.12);
}

.nav-brand svg rect:first-child,
.brand-logo svg rect:first-child,
.login-brand-logo svg rect:first-child {
  fill: #121625;
}

.nav-brand svg rect:nth-child(2),
.brand-logo svg rect:nth-child(2),
.login-brand-logo svg rect:nth-child(2) {
  stroke: rgba(139, 92, 246, 0.42);
}

.nav-brand svg text,
.brand-logo svg text,
.login-brand-logo svg text {
  fill: #9f7aea;
}

.nav-brand-text {
  color: #fff;
}

.nav-link,
.nav-dropdown-toggle,
.public-header .nav-link {
  color: #aeb8d3;
}

.nav-link:hover,
.nav-dropdown-toggle:hover,
.nav-dropdown:hover .nav-dropdown-toggle,
.public-header .nav-link:hover {
  color: #f8fafc;
  background: rgba(255,255,255,0.07);
}

.nav-link.active,
.nav-dropdown-toggle.has-active,
.public-header .nav-link.active {
  color: #e8fbff;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(56, 189, 248, 0.12));
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.18);
}

.nav-dropdown-menu {
  background: #111827;
  border-color: var(--border-bright);
  box-shadow: 0 18px 44px rgba(0,0,0,0.48);
}

.nav-mega-col + .nav-mega-col {
  border-left-color: rgba(82, 97, 131, 0.55);
}

.nav-dropdown-menu .nav-group-label,
.nav-mega-col .nav-group-label {
  color: #7f8aa3;
}

.section-card,
.stat-card,
.player-stat-card,
.product-card,
.list-overview-card,
.membership-status,
.detail-section,
.card {
  background: linear-gradient(180deg, rgba(18, 23, 36, 0.98), rgba(13, 17, 28, 0.98));
  border-color: rgba(82, 97, 131, 0.52);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.035), 0 12px 28px rgba(0,0,0,0.14);
  min-width: 0;
}

.section-card:hover,
.stat-card:hover,
.player-stat-card:hover,
.product-card:hover,
.list-overview-card:hover {
  border-color: rgba(139, 92, 246, 0.44);
}

.card::before,
.login-main-card::before {
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.54), rgba(56, 189, 248, 0.48), transparent);
  opacity: 0.46;
}

.stat-card {
  min-height: 88px;
}

.stat-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  font-size: 1.1rem;
  filter: saturate(0.75);
}

.stat-icon svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.stat-card .stat-value,
.player-stat-card .stat-value,
.hero-number,
.mini-val,
.econ-val,
.act-val {
  color: #f7f9ff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.stat-card .stat-label,
.player-stat-card .stat-label,
.hero-label,
.mini-lbl,
.econ-lbl,
.act-lbl {
  color: #8791aa;
}

.section-title,
.chart-title,
.category-title {
  color: #dbe4f5;
}

.table-wrap {
  border-color: rgba(82, 97, 131, 0.5);
  border-radius: 8px;
  background: rgba(13, 17, 28, 0.72);
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.data-table {
  background: transparent;
}

.data-table th {
  background: #162033;
  color: #a8b2c9;
  font-weight: 700;
  letter-spacing: 0.055em;
}

.data-table td {
  color: #edf2fb;
  border-top-color: rgba(82, 97, 131, 0.34);
}

.data-table tbody tr {
  background: rgba(16, 20, 32, 0.72);
}

.data-table tbody tr:nth-child(even) {
  background: rgba(20, 25, 39, 0.78);
}

.data-table tr:hover,
.clickable-row:hover,
.data-table tbody tr[onclick]:hover,
.data-table tbody tr[style*="cursor: pointer"]:hover {
  background: rgba(56, 189, 248, 0.12) !important;
}

.text-muted,
.empty-text,
.help-text,
.form-section-title,
.file-upload-hint,
.amount-vat,
.brand-sub,
.nav-username {
  color: var(--text-muted);
}

.attention-desc,
.product-desc,
.membership-desc,
.info-row .label,
.file-upload-text,
.consent-label,
.overlay-content p,
.success-content p,
.error-content p {
  color: var(--text-secondary);
}

.badge {
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.badge-paid,
.badge-completed,
.badge-green,
.badge-aktiv {
  background: rgba(45, 212, 122, 0.16);
  color: #6ee7a8;
}

.badge-pending,
.badge-amber,
.badge-temporary,
.badge-warning {
  background: rgba(245, 185, 66, 0.17);
  color: #ffd166;
}

.badge-expired,
.badge-cancelled,
.badge-muted,
.badge-closed {
  background: rgba(148, 163, 184, 0.14);
  color: #c1cad8;
}

.badge-issue,
.badge-red,
.badge-permanent,
.badge-felaktig,
.badge-klakesko {
  background: rgba(255, 92, 108, 0.17);
  color: #ff9aa5;
}

.btn-primary,
.login-btn,
.btn-discord-login,
.btn-admin-action {
  border-radius: 8px;
  background: linear-gradient(180deg, #50d2ff, #1aa8e8);
  color: #03131d;
  box-shadow: 0 10px 22px rgba(20, 169, 232, 0.2);
}

.btn-primary:hover,
.login-btn:hover,
.btn-discord-login:hover,
.btn-admin-action:hover {
  background: linear-gradient(180deg, #7ee2ff, #38bdf8);
  box-shadow: 0 14px 28px rgba(20, 169, 232, 0.28);
}

.btn-secondary,
.btn-sm,
.filter-chip,
.tab-btn,
.pagination a,
.pagination button,
.pagination-input {
  border-color: rgba(82, 97, 131, 0.62);
  background: rgba(21, 26, 40, 0.92);
  color: #c8d2e8;
}

.btn-secondary:hover,
.btn-sm:hover,
.filter-chip:hover {
  border-color: rgba(56, 189, 248, 0.68);
  background: rgba(56, 189, 248, 0.12);
  color: #e6faff;
}

.filter-chip.active,
.tab-btn.active,
.pagination a.active,
.pagination span.current {
  border-color: var(--accent-purple);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(56, 189, 248, 0.1));
  color: #dff8ff;
}

.filter-chip.active {
  flex: 0 0 auto;
  width: auto;
  padding: 5px 14px;
}

.tabs {
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  border: 1px solid transparent;
  border-bottom-color: transparent;
  border-radius: 8px 8px 0 0;
}

.tab-btn.active {
  border-bottom-color: var(--accent-purple);
}

.search-input,
.form-control,
.text-input,
select.search-input,
select.form-control,
.qa-search-form input {
  background: #111827;
  border-color: rgba(82, 97, 131, 0.68);
  color: #f7f9ff;
}

.search-input::placeholder,
.form-control::placeholder,
.text-input::placeholder {
  color: #77839b;
}

.search-input:focus,
.form-control:focus,
.text-input:focus,
.qa-search-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
}

.welcome-hero {
  background: linear-gradient(135deg, rgba(27, 19, 51, 0.96), rgba(13, 30, 45, 0.9));
  border-color: rgba(139, 92, 246, 0.34);
  border-radius: 8px;
}

.welcome-hero::before {
  display: none;
}

.welcome-quick-link {
  border-radius: 8px;
}

.server-status-bar {
  border-radius: 8px;
}

.public-container .page-header {
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(82, 97, 131, 0.38);
}

.category-section {
  margin-bottom: 36px;
}

.product-grid,
.list-overview-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.product-card,
.list-overview-card {
  min-height: 132px;
}

.product-name,
.list-overview-card .card-title {
  color: #fff;
}

.product-price {
  color: #7dd3fc;
  margin-top: 16px;
}

.list-overview-card .card-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(56, 189, 248, 0.11));
  border-radius: 8px;
  color: #c4b5fd;
}

.admin-container {
  padding: 32px 24px;
}

.admin-nav {
  background: rgba(13, 16, 25, 0.94);
  border-color: rgba(82, 97, 131, 0.52);
  border-radius: 8px;
  margin-bottom: 28px;
}

.admin-nav a {
  color: #aeb8d3;
}

.admin-nav a:hover,
.admin-nav a.active {
  color: #e8fbff;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(56, 189, 248, 0.1));
}

.admin-nav .user-info {
  color: #b6bed2;
}

body.pay-page {
  background:
    linear-gradient(180deg, rgba(25, 19, 45, 0.58), rgba(13, 24, 36, 0.34) 230px, rgba(7, 9, 15, 0) 380px),
    var(--bg-deep);
}

body.pay-page::before {
  display: none;
}

.pay-page .container {
  max-width: 640px;
  justify-content: flex-start;
  padding-top: 42px;
  padding-bottom: 42px;
}

.payment-card {
  min-height: 0;
  padding: 24px;
}

.amount-display {
  background: linear-gradient(180deg, #172133, #111827);
  border-color: rgba(139, 92, 246, 0.34);
  margin-bottom: 14px;
  padding: 18px 14px;
}

.amount-label,
.form-section-title {
  color: #94a3b8;
}

.amount-value {
  color: #7dd3fc;
  font-size: 2rem;
}

.payment-info {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(82, 97, 131, 0.38);
  border-radius: 8px;
  padding: 6px 16px;
  margin-bottom: 12px;
}

.payment-steps,
.payment-assurance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.payment-step,
.payment-assurance span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(82, 97, 131, 0.44);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
}

.payment-step {
  gap: 6px;
}

.payment-step.is-active {
  color: #dff8ff;
  border-color: rgba(139, 92, 246, 0.46);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(56, 189, 248, 0.09));
}

.payment-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.payment-step.is-active .payment-step-dot {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent));
  color: #03131d;
}

.payment-assurance {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: -4px;
}

.payment-assurance span {
  min-height: 28px;
  color: #9fe7bd;
  border-color: rgba(45, 212, 122, 0.28);
  background: rgba(45, 212, 122, 0.08);
  font-size: 0.72rem;
}

.payment-method-section {
  margin-bottom: 12px;
}

.payment-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.payment-methods--single {
  grid-template-columns: 1fr;
}

.payment-method {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(82, 97, 131, 0.44);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.payment-method:hover {
  border-color: rgba(125, 211, 252, 0.46);
}

.payment-method.is-selected {
  border-color: rgba(125, 211, 252, 0.66);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(139, 92, 246, 0.1));
}

.payment-method input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #fff;
}

.payment-method-icon svg {
  width: 19px;
  height: 19px;
}

.payment-method-icon--swish {
  background: #15b857;
}

.payment-method-icon--stripe {
  background: #635bff;
}

.payment-method-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.payment-method-title {
  color: #e5edf8;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
}

.payment-method-note {
  color: #94a3b8;
  font-size: 0.72rem;
  line-height: 1.35;
}

.payment-return-alert {
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  background: rgba(56, 189, 248, 0.08);
  color: #bae6fd;
  font-size: 0.76rem;
  line-height: 1.35;
}

.payment-return-alert--warn {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.08);
  color: #fde68a;
}

.stripe-checkout-panel {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(82, 97, 131, 0.54);
  border-radius: 8px;
  background: #0f1724;
}

.stripe-checkout-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(82, 97, 131, 0.38);
  margin-bottom: 12px;
}

.stripe-checkout-title {
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
}

.stripe-checkout-subtitle {
  color: #a6b3ca;
  font-size: 0.78rem;
  line-height: 1.4;
  margin-top: 3px;
}

.stripe-checkout-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 8px;
  background: #635bff;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

.stripe-checkout-frame {
  min-height: 360px;
}

.stripe-checkout-loading {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #cbd5e1;
  font-size: 0.84rem;
}

.stripe-checkout-back {
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  border: 1px solid rgba(125, 211, 252, 0.36);
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.08);
  color: #dff8ff;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
}

.stripe-checkout-back:hover {
  border-color: rgba(125, 211, 252, 0.62);
  background: rgba(56, 189, 248, 0.13);
}

@media (max-width: 520px) {
  .payment-methods {
    grid-template-columns: 1fr;
  }

  .stripe-checkout-panel {
    padding: 12px;
  }

  .stripe-checkout-top {
    flex-direction: column;
  }

  .stripe-checkout-frame {
    min-height: 360px;
  }
}

.info-row {
  border-bottom-color: rgba(82, 97, 131, 0.32);
  padding: 8px 0;
}

.file-upload-zone,
.consent-label,
.player-msg-thread,
.player-msg-input-wrap {
  background: #111827;
  border-color: rgba(82, 97, 131, 0.62);
  border-radius: 8px;
}

.form-section {
  margin-bottom: 14px;
}

.file-upload-zone {
  padding: 14px;
}

.file-upload-icon {
  margin-bottom: 4px;
}

.file-upload-hint {
  margin-top: 2px;
}

.or-divider {
  margin: 9px 0;
}

.consent-group {
  gap: 8px;
}

.consent-label {
  gap: 10px;
  padding: 8px 10px;
  font-size: 0.76rem;
  line-height: 1.42;
}

.consent-label.checked {
  border-color: rgba(139, 92, 246, 0.42);
  background: rgba(139, 92, 246, 0.08);
}

.btn-pay:disabled {
  background: #242b3a;
  color: #9ca8bd;
}

.btn-pay {
  margin-top: 12px;
  padding: 14px 20px;
}

.login-page {
  background:
    linear-gradient(180deg, rgba(25, 19, 45, 0.58), rgba(13, 24, 36, 0.34) 230px, rgba(7, 9, 15, 0) 380px),
    var(--bg-deep);
}

.login-page::before {
  display: none;
}

.login-main-card {
  border-radius: 8px;
  border-color: rgba(139, 92, 246, 0.36);
  background: linear-gradient(180deg, rgba(18, 23, 36, 0.98), rgba(13, 17, 28, 0.98));
}

.brand-logo,
.login-brand-logo {
  filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.14));
}

.login-heading,
.login-brand-name {
  color: #fff;
}

.login-desc,
.login-info,
.login-footer p {
  color: var(--text-secondary);
}

.public-page-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.public-page-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.public-page-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(82, 97, 131, 0.52);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  color: #c8d2e8;
  font-size: 0.78rem;
  font-weight: 600;
}

.mobile-tabbar {
  display: none;
}

.payments-search-bar,
.krim-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.payments-search-bar {
  max-width: 720px;
}

.payments-search-bar .form-control {
  flex: 1 1 300px;
  min-width: 220px;
}

.payments-search-takeover {
  margin-left: auto;
}

.krim-filter-bar .search-input:first-child {
  flex: 1 1 260px;
  min-width: 220px;
}

.krim-filter-bar select.search-input {
  flex: 0 0 136px;
}

.sync-alert {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid rgba(255, 92, 108, 0.78);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(58, 24, 24, 0.88), rgba(31, 18, 22, 0.94));
  box-shadow: 0 12px 26px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
}

.sync-alert__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  margin-bottom: 8px;
}

.sync-alert__title {
  margin: 0;
  color: #ff625f;
  font-size: 0.9rem;
  line-height: 1.25;
}

.sync-alert__form {
  margin: 0;
}

.sync-alert__button {
  min-width: 106px;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 200, 200, 0.5) !important;
  color: #fde2e2 !important;
  font-size: 0.74rem;
  white-space: nowrap;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}
.sync-alert__button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 220, 220, 0.8) !important;
}

.sync-alert__list {
  max-height: 150px;
  overflow-y: auto;
  color: #d8dee9;
  font-size: 0.78rem;
  line-height: 1.35;
}

.sync-alert__item {
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sync-alert__item:last-child {
  border-bottom: 0;
}

.sync-alert__mark {
  display: inline-flex;
  width: 12px;
  justify-content: center;
  margin-right: 3px;
  font-weight: 800;
}

.sync-alert__mark--ok {
  color: #2dd47a;
}

.sync-alert__mark--manual {
  color: #f5a340;
}

.gang-mobile-list {
  display: none;
}

.payment-mobile-list {
  display: none;
}

@media (max-width: 760px) {
  html,
  body {
    background-color: #05080e;
    scrollbar-width: none;
  }

  body::-webkit-scrollbar {
    display: none;
  }

  .staff-main,
  .public-container,
  .admin-container {
    padding: 16px 14px 28px;
  }

  body:has(.mobile-tabbar) .staff-main {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  body,
  .staff-layout,
  .public-layout {
    background:
      radial-gradient(circle at 20% -10%, rgba(139, 92, 246, 0.16), transparent 34%),
      linear-gradient(180deg, rgba(7, 10, 20, 0.98), rgba(5, 8, 14, 1));
  }

  body:has(.mobile-tabbar) {
    overflow: hidden;
  }

  body:has(.mobile-tabbar) .staff-layout {
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }

  body:has(.mobile-tabbar) .staff-nav,
  body:has(.mobile-tabbar) .player-nav {
    order: 1;
    flex: 0 0 auto;
  }

  body:has(.mobile-tabbar) .staff-main {
    order: 2;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 0;
    padding-bottom: 34px;
    scroll-padding-bottom: 34px;
  }

  .staff-container,
  .public-container,
  .admin-container {
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
  }

  .mobile-tabbar {
    order: 3;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 650;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 3px;
    width: min(calc(100vw - 24px), 414px);
    flex: 0 0 auto;
    align-self: center;
    margin: 8px auto max(10px, env(safe-area-inset-bottom, 10px));
    padding: 6px;
    transform: none;
    border: 1px solid rgba(94, 110, 146, 0.58);
    border-radius: 8px;
    background: rgba(9, 12, 21, 0.92);
    box-shadow: 0 18px 46px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.04);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  .mobile-tabbar-item {
    display: flex;
    min-width: 0;
    min-height: 48px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 7px;
    color: #8490aa;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-decoration: none;
  }

  .mobile-tabbar-item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  .mobile-tabbar-item.active {
    color: #eaf8ff;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.24), rgba(56, 189, 248, 0.14));
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.24);
  }

  .page-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
  }

  .krim-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .payments-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
  }

  .krim-page-header .btn-sm {
    width: auto;
    min-height: 38px;
    padding-inline: 14px;
    white-space: nowrap;
  }

  .payments-page-header .btn-sm {
    width: auto;
    min-height: 38px;
    padding-inline: 14px;
    white-space: nowrap;
  }

  .sync-alert {
    padding: 13px;
  }

  .sync-alert__header {
    gap: 8px;
    align-items: center;
  }

  .sync-alert__title {
    font-size: 0.86rem;
  }

  .sync-alert__button {
    min-width: 104px;
    min-height: 38px;
    padding-inline: 11px;
  }

  .sync-alert__list {
    font-size: 0.76rem;
  }

  .page-title {
    font-size: 1.45rem;
    line-height: 1.1;
  }

  .page-subtitle {
    margin-top: 5px;
    font-size: 0.86rem;
  }

  .section-card,
  .stat-card,
  .player-stat-card,
  .product-card,
  .list-overview-card,
  .membership-status,
  .detail-section,
  .card {
    border-color: rgba(94, 110, 146, 0.58);
    box-shadow: 0 1px 0 rgba(255,255,255,0.035), 0 16px 34px rgba(0,0,0,0.18);
  }

  .section-card {
    padding: 13px;
    margin-bottom: 14px;
  }

  .section-card:has(> .mobile-card-wrap) {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .section-card:has(> .mobile-card-wrap) > .section-header,
  .section-card:has(> .mobile-card-wrap) > .section-title {
    padding: 0 2px;
    margin-bottom: 10px;
  }

  .section-header {
    gap: 10px;
    align-items: center;
  }

  .section-title {
    font-size: 0.98rem;
  }

  .page-actions {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .page-actions .btn-sm {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  .tabs {
    width: min(100%, 362px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow-x: visible;
    flex-wrap: wrap;
    padding-bottom: 2px;
    gap: 6px;
  }

  .tabs .tab-btn {
    flex: 1 1 0;
    justify-content: center;
    min-height: 42px;
    padding: 10px 12px;
    text-align: center;
  }

  .ban-search-panel {
    grid-template-columns: 1fr;
    width: min(100%, 362px);
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }

  .ban-search-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .ban-search-actions .btn-sm {
    min-height: 40px;
  }

  .ban-search-controls {
    gap: 10px;
  }

  .ban-search-chip-row {
    width: 100%;
  }

  .ban-search-chip-label {
    flex: 0 0 100%;
  }

  .ban-search-filter-chip.filter-chip,
  .ban-search-filter-chip.filter-chip.active {
    flex: 1 1 auto;
    min-height: 34px;
    text-align: center;
  }

  .ban-search-note {
    width: min(100%, 362px);
    margin-left: auto;
    margin-right: auto;
  }

  .ban-search-summary {
    width: min(100%, 362px);
    margin-left: auto;
    margin-right: auto;
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .ban-result-identifiers div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .filter-bar {
    width: min(100%, 362px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow-x: visible;
    flex-wrap: wrap;
    padding-bottom: 2px;
    gap: 7px;
  }

  .filter-bar .filter-chip {
    flex: 0 1 auto;
    min-height: 34px;
    padding: 7px 12px;
  }

  .welcome-hero {
    padding: 22px 18px;
    margin-bottom: 16px;
    border-radius: 8px;
  }

  .welcome-greeting {
    font-size: 1.42rem;
    line-height: 1.15;
    margin-bottom: 8px;
  }

  .welcome-subtitle {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .welcome-badge {
    margin-top: 12px;
  }

  .welcome-quick-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
  }

  .welcome-quick-link {
    min-height: 52px;
    padding: 10px 11px;
    gap: 8px;
    font-size: 0.82rem;
    line-height: 1.2;
  }

  .search-bar {
    align-items: stretch !important;
    flex-direction: column;
  }

  .search-bar .search-input,
  .search-bar .form-control,
  .payments-search-bar .form-control,
  .krim-filter-bar .search-input,
  .krim-filter-bar select.search-input {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .payments-search-bar .btn-secondary,
  .payments-search-bar .btn-sm,
  .krim-filter-bar .btn-primary,
  .krim-filter-bar .btn-sm {
    width: 100%;
    justify-content: center;
  }

  .payments-search-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(118px, 0.42fr);
    gap: 8px;
    width: min(100%, 362px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
  }

  .payments-search-bar .form-control {
    grid-column: 1 / -1;
  }

  .payments-search-bar .btn-secondary,
  .payments-search-bar .btn-sm {
    min-height: 38px;
  }

  .payments-search-bar .payments-search-takeover {
    margin-left: 0;
  }

  .payments-search-bar .btn-secondary:not(.payments-search-takeover) {
    grid-column: 1;
  }

  .payments-search-bar .payments-search-takeover {
    grid-column: 2;
  }

  .krim-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .krim-filter-bar .search-input:first-child {
    grid-column: 1 / -1;
  }

  .krim-filter-bar select:nth-of-type(1) {
    grid-column: 1;
  }

  .krim-filter-bar select:nth-of-type(2) {
    grid-column: 2;
  }

  .krim-filter-bar select:nth-of-type(3) {
    grid-column: 1;
  }

  .krim-filter-bar .btn-primary {
    grid-column: 2;
  }

  .table-wrap {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }

  .table-wrap .data-table {
    min-width: 640px;
  }

  .table-wrap .data-table th,
  .table-wrap .data-table td {
    white-space: nowrap;
  }

  .mobile-card-wrap {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .gang-mobile-list {
    display: grid;
    gap: 9px;
    margin-bottom: 10px;
  }

  .payment-mobile-list {
    display: grid;
    gap: 9px;
    margin-bottom: 18px;
  }

  .staff-container > .payment-mobile-list {
    width: min(100%, 362px);
    margin-left: auto;
    margin-right: auto;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(94, 110, 146, 0.58);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(18, 23, 36, 0.98), rgba(13, 17, 29, 0.98));
    box-shadow: 0 1px 0 rgba(255,255,255,0.035), 0 14px 28px rgba(0,0,0,0.16);
  }

  .gang-table-wrap {
    display: none;
  }

  .payment-table-wrap {
    display: none;
  }

  .payment-mobile-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 12px;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(82, 97, 131, 0.58);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(18, 23, 36, 0.98), rgba(13, 17, 29, 0.98));
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    color: inherit;
    text-decoration: none;
  }

  .staff-container > .payment-mobile-list .payment-mobile-card {
    min-height: 96px;
    padding: 13px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .staff-container > .payment-mobile-list .payment-mobile-card + .payment-mobile-card {
    border-top: 1px solid rgba(82, 97, 131, 0.42);
  }

  .payment-mobile-card__id {
    min-width: 0;
    color: #75819a;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;
  }

  .payment-mobile-card__amount {
    justify-self: end;
    color: #7dd3fc;
    font-family: var(--font-mono);
    font-size: 0.93rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
  }

  .payment-mobile-card__player {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .payment-mobile-card__desc {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 1px;
    color: #cbd5ea;
    font-size: 0.86rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .payment-mobile-card__badges {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
  }

  .payment-mobile-card__badges .badge + .badge {
    margin-left: auto;
  }

  .payment-mobile-card__badges .badge {
    min-width: 0;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 0.68rem;
  }

  .payment-mobile-card__meta {
    grid-column: 1 / -1;
    justify-self: stretch;
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 8px;
    margin-top: 6px;
    color: #75819a;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .payment-mobile-card__meta strong {
    color: #9ea8bf;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
  }

  .dashboard-stats-grid {
    gap: 8px !important;
    margin-bottom: 14px;
  }

  .dashboard-stats-grid .stat-card {
    min-height: 64px;
    padding: 10px 11px;
    gap: 8px;
  }

  .dashboard-stats-grid .stat-icon {
    width: 28px;
    height: 28px;
    font-size: 0.94rem;
  }

  .dashboard-stats-grid .stat-card .stat-value {
    font-size: clamp(1.15rem, 6vw, 1.48rem);
  }

  .dashboard-stats-grid .stat-card .stat-label {
    font-size: 0.61rem;
    line-height: 1.12;
  }

  .attention-section {
    padding: 12px;
    margin-bottom: 13px;
  }

  .attention-section .section-title {
    margin-bottom: 8px;
    font-size: 0.92rem;
  }

  .attention-list {
    gap: 7px;
  }

  .attention-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 48px;
    padding: 8px 10px;
  }

  .attention-badges {
    gap: 5px;
  }

  .attention-badges .badge {
    padding: 5px 8px;
    font-size: 0.66rem;
  }

  .attention-player {
    font-size: 0.84rem;
  }

  .attention-desc {
    max-width: 112px;
    font-size: 0.76rem;
  }

  .attention-amount {
    font-size: 0.82rem;
  }

  .dashboard-recent-section {
    width: 100%;
    margin-top: 0;
    padding: 12px !important;
    margin-bottom: 14px;
    border: 1px solid rgba(94, 110, 146, 0.58) !important;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(18, 23, 36, 0.98), rgba(13, 17, 29, 0.98)) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.035), 0 16px 34px rgba(0,0,0,0.18) !important;
  }

  .dashboard-recent-section .section-header {
    margin-bottom: 9px;
  }

  .dashboard-recent-section .payment-mobile-list {
    gap: 0;
    margin-bottom: 0;
  }

  .dashboard-recent-section .payment-mobile-card {
    min-height: 72px;
    padding: 7px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .dashboard-recent-section .payment-mobile-card__desc,
  .dashboard-recent-section .payment-mobile-card__meta {
    display: none;
  }

  .dashboard-recent-section .payment-mobile-card__badges {
    margin-top: 7px;
  }

  .dashboard-recent-section .payment-mobile-card:nth-child(n+2) {
    display: none;
  }

  .gang-mobile-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
    width: 100%;
    padding: 14px;
    border: 1px solid rgba(82, 97, 131, 0.58);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(18, 23, 36, 0.98), rgba(13, 17, 29, 0.98));
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    color: inherit;
    text-decoration: none;
  }

  .gang-mobile-card.is-shutdown {
    opacity: 0.58;
  }

  .gang-mobile-card__name {
    min-width: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
  }

  .gang-mobile-card__name span:first-child {
    overflow-wrap: anywhere;
  }

  .gang-mobile-card__money {
    justify-self: end;
    text-align: right;
  }

  .gang-mobile-card__money span,
  .gang-mobile-card__meta span {
    display: block;
    margin-bottom: 2px;
    color: #6f7b94;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .gang-mobile-card__money strong {
    display: block;
    color: #7dd3fc;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    line-height: 1.25;
    white-space: nowrap;
  }

  .gang-mobile-card__badge-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
  }

  .gang-mobile-card__meta {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 2px;
  }

  .gang-mobile-card__meta strong {
    color: #dbe4f5;
    font-size: 0.86rem;
  }

  .gang-mobile-card__meta em {
    color: var(--text-muted);
    font-style: normal;
    font-size: 0.84rem;
  }

  .mobile-card-wrap .mobile-card-table,
  .mobile-card-wrap .mobile-card-table tbody,
  .mobile-card-wrap .mobile-card-table tr,
  .mobile-card-wrap .mobile-card-table td {
    display: block;
    width: 100%;
  }

  .mobile-card-wrap .mobile-card-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  .mobile-card-wrap .mobile-card-table thead {
    display: none;
  }

  .mobile-card-wrap .mobile-card-table tr {
    position: relative;
    margin: 0 0 9px;
    padding: 12px;
    border: 1px solid rgba(82, 97, 131, 0.5);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(18, 23, 36, 0.96), rgba(13, 17, 29, 0.96));
    box-shadow: 0 8px 18px rgba(0,0,0,0.11);
  }

  .mobile-card-wrap .mobile-card-table td {
    border: 0 !important;
    padding: 4px 0;
    white-space: normal !important;
  }

  .mobile-card-wrap .mobile-card-table td[data-label]:not(.mobile-card-title) {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }

  .mobile-card-wrap .mobile-card-table td[data-label]::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .mobile-card-wrap .mobile-card-table .mobile-card-title {
    margin-bottom: 5px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
  }

  .mobile-card-wrap .mobile-card-table .mobile-card-title::before,
  .mobile-card-wrap .mobile-card-table .mobile-card-accent::before,
  .mobile-card-wrap .mobile-card-table .mobile-card-indicator::before {
    display: none;
  }

  .mobile-card-wrap .mobile-card-table .mobile-card-accent {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px !important;
    border-radius: 8px 0 0 8px;
  }

  .mobile-card-wrap .mobile-card-table .mobile-card-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    width: auto;
    padding: 0;
  }

  .mobile-card-wrap .mobile-card-table .text-truncate,
  .mobile-card-wrap .mobile-card-table [style*="text-overflow"],
  .mobile-card-wrap .list-table-fixed td {
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .mobile-card-table--generic-list tr {
    padding: 13px;
  }

  .mobile-card-table--generic-list .mobile-card-title {
    margin-bottom: 7px !important;
    font-size: 1rem !important;
    line-height: 1.32;
  }

  .mobile-card-table--generic-list td[data-label]:not(.mobile-card-title) {
    min-height: 24px;
    padding: 4px 0;
    color: var(--text-secondary);
  }

  .mobile-card-table--generic-list td[data-label]:not(.mobile-card-title)::before {
    align-self: start;
    padding-top: 1px;
  }

  .mobile-card-wrap .mobile-card-table--payments td[data-label],
  .mobile-card-wrap .mobile-card-table--bans td[data-label],
  .mobile-card-wrap .mobile-card-table--gangs td[data-label],
  .mobile-card-wrap .mobile-card-table--deploy td[data-label],
  .mobile-card-wrap .mobile-card-table--admin-payments td[data-label],
  .mobile-card-wrap .mobile-card-table--assets td[data-label],
  .mobile-card-wrap .mobile-card-table--purchases td[data-label],
  .mobile-card-wrap .mobile-card-table--leaderboard td[data-label],
  .mobile-card-wrap .mobile-card-table--hawk-scores td[data-label],
  .mobile-card-wrap .mobile-card-table--hawk-detectors td[data-label],
  .mobile-card-wrap .mobile-card-table--disciplinary-list td[data-label] {
    display: block !important;
  }

  .mobile-card-wrap .mobile-card-table--payments td[data-label]::before,
  .mobile-card-wrap .mobile-card-table--bans td[data-label]::before,
  .mobile-card-wrap .mobile-card-table--gangs td[data-label]::before,
  .mobile-card-wrap .mobile-card-table--deploy td[data-label]::before,
  .mobile-card-wrap .mobile-card-table--admin-payments td[data-label]::before,
  .mobile-card-wrap .mobile-card-table--assets td[data-label]::before,
  .mobile-card-wrap .mobile-card-table--purchases td[data-label]::before,
  .mobile-card-wrap .mobile-card-table--leaderboard td[data-label]::before,
  .mobile-card-wrap .mobile-card-table--hawk-scores td[data-label]::before,
  .mobile-card-wrap .mobile-card-table--hawk-detectors td[data-label]::before,
  .mobile-card-wrap .mobile-card-table--disciplinary-list td[data-label]::before {
    display: none;
  }

  .mobile-card-table--payments tr,
  .mobile-card-table--bans tr {
    padding: 14px;
  }

  .mobile-card-table--payments td {
    line-height: 1.35;
  }

  .mobile-card-table--payments tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 12px;
    padding: 12px 13px;
  }

  .mobile-card-table--payments td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
  }

  .mobile-card-table--payments td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    margin-top: 2px;
    padding-right: 0;
    color: #fff;
    font-size: 0.98rem;
    font-weight: 700;
  }

  .mobile-card-table--payments td:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 2px;
    padding-right: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
  }

  .mobile-card-table--payments td:nth-child(4) {
    position: static;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: end;
    width: auto;
    color: #7dd3fc;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0;
  }

  .mobile-card-table--payments td:nth-child(5),
  .mobile-card-table--payments td:nth-child(6) {
    display: inline-flex !important;
    grid-row: 4;
    width: auto;
    margin: 8px 6px 0 0;
    padding: 0;
  }

  .mobile-card-table--payments td:nth-child(5) {
    grid-column: 1;
  }

  .mobile-card-table--payments td:nth-child(6) {
    grid-column: 2;
    justify-self: end;
  }

  .mobile-card-table--payments td:nth-child(5) .badge,
  .mobile-card-table--payments td:nth-child(6) .badge {
    min-width: 0;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 0.68rem;
  }

  .mobile-card-table--payments td[data-label="Staff"],
  .mobile-card-table--payments td[data-label="Datum"] {
    display: inline-flex !important;
    grid-column: span 1;
    grid-row: auto;
    width: auto;
    margin: 6px 12px 0 0;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.74rem;
  }

  .mobile-card-wrap .mobile-card-table--payments td[data-label="Staff"]::before,
  .mobile-card-wrap .mobile-card-table--payments td[data-label="Datum"]::before {
    display: inline;
    margin-right: 4px;
    color: #6f7b94;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-card-wrap .mobile-card-table--payments td[data-label="Staff"]::before {
    content: "Staff";
  }

  .mobile-card-wrap .mobile-card-table--payments td[data-label="Datum"]::before {
    content: "Datum";
  }

  .mobile-card-table--bans .mobile-card-title {
    margin-bottom: 2px;
    font-size: 1.05rem;
  }

  .mobile-card-table--bans .mobile-card-title a,
  .mobile-card-table--bans .mobile-card-title span {
    display: block;
  }

  .mobile-card-table--bans td[data-label="Anledning"] {
    margin-top: 8px;
    color: #f5f7fb;
    font-size: 0.92rem;
    line-height: 1.4;
  }

  .mobile-card-table--bans td[data-label="Hex-ID"],
  .mobile-card-table--bans td[data-label="Discord-ID"],
  .mobile-card-table--bans td[data-label="Ban-ID"] {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 0.72rem !important;
    overflow-wrap: anywhere;
  }

  .mobile-card-table--bans td[data-label="Status"],
  .mobile-card-table--bans td[data-label="Källa"] {
    margin-top: 8px;
  }

  .mobile-card-table--bans td[data-label="Datum"] {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.74rem;
  }

  .mobile-card-wrap .mobile-card-table--bans td[data-label="Datum"]::before {
    content: "Datum";
    display: inline;
    margin-right: 6px;
    color: #6f7b94;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-card-table--gangs tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 14px;
  }

  .mobile-card-table--gangs .mobile-card-title {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding-right: 6px;
    margin-bottom: 0;
  }

  .gang-status-note {
    display: inline-flex;
    margin-left: 6px;
    color: #ffd166;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-card-table--gangs td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    color: #7dd3fc;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: right;
  }

  .mobile-card-table--gangs td:nth-child(2)::before {
    content: "Univados";
    display: block !important;
    margin-bottom: 1px;
    color: #6f7b94;
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .mobile-card-table--gangs td:nth-child(3),
  .mobile-card-table--gangs td:nth-child(4) {
    display: inline-flex !important;
    grid-row: 2;
    width: auto;
    margin-top: 2px;
  }

  .mobile-card-table--gangs td:nth-child(3) {
    grid-column: 1;
  }

  .mobile-card-table--gangs td:nth-child(4) {
    grid-column: 2;
    justify-self: end;
  }

  .mobile-card-table--gangs td:nth-child(5),
  .mobile-card-table--gangs td:nth-child(6) {
    grid-column: span 1;
    margin-top: 4px;
    color: #dbe4f5;
    font-size: 0.84rem;
  }

  .mobile-card-table--gangs td:nth-child(5)::before,
  .mobile-card-table--gangs td:nth-child(6)::before {
    display: block !important;
    margin-bottom: 2px;
    color: #6f7b94;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .mobile-card-table--gangs td:nth-child(5)::before {
    content: "Medlemmar";
  }

  .mobile-card-table--gangs td:nth-child(6)::before {
    content: "Territorier";
  }

  .mobile-card-table--deploy tr {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 14px;
  }

  .mobile-card-table--deploy td {
    width: auto;
  }

  .mobile-card-table--deploy .mobile-card-title {
    order: 1;
    flex: 1 1 100%;
    margin: 0 0 2px;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .mobile-card-table--deploy .mobile-card-title code {
    display: block;
    color: #dbeafe;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .mobile-card-table--deploy td:nth-child(1),
  .mobile-card-table--deploy td:nth-child(2) {
    order: 2;
    display: inline-flex !important;
    width: auto;
    padding: 0;
  }

  .mobile-card-table--deploy td:nth-child(4),
  .mobile-card-table--deploy td:nth-child(5) {
    order: 3;
    flex: 1 1 calc(50% - 8px);
    min-width: 128px;
    color: var(--text-secondary);
    font-size: 0.78rem;
  }

  .mobile-card-table--deploy td:nth-child(4)::before,
  .mobile-card-table--deploy td:nth-child(5)::before {
    display: block !important;
    margin-bottom: 2px;
    color: #6f7b94;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .mobile-card-table--deploy td:nth-child(4)::before {
    content: "Av";
  }

  .mobile-card-table--deploy td:nth-child(5)::before {
    content: "Stagad";
  }

  .mobile-card-table--deploy td:nth-child(6) {
    order: 4;
    flex: 1 1 100%;
    padding-top: 2px;
  }

  .mobile-card-table--deploy .unstage-btn {
    display: inline-flex;
    align-items: center;
    width: 100%;
    justify-content: center;
  }

  .mobile-card-table--assets tr,
  .mobile-card-table--purchases tr,
  .mobile-card-table--hawk-scores tr,
  .mobile-card-table--hawk-detectors tr,
  .mobile-card-table--disciplinary-list tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 13px;
  }

  .mobile-card-table--assets .mobile-card-title,
  .mobile-card-table--purchases .mobile-card-title,
  .mobile-card-table--hawk-scores .mobile-card-title,
  .mobile-card-table--hawk-detectors .mobile-card-title,
  .mobile-card-table--disciplinary-list .mobile-card-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    min-width: 0;
    font-size: 0.96rem;
    line-height: 1.35;
  }

  .mobile-card-table--assets td:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
  }

  .mobile-card-table--assets td:nth-child(2),
  .mobile-card-table--assets td:nth-child(6),
  .mobile-card-table--purchases td:nth-child(3),
  .mobile-card-table--disciplinary-list td:nth-child(2) {
    display: inline-flex !important;
    width: auto;
    margin-top: 5px;
  }

  .mobile-card-table--assets td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .mobile-card-table--assets td:nth-child(6) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .mobile-card-table--assets td:nth-child(4),
  .mobile-card-table--assets td:nth-child(5),
  .mobile-card-table--assets td:nth-child(7),
  .mobile-card-table--assets td:nth-child(8),
  .mobile-card-table--purchases td:nth-child(4),
  .mobile-card-table--disciplinary-list td:nth-child(3),
  .mobile-card-table--disciplinary-list td:nth-child(4) {
    color: var(--text-muted);
    font-size: 0.74rem;
    overflow-wrap: anywhere;
  }

  .mobile-card-table--assets td:nth-child(4)::before,
  .mobile-card-table--assets td:nth-child(5)::before,
  .mobile-card-table--assets td:nth-child(7)::before,
  .mobile-card-table--assets td:nth-child(8)::before,
  .mobile-card-table--purchases td:nth-child(4)::before,
  .mobile-card-table--disciplinary-list td:nth-child(3)::before,
  .mobile-card-table--disciplinary-list td:nth-child(4)::before {
    display: inline !important;
    margin-right: 5px;
    color: #6f7b94;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-card-table--assets td:nth-child(4)::before { content: "Filer"; }
  .mobile-card-table--assets td:nth-child(5)::before { content: "Storlek"; }
  .mobile-card-table--assets td:nth-child(7)::before { content: "Av"; }
  .mobile-card-table--assets td:nth-child(8)::before { content: "Datum"; }

  .mobile-card-table--purchases td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    color: #7dd3fc;
    font-weight: 800;
  }

  .mobile-card-table--purchases td:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  .mobile-card-table--purchases td:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .mobile-card-table--purchases td:nth-child(4)::before { content: "Datum"; }

  .mobile-card-wrap .mobile-card-table--purchases-full td.mobile-card-id {
    display: none !important;
  }

  .mobile-card-wrap .mobile-card-table--purchases-full td.mobile-card-title {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-right: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
  }

  .mobile-card-wrap .mobile-card-table--purchases-full td.mobile-card-amount {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin-top: 6px;
    color: #7dd3fc;
    font-weight: 800;
    white-space: nowrap !important;
  }

  .mobile-card-wrap .mobile-card-table--purchases-full td.mobile-card-status {
    display: inline-flex !important;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    width: auto;
    margin-top: 6px;
    padding: 0;
  }

  .mobile-card-wrap .mobile-card-table--purchases-full td.mobile-card-status::before {
    display: none !important;
  }

  .mobile-card-wrap .mobile-card-table--purchases-full td.mobile-card-date {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.74rem;
  }

  .mobile-card-wrap .mobile-card-table--purchases-full td.mobile-card-date::before {
    content: "Datum";
    display: inline !important;
    margin-right: 5px;
    color: #6f7b94;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-card-wrap .mobile-card-table--purchases-full td.mobile-card-linked {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.74rem;
    overflow-wrap: anywhere;
  }

  .mobile-card-wrap .mobile-card-table--purchases-full td.mobile-card-linked::before {
    content: "Kopplat";
    display: inline !important;
    margin-right: 5px;
    color: #6f7b94;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-card-wrap .mobile-card-table--purchases-full td.mobile-card-action {
    grid-column: 1 / -1;
    grid-row: 5;
    width: 100%;
    margin-top: 6px;
    padding: 0;
    text-align: left !important;
  }

  .mobile-card-wrap .mobile-card-table--purchases-full td.mobile-card-action a,
  .mobile-card-wrap .mobile-card-table--purchases-full td.mobile-card-action span {
    width: 100%;
    justify-content: center;
  }

  .mobile-card-table--leaderboard tr {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 4px 10px;
    align-items: center;
    padding: 11px 12px;
  }

  .mobile-card-table--leaderboard .rk {
    grid-column: 1;
    grid-row: 1;
    color: #7dd3fc;
    font-size: 0.78rem;
  }

  .mobile-card-table--leaderboard .mobile-card-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    min-width: 0;
    font-size: 0.92rem;
  }

  .mobile-card-table--leaderboard .vl {
    text-align: right;
    color: var(--text-muted);
    font-size: 0.78rem;
  }

  .mobile-card-table--leaderboard td:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
    color: #dbe4f5;
    font-weight: 800;
  }

  .mobile-card-wrap .mobile-card-table--richest td:nth-child(3),
  .mobile-card-wrap .mobile-card-table--richest td:nth-child(4) {
    display: none !important;
  }

  .mobile-card-wrap .mobile-card-table--richest td:nth-child(5) {
    display: block !important;
    grid-column: 3;
    grid-row: 1;
    color: #dbe4f5;
    font-weight: 800;
  }

  .mobile-card-table--gang-ranking td:nth-child(4),
  .mobile-card-table--gang-ranking td:nth-child(5) {
    grid-row: 2;
    font-size: 0.72rem;
  }

  .mobile-card-table--gang-ranking td:nth-child(4) {
    grid-column: 2;
    justify-self: start;
  }

  .mobile-card-table--gang-ranking td:nth-child(5) {
    grid-column: 3;
  }

  .mobile-card-table--gang-ranking td:nth-child(4)::before,
  .mobile-card-table--gang-ranking td:nth-child(5)::before {
    display: inline !important;
    margin-right: 4px;
    color: #6f7b94;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  .mobile-card-table--gang-ranking td:nth-child(4)::before { content: "Medl."; }
  .mobile-card-table--gang-ranking td:nth-child(5)::before { content: "Uni"; }

  .mobile-card-table--hawk-scores td:nth-child(2),
  .mobile-card-table--hawk-detectors td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .mobile-card-table--hawk-scores td:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 2;
    color: var(--text-muted);
    font-size: 0.73rem !important;
  }

  .mobile-card-table--hawk-scores td:nth-child(3)::before {
    content: "Uppdaterad";
    display: inline !important;
    margin-right: 5px;
    color: #6f7b94;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  .mobile-card-table--disciplinary-list td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-top: 0;
  }

  .mobile-card-table--disciplinary-list td:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  .mobile-card-table--disciplinary-list td:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .mobile-card-table--disciplinary-list td:nth-child(3)::before { content: "Av"; }
  .mobile-card-table--disciplinary-list td:nth-child(4)::before { content: "Datum"; }

  .mobile-card-table--disciplinary-list td:nth-child(5) {
    grid-column: 1 / -1;
    width: 100%;
  }

  .mobile-card-table--disciplinary-list td:nth-child(5) .btn-sm {
    width: 100%;
    justify-content: center;
  }

  .admin-nav {
    gap: 10px;
    padding: 12px;
  }

  .admin-nav .user-info {
    order: -1;
    width: 100%;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(82, 97, 131, 0.38);
    text-align: left;
  }

  .admin-nav .nav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .admin-nav a {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  .mobile-card-table--admin-payments tr {
    padding: 14px;
  }

  .mobile-card-table--admin-payments td:nth-child(1) {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
  }

  .mobile-card-table--admin-payments td:nth-child(2) {
    padding-right: 96px;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
  }

  .mobile-card-table--admin-payments td:nth-child(3) {
    position: absolute;
    top: 14px;
    right: 14px;
    width: auto !important;
    color: #7dd3fc;
    font-size: 0.9rem;
    font-weight: 800;
  }

  .mobile-card-table--admin-payments td:nth-child(4) {
    display: inline-flex !important;
    width: auto;
    margin: 9px 8px 0 0;
    padding: 0;
  }

  .mobile-card-table--admin-payments td:nth-child(5) {
    margin-top: 9px;
    color: var(--text-muted);
    font-size: 0.74rem;
  }

  .mobile-card-wrap .mobile-card-table--admin-payments td:nth-child(5)::before {
    content: "Skapad";
    display: inline;
    margin-right: 6px;
    color: #6f7b94;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-card-wrap .mobile-card-table--admin-payments-full tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 13px;
  }

  .mobile-card-wrap .mobile-card-table--admin-payments-full td[data-label] {
    display: block !important;
    min-width: 0;
    padding: 0;
    white-space: normal !important;
  }

  .mobile-card-wrap .mobile-card-table--admin-payments-full td[data-label]::before {
    display: none !important;
  }

  .mobile-card-wrap .mobile-card-table--admin-payments-full td.mobile-card-id {
    grid-column: 1;
    grid-row: 1;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
  }

  .mobile-card-wrap .mobile-card-table--admin-payments-full td.mobile-card-amount {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    color: #7dd3fc;
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap !important;
  }

  .mobile-card-wrap .mobile-card-table--admin-payments-full td.mobile-card-title {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
  }

  .mobile-card-wrap .mobile-card-table--admin-payments-full td.mobile-card-type {
    grid-column: 1;
    grid-row: 3;
    color: var(--text-muted);
    font-size: 0.78rem;
  }

  .mobile-card-wrap .mobile-card-table--admin-payments-full td.mobile-card-status {
    display: inline-flex !important;
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    width: auto;
  }

  .mobile-card-wrap .mobile-card-table--admin-payments-full td.mobile-card-value {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
  }

  .mobile-card-wrap .mobile-card-table--admin-payments-full td.mobile-card-value::before {
    content: "Värde";
    display: inline !important;
    margin-right: 6px;
    color: #6f7b94;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-card-wrap .mobile-card-table--admin-payments-full td.mobile-card-date,
  .mobile-card-wrap .mobile-card-table--admin-payments-full td.mobile-card-created-by {
    color: var(--text-muted);
    font-size: 0.74rem;
    overflow-wrap: anywhere;
  }

  .mobile-card-wrap .mobile-card-table--admin-payments-full td.mobile-card-date {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  .mobile-card-wrap .mobile-card-table--admin-payments-full td.mobile-card-created-by {
    grid-column: 1 / -1;
    grid-row: 6;
    justify-self: start;
    text-align: left;
  }

  .mobile-card-wrap .mobile-card-table--admin-payments-full td.mobile-card-date::before,
  .mobile-card-wrap .mobile-card-table--admin-payments-full td.mobile-card-created-by::before {
    display: inline !important;
    margin-right: 5px;
    color: #6f7b94;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-card-wrap .mobile-card-table--admin-payments-full td.mobile-card-date::before {
    content: "Skapad";
  }

  .mobile-card-wrap .mobile-card-table--admin-payments-full td.mobile-card-created-by::before {
    content: "Av";
  }

  .stats-grid,
  .stats-grid--ov,
  .ov-two-col,
  .econ-grid {
    min-width: 0;
  }

  .stats-grid,
  .stats-grid--ov {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .stats-grid > .stat-card:last-child:nth-child(odd),
  .player-stats > .player-stat-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .player-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
    margin-bottom: 18px;
  }

  .stat-card,
  .player-stat-card {
    min-height: 78px;
    padding: 12px;
    gap: 10px;
  }

  .stat-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    font-size: 1rem;
  }

  .stat-card .stat-value,
  .player-stat-card .stat-value,
  .hero-number,
  .mini-val {
    font-size: clamp(1.25rem, 7vw, 1.65rem);
    line-height: 1.05;
  }

  .stats-grid--ov .stat-value {
    font-size: clamp(1.02rem, 5.6vw, 1.42rem);
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .stat-card .stat-label,
  .player-stat-card .stat-label {
    font-size: 0.64rem;
    line-height: 1.22;
    letter-spacing: 0.055em;
    overflow-wrap: anywhere;
  }

  .econ-grid {
    grid-template-columns: 1fr;
  }

  .econ-avg-row {
    flex-direction: column;
    gap: 8px;
  }

  .hero-row,
  .mini-grid {
    max-width: 100%;
  }

  .hero-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .hero-card,
  .mini-card {
    min-width: 0;
  }

  .hero-card {
    width: auto;
    flex: none;
    padding: 16px 12px;
  }

  .hero-card--wide {
    grid-column: 1 / -1;
    width: auto;
    flex-basis: auto;
  }

  .hero-label {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    letter-spacing: 0.08em;
    line-height: 1.25;
  }

  .disciplinary-event-row {
    flex-wrap: wrap;
    gap: 6px 8px !important;
  }

  .disciplinary-event-row span {
    min-width: 0 !important;
  }

  .disciplinary-event-row span:nth-child(4) {
    flex: 1 1 100% !important;
  }

  .disciplinary-event-row span:last-child {
    max-width: 100% !important;
    text-align: left !important;
  }

  .pay-page .container {
    padding: 20px 12px 28px;
  }

  .payment-card {
    padding: 20px;
  }

  .payment-steps,
  .payment-assurance {
    grid-template-columns: 1fr;
  }

  .public-page-hero {
    align-items: flex-start;
  }

  .public-page-meta {
    justify-content: flex-start;
  }
}