:root{
  /* Theme colors (used by topbar, accent borders, etc.) */
  --tt-red-start:#7a0c0c;
  --tt-red-end:#9e1b1b;
  --tt-red-grad:linear-gradient(90deg,var(--tt-red-start),var(--tt-red-end));

  /* Panels */
  --tt-panel-bg: rgba(0,0,0,.62);
  --tt-panel-blur: 4px;

  /* Modal (3D preview) */
  --tt-modal-bg: rgba(122,12,12,.92);

  /* Background art (set at runtime from api/theme.php) */
  --tt-bg-art: none;              /* e.g. url('/uploads/backgrounds/bg_x.webp') */
  /* Default strength. You can tweak live in DevTools by changing this value. */
  --tt-bg-opacity: 0.9;

  /* Hero banner uses the same art by default (can be overridden later) */
  --tt-hero-art: var(--tt-bg-art);
}
html{
  /* Soft base (keeps things readable even without an uploaded art image) */
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,1) 0%, rgba(240,244,248,1) 55%, rgba(233,238,244,1) 100%);
}

body{
  /* Important: keep body background transparent so ::before/::after layers are visible */
  background: transparent !important;
  position: relative;
  z-index: 0;            /* create a stacking context for the negative z-index layers */
  min-height: 100%;
  padding-bottom: 64px;  /* room for online bar */
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  /* Background ART layer (admin-controlled)
     Note: we keep the art on its own layer so we can add overlays without
     accidentally reducing the art contrast. */
  background-image: var(--tt-bg-art);
  background-size: cover;
  /* Pull the art "up" so you see it behind the cards area too */
  background-position: 50% 18%;
  background-repeat: no-repeat;
  opacity: var(--tt-bg-opacity);
  /* Make washed-out images still show through light areas */
  background-color: rgba(0,0,0,0.12);
  background-blend-mode: multiply;
  filter: contrast(1.25) brightness(0.88) saturate(1.06);
  pointer-events: none;
  z-index: -2;
}


/* Very subtle texture overlay (light grid + soft noise dots) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  background-image:
    /* Vignette/soft shading so the background doesn't become "pure white" */
    radial-gradient(1200px 820px at 50% 20%, rgba(0,0,0,0.14), rgba(255,255,255,0.00) 46%, rgba(255,255,255,0.34) 100%),
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px),
    radial-gradient(circle, rgba(0,0,0,0.025) 1px, transparent 1px);
  background-size: cover, 140px 140px, 140px 140px, 240px 240px;
  background-position: center, center, center, center;
  pointer-events: none;
  z-index: -1;
}

/* Ensure the app content always sits above the background layers */
#app{ position: relative; z-index: 1; }
.topbar{
  background: var(--tt-red-grad) !important;
  border-bottom: 1px solid rgba(0,0,0,.45);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Brand title: bigger, white, subtle shadow */
.topbar .brand .title{
  color:#fff !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: .4px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Slightly soften brand mark */
.topbar .brandMark{
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Make nav links look like buttons */
.topbar .navLink{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.42rem .7rem;
  border-radius:.55rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(0,0,0,.35);
  color:#fff !important;
  text-decoration:none;
  font-weight:600;
  backdrop-filter: blur(4px);
  transition: transform .08s ease, filter .12s ease, background .12s ease, box-shadow .12s ease;
}

.topbar .navLink:hover{
  background: rgba(255,255,255,.14);
  filter: brightness(1.08);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.35) !important;
}

.topbar .navLink:active{
  transform: translateY(0px);
  filter: brightness(0.98);
}

/* Search input a bit nicer on red */
.topbar .search{
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(0,0,0,.35) !important;
  color: #fff !important;
}
.topbar .search::placeholder{ color: rgba(255,255,255,.75) !important; }

/* Buttons in topbar */
.topbar button{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(0,0,0,.35);
  color:#fff;
  border-radius:.55rem;
  padding:.42rem .7rem;
  font-weight:700;
  backdrop-filter: blur(4px);
  transition: transform .08s ease, filter .12s ease, background .12s ease, box-shadow .12s ease;
}
.topbar button:hover{
  background: rgba(255,255,255,.14);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.35) !important;
}
.topbar button:active{ transform: translateY(0); }

/* Focus ring for accessibility */
.topbar .navLink:focus-visible,
.topbar button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 4px 14px rgba(0,0,0,.25);
}
.heroBanner{
  height: 190px;               /* balanced: not too big, not too small */
  /* Use the hero art directly (no dark/grey shadow overlay). */
  background-image: var(--tt-hero-art);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Slight lift so the hero doesn't feel "muddy" on darker art. */
  filter: brightness(1.06) contrast(1.02);
  border-bottom: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}

