:root {
  --sc-bg: #060a12;
  --sc-panel: #0d1420;
  --sc-panel-2: #111b2b;
  --sc-cyan: #35e6ff;
  --sc-orange: #ff9d3d;
  --sc-green: #37f0a0;
  --sc-red: #ff4d6d;
  --sc-violet: #b388ff;
  --sc-text: #d9e6f2;
  --sc-text-dim: #7c93ab;
  --sc-border: #1c2c40;
}

body {
  background: radial-gradient(circle at 20% 0%, #0c1626 0%, var(--sc-bg) 55%) fixed;
  color: var(--sc-text);
  font-family: "Segoe UI", "Rajdhani", system-ui, sans-serif;
  min-height: 100vh;
}

.navbar-sc {
  background: linear-gradient(180deg, #0b1220 0%, #070c15 100%);
  border-bottom: 1px solid var(--sc-cyan);
  box-shadow: 0 0 18px rgba(53, 230, 255, 0.15);
}
.navbar-sc .navbar-brand {
  color: var(--sc-cyan) !important;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.navbar-sc .nav-link {
  color: var(--sc-text-dim) !important;
  letter-spacing: .5px;
}
.navbar-sc .nav-link:hover, .navbar-sc .nav-link.active {
  color: var(--sc-cyan) !important;
}
.navbar-dropdown-sc {
  background: var(--sc-panel);
  border: 1px solid var(--sc-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.navbar-dropdown-sc .dropdown-item {
  color: var(--sc-text-dim);
}
.navbar-dropdown-sc .dropdown-item:hover, .navbar-dropdown-sc .dropdown-item:focus {
  background: var(--sc-panel-2);
  color: var(--sc-cyan);
}

.sc-panel {
  background: linear-gradient(180deg, var(--sc-panel) 0%, var(--sc-panel-2) 100%);
  border: 1px solid var(--sc-border);
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(53, 230, 255, 0.05);
}

/* Flash/confirmation messages (base.html, every page) - Bootstrap's
   default alert text colors are tuned for a LIGHT alert background
   (dark green/red/blue text on a pale tint). .sc-panel above overrides
   the background to this app's dark theme but doesn't touch text
   color, so those defaults were rendering as low-contrast dark text on
   a dark background - exactly backwards for a confirmation the user is
   supposed to actually read. Bright, on-brand colors instead, applied
   globally since every page shares this same alert markup. */
.alert-success { color: var(--sc-green); background: rgba(55, 240, 160, 0.10); border-color: var(--sc-green); }
.alert-danger { color: var(--sc-red); background: rgba(255, 77, 109, 0.10); border-color: var(--sc-red); }
.alert-info { color: var(--sc-cyan); background: rgba(53, 230, 255, 0.10); border-color: var(--sc-cyan); }
.alert-warning { color: var(--sc-orange); background: rgba(255, 157, 61, 0.10); border-color: var(--sc-orange); }
.alert a { color: inherit; text-decoration: underline; }

.sc-panel-glow {
  border-color: var(--sc-cyan);
  box-shadow: 0 0 24px rgba(53, 230, 255, 0.18);
}

.sc-heading {
  color: var(--sc-cyan);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  border-bottom: 1px solid var(--sc-border);
  padding-bottom: .5rem;
  margin-bottom: 1rem;
}

.sc-stat {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--sc-cyan);
  text-shadow: 0 0 12px rgba(53, 230, 255, 0.5);
}

.sc-stat-label {
  color: var(--sc-text-dim);
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: 1.5px;
}

.sc-badge-active { background: rgba(55, 240, 160, .15); color: var(--sc-green); border: 1px solid var(--sc-green); }
.sc-badge-retired { background: rgba(124, 147, 171, .15); color: var(--sc-text-dim); border: 1px solid var(--sc-border); }
.sc-badge-open { background: rgba(53, 230, 255, .15); color: var(--sc-cyan); border: 1px solid var(--sc-cyan); }
.sc-badge-progress { background: rgba(255, 157, 61, .15); color: var(--sc-orange); border: 1px solid var(--sc-orange); }
.sc-badge-fulfilled { background: rgba(55, 240, 160, .15); color: var(--sc-green); border: 1px solid var(--sc-green); }
.sc-badge-reputation { background: rgba(255, 193, 7, .15); color: #ffc107; border: 1px solid #ffc107; }
.sc-badge-streamer { background: rgba(179, 136, 255, .15); color: var(--sc-violet); border: 1px solid var(--sc-violet); }
.sc-badge-danger { background: rgba(255, 77, 109, .2); color: var(--sc-red); border: 1px solid var(--sc-red); }
.sc-badge { padding: .2rem .6rem; border-radius: 20px; font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; }

.table-sc {
  color: var(--sc-text);
}
.table-sc thead {
  color: var(--sc-orange);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--sc-border);
}
.table-sc td, .table-sc th {
  border-color: var(--sc-border) !important;
}
.table-sc tbody tr:hover { background: rgba(53, 230, 255, 0.04); }

a.sc-link { color: var(--sc-cyan); text-decoration: none; }
a.sc-link:hover { text-decoration: underline; }

.btn-sc-primary {
  background: linear-gradient(180deg, #1b8ea6, #0c5a6c);
  border: 1px solid var(--sc-cyan);
  color: #eafeff;
}
.btn-sc-primary:hover { background: linear-gradient(180deg, #22a6c2, #0e6d82); color: #fff; }

.btn-sc-confirm {
  background: linear-gradient(180deg, #4dffb8, #1fd98a);
  border: 1px solid var(--sc-green);
  color: #04140c;
  font-weight: 600;
}
.btn-sc-confirm:hover { background: linear-gradient(180deg, #6dffc8, #37f0a0); color: #04140c; }

.btn-sc-danger {
  background: rgba(255, 77, 109, .12);
  border: 1px solid var(--sc-red);
  color: var(--sc-red);
}
.btn-sc-danger:hover { background: rgba(255, 77, 109, .25); color: #fff; }

.dropzone {
  border: 2px dashed var(--sc-border);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  color: var(--sc-text-dim);
  transition: all .15s ease;
  cursor: pointer;
}
.dropzone.dragover {
  border-color: var(--sc-cyan);
  color: var(--sc-cyan);
  box-shadow: 0 0 20px rgba(53, 230, 255, 0.2) inset;
}
.dropzone img.preview { max-width: 100%; max-height: 260px; margin-top: 1rem; border-radius: 6px; }
.photo-thumb-wrap { width: 96px; height: 96px; }
.photo-thumb { width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--sc-border); }
.photo-thumb-remove {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px;
  padding: 0; line-height: 1; border-radius: 50%; font-size: .75rem;
}

.sc-log-line { border-left: 2px solid var(--sc-border); padding-left: .75rem; margin-bottom: .4rem; font-size: .85rem; }
.sc-log-line .time { color: var(--sc-orange); margin-right: .5rem; }

.scanline-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px,
              transparent 1px, transparent 3px);
}

.streamer-bg {
  background:
    radial-gradient(circle at 50% 0%, #0d1a2e 0%, #04070c 70%),
    repeating-linear-gradient(120deg, rgba(53,230,255,0.035) 0px, rgba(53,230,255,0.035) 1px,
      transparent 1px, transparent 60px);
  background-size: 100% 100%, 300% 300%;
  animation: driftgrid 40s linear infinite;
  min-height: 100vh;
  overflow-x: hidden;
}
@keyframes driftgrid {
  0% { background-position: 0 0, 0% 0%; }
  100% { background-position: 0 0, 100% 100%; }
}

/* Slow-moving parallax "dust" starfield made of layered radial dots */
.starfield {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #ffffff55 50%, transparent 100%),
    radial-gradient(1px 1px at 30% 70%, #ffffff33 50%, transparent 100%),
    radial-gradient(2px 2px at 60% 40%, #35e6ff55 50%, transparent 100%),
    radial-gradient(1px 1px at 80% 10%, #ffffff40 50%, transparent 100%),
    radial-gradient(1px 1px at 90% 80%, #ff9d3d40 50%, transparent 100%),
    radial-gradient(2px 2px at 45% 90%, #ffffff33 50%, transparent 100%);
  background-repeat: repeat;
  background-size: 600px 600px;
  animation: starfloat 90s linear infinite;
}
@keyframes starfloat {
  0% { background-position: 0 0; }
  100% { background-position: -1200px 800px; }
}

.pulse-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--sc-green);
  box-shadow: 0 0 10px var(--sc-green);
  display: inline-block; animation: pulse 1.4s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Ticker strips that continuously scroll recent activity / connected
   players across the top. Sized up for readability on a stream overlay. */
.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--sc-border);
  border-bottom: 1px solid var(--sc-border);
  background: rgba(13, 20, 32, 0.6);
  padding: 0.6rem 0;
  font-size: 1.15rem;
}
.ticker-wrap-activity { border-top: 1px solid var(--sc-cyan); }
.ticker-wrap-users {
  background: rgba(55, 240, 160, 0.06);
  border-bottom: 1px solid var(--sc-green);
}
.ticker-track {
  display: inline-block;
  padding-left: 100%;
  animation: ticker-scroll 65s linear infinite;
}
.ticker-wrap-users .ticker-track { animation-duration: 28s; }
/* Child combinator, not a plain descendant selector - this spacing is
   meant to separate one ticker ITEM from the next, not every nested
   span inside an item (e.g. the pulse-dot next to a username). A plain
   descendant selector would match those nested spans too, inserting an
   unwanted gap inside a single logical item instead of just between
   different ones. */
.ticker-track > span { margin-right: 3.5rem; color: var(--sc-text-dim); font-weight: 500; }
.ticker-track span.hl { color: var(--sc-cyan); font-weight: 700; }
.ticker-wrap-users .ticker-track span.hl { color: var(--sc-green); }
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Flash a stat number briefly when it changes, for a "live" feel */
@keyframes statflash {
  0% { text-shadow: 0 0 4px var(--sc-green); color: var(--sc-green); transform: scale(1.12); }
  100% { text-shadow: 0 0 12px rgba(53,230,255,0.5); color: var(--sc-cyan); transform: scale(1); }
}
.sc-stat.flash { animation: statflash .6s ease-out; }

/* New list entries slide/fade in instead of popping in instantly */
@keyframes slidein {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.sc-log-line.new-entry { animation: slidein .4s ease-out; }

.sort-link { color: var(--sc-text-dim); font-size: .7rem; margin-left: 4px; }
.sort-link.active { color: var(--sc-cyan); }

/* Difficulty status pill on the Submit Depot scan card - mimics the bold
   colored bar the in-game scan readout shows (e.g. a solid red
   "IMPOSSIBLE" bar). */
.scan-difficulty-pill {
  display: block; text-align: center; font-weight: 700; letter-spacing: 2px;
  padding: .5rem 1rem; border-radius: 20px; margin: .75rem 0; text-transform: uppercase;
}
.scan-difficulty-easy { background: rgba(55,240,160,.25); color: var(--sc-green); border: 1px solid var(--sc-green); }
.scan-difficulty-medium { background: rgba(53,230,255,.25); color: var(--sc-cyan); border: 1px solid var(--sc-cyan); }
.scan-difficulty-hard { background: rgba(255,157,61,.25); color: var(--sc-orange); border: 1px solid var(--sc-orange); }
.scan-difficulty-very-hard { background: rgba(255,77,109,.3); color: var(--sc-red); border: 1px solid var(--sc-red); }
.scan-difficulty-impossible { background: rgba(255,77,109,.6); color: #fff; border: 1px solid var(--sc-red); box-shadow: 0 0 12px rgba(255,77,109,.5); }
.scan-difficulty-unset { background: rgba(124,147,171,.15); color: var(--sc-text-dim); border: 1px dashed var(--sc-border); }

/* Playerticker - the cross-app announcement bar under the navbar (base.html) */
.playerticker-bar {
  background: linear-gradient(90deg, var(--sc-panel-2), var(--sc-panel));
  border-bottom: 1px solid var(--sc-border);
  overflow: hidden;
  white-space: nowrap;
  padding: .6rem 0;
  font-size: 1.35rem;
  font-weight: 500;
  position: relative;
  z-index: 5;
}
.playerticker-track {
  display: inline-block;
  padding-left: 100%;
  animation: ticker-scroll 40s linear infinite;
}
.playerticker-track a { color: var(--sc-cyan); text-decoration: none; }
.playerticker-track a:hover { text-decoration: underline; }
.playerticker-track > span { margin-right: 4rem; }
.playerticker-admin-msg { color: var(--sc-red) !important; font-weight: 700; }

/* Toggled by the shield button (top-left of the navbar) - lets an admin
   declutter the nav of admin-only links without losing their own access,
   just hiding the menu entries. State persists via localStorage. */
.admin-menus-hidden .admin-nav-item { display: none !important; }