/* STEP9H6K10A_TRX_VISUAL_POLISH_V1
   UI-only additive polish:
   - clearer/larger NEXCIP default logo
   - black text on neon preview
   - soften full-black surfaces into premium charcoal
   - no behavior/API/business-logic changes
*/

.app {
  --nxc10a-bg: #080b08;
  --nxc10a-bg-soft: #0b0f0b;
  --nxc10a-panel: #101611;
  --nxc10a-panel-2: #131a14;
  --nxc10a-line: #263127;
}

.app .main {
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--nxc-accent) 8%, transparent), transparent 28%),
    linear-gradient(180deg, var(--nxc10a-bg-soft), var(--nxc10a-bg));
  background-size: 54px 54px, 54px 54px, auto, auto;
}

.app .sidebar {
  background:
    linear-gradient(180deg, rgba(202,255,0,.035), transparent 18%),
    linear-gradient(180deg, #0a0e0a, #070a07);
}

.app .topbar {
  background:
    linear-gradient(90deg, rgba(202,255,0,.035), transparent 28%),
    rgba(10,14,10,.95);
}

.app .panel,
.app .info-tile {
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 42%),
    var(--nxc10a-panel);
  border-color: var(--nxc10a-line);
}

.app .stat {
  background: linear-gradient(145deg, #121812, #0d120e);
}

.app .stat.info    { background: linear-gradient(145deg, #101818, #0d120e); }
.app .stat.success { background: linear-gradient(145deg, #0d1a13, #0d120e); }
.app .stat.warning,
.app .stat.points  { background: linear-gradient(145deg, #1b170b, #0d120e); }
.app .stat.danger  { background: linear-gradient(145deg, #1b1010, #0d120e); }
.app .stat.commission { background: linear-gradient(145deg, #18101f, #0d120e); }

/* Sidebar/default NEXCIP logo: larger box + zoom only for the built-in favicon asset. */
.app #brandMark.brand-mark.small {
  width: 62px;
  height: 62px;
  min-width: 62px;
  border-radius: 16px;
  padding: 2px;
}

.app #brandMark img[src*="nexcip-favicon.png"] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.46);
  transform-origin: center;
}

/* Keep custom member-uploaded logos clean and uncropped. */
.app #brandMark img:not([src*="nexcip-favicon.png"]) {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  padding: 3px;
}

/* Branding preview logo box. */
.app #brandPreviewLogo.brand-mark.small {
  width: 66px;
  height: 66px;
  min-width: 66px;
  border-radius: 16px;
  overflow: hidden;
}

.app #brandPreviewLogo img[src*="nexcip-favicon.png"] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.46);
  transform-origin: center;
}

.app #brandPreviewLogo img:not([src*="nexcip-favicon.png"]) {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  padding: 3px;
}

/* Uploaded-logo preview in Branding page. */
.app .nxc10-logo-preview img[src*="nexcip-favicon.png"] {
  transform: scale(1.28);
  transform-origin: center;
}

/* Neon preview card MUST use dark text for accessibility/contrast. */
.app .brand-preview-card,
.app .brand-preview-card span,
.app .brand-preview-card strong,
.app .brand-preview-card small {
  color: #071006 !important;
  text-shadow: none !important;
}

.app .brand-preview-card {
  background: linear-gradient(
    135deg,
    var(--preview-primary, var(--nxc-accent)),
    color-mix(in srgb, var(--preview-primary, var(--nxc-accent)) 82%, white)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--preview-primary, var(--nxc-accent)) 72%,
    #1b241a
  ) !important;
}

.app .brand-preview-card span {
  opacity: .72;
}

/* Keep the actual neon primary button/card labels dark as well. */
.app .btn.primary,
.app .nav-item.active {
  color: #071006 !important;
}

/* Slightly brighter secondary text so dark mode is not overly heavy. */
.app .page-head p,
.app .panel-head small,
.app .kicker,
.app .field span,
.app .form-help,
.app .table small,
.app .two-line small,
.app .brand-copy span,
.app .mini-status {
  color: #9ca89f;
}

@media (max-width: 820px) {
  .app #brandMark.brand-mark.small {
    width: 58px;
    height: 58px;
    min-width: 58px;
  }
}