@media (max-width: 768px){
  .heroBanner{ height: 125px; }
}
.homeHeader{
  position: relative;
  background: var(--tt-panel-bg);
  backdrop-filter: blur(var(--tt-panel-blur));
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-left: 4px solid var(--tt-red-end);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  display:flex;
  align-items:center;
  justify-content: space-between;
}

.homeHeader::before{
  content:"";
  display:block;
  position:absolute;
  /* no-op; kept for future if you want an accent strip */
}

.hTitle{
  color:#fff;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hHint{
  color: rgba(255,255,255,.70);
  font-size: 13px;
}
.modalPanel{
  border: 2px solid #9e1b1b !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 18px 40px rgba(0,0,0,.45) !important;
}
.modalTop{
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.previewWrap{
  outline:2px solid rgba(158,27,27,.55);
  outline-offset:-2px;
  border-radius:14px;
}
@media (max-width: 720px) {
  header,
  .navbar,
  .site-header,
  .topbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 8px;
    padding: 10px 12px !important;
  }

  header h1,
  header .brand,
  header .logo,
  .navbar h1,
  .site-header h1 {
    flex: 1 1 100% !important;
    font-size: 20px !important;
    line-height: 1.2;
    color: #ffffff !important;
    text-align: left;
  }

  nav,
  .nav-links,
  .nav-left,
  .nav-right {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100%;
    gap: 8px;
  }

  header a,
  header button,
  .navbar a,
  .navbar button,
  .navbar .btn,
  header .btn {
    flex: 1 1 calc(50% - 8px); /* 2 per row */
    min-height: 44px;
    font-size: 16px;          /* prevents iOS zoom */
    text-align: center;
    white-space: nowrap;
  }

  .homeHeader{
  position: relative;
    padding: 12px 14px;
    border-radius: 10px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .hHint{ width: 100%; text-align: left; }
}


/* Upload drag & drop overlay */
.ttDropOverlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  z-index: 10050;
}
.ttDropOverlayInner{
  width: min(520px, calc(100vw - 48px));
  border-radius: 14px;
  padding: 18px 20px;
  background: rgba(10,10,10,0.70);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  text-align: center;
}
.ttDropTitle{
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.ttDropHint{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
} 

/* Modal panel background override */
#modal .modalPanel {
  background: #7a0c0c !important;
  background-image: none !important;
}

/* Uploader line on cards */
.thumbUploader{
  font-size: 12px;
  color: var(--muted2);
  margin-top: -2px;
}
.accountWrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.accountDropdown{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(0,0,0,.70);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
  display: none;
  z-index: 50;
}

.accountDropdown.open{ display: block; }

.accountDropdown .navLink{
  width: 100%;
  justify-content: flex-start;
  margin: 4px 0;
}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.row .input{flex:1;min-width:220px;}

.ttTable{width:100%;border-collapse:collapse;margin-top:10px;}
.ttTable th, .ttTable td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,0.08);text-align:left;vertical-align:top;}
.ttTable th{font-size:13px;color:rgba(255,255,255,0.75);font-weight:600;}

.gridLite{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px,1fr));gap:14px;margin-top:12px;}
.liteCard{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;overflow:hidden;padding:10px;}
.liteCard img{width:100%;height:150px;object-fit:cover;border-radius:12px;display:block;}
.liteMeta{padding-top:10px;}
.liteTitle{font-weight:700;color:#fff;font-size:14px;line-height:1.2;}
.liteSub{font-size:12px;color:rgba(255,255,255,0.72);margin-top:4px;}
.liteActions{margin-top:10px;display:flex;gap:8px;}

.artistBanner{height:140px;border-radius:16px;background-size:cover;background-position:center;}
.artistHeader{padding-top:12px;}
.artistName{font-size:22px;font-weight:800;color:#fff;}
.artistLinks{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,0.12);background:rgba(0,0,0,0.25);color:#fff;text-decoration:none;font-size:12px;}
.pill:hover{border-color:rgba(255,255,255,0.22);} 

.modalOverlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:100;}
.modalOverlay.open{display:flex;}
.modalCard{max-width:720px;width:100%;background:rgba(0,0,0,0.78);border:1px solid rgba(255,255,255,0.12);border-radius:18px;padding:16px;}
.modalCard .input, .modalCard select{width:100%;}

.miniNote{color:rgba(0,0,0,0.62);font-size:13px;margin-top:6px;line-height:1.45;}
.topbar{
  position: relative;
  z-index: 10000;
}

.heroBanner{
  position: relative;
  z-index: 0;
}

.accountDropdown{
  z-index: 10001;
}

/* Modal favorites UI */
.modalFavActions{margin-top:10px;}
#mFavBtn.ghost{opacity:.9}