/* ==========================================================
   NEOWAVE skins.css (CLEAN + STABLE)
   - Skin 1: NAVY/BLUE (default)
   - Skin 2: Paper Gray (darker paper + mid-gray cards)
   - Skin2 RegNo badge: outline-only black capsule (transparent fill)
   - IMPORTANT: remove ALL text effects on regno to avoid blue fringe/bleed
   ========================================================== */

/* ---------- Layout / shared vars (do NOT theme here) ---------- */
:root{
  --col-right: 790px;
  --top-h: 96px;
  --mini-h: 60px;
  --radius: 18px;
  --nick-w: clamp(220px, 28ch, 420px);

  /* Fallbacks */
  --bg: #061824;
  --ink: #e0f2fe;
  --muted: #93c5fd;
  --brand: #38bdf8;
  --brand-2: #0ea5e9;
  --line: rgba(255,255,255,.10);
  --panel: rgba(9,20,30,.85);
  --panel-2: rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --bg-paint: #061824;
}

/* ==========================================================
   SKIN 1 — NAVY / BLUE  (DEFAULT)
   ========================================================== */
html[data-skin="1"], body[data-skin="1"],
html:not([data-skin]), body:not([data-skin]){
  --bg: #061824;
  --ink: #e0f2fe;
  --muted: #93c5fd;
  --brand: #38bdf8;
  --brand-2: #0ea5e9;
  --line: rgba(255,255,255,.10);
  --panel: rgba(9,20,30,.85);
  --panel-2: rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.45);

  --bg-paint:
    radial-gradient(1200px 700px at 15% -10%, #082f49aa, transparent 60%),
    radial-gradient(1000px 650px at 120% 30%, #0c4a6e99, transparent 60%),
    linear-gradient(150deg, #031926, #082f49 35%, #061824);
}

/* ==========================================================
   SKIN 2 — Paper Gray
   ========================================================== */
html[data-skin="2"], body[data-skin="2"]{
  --bg: #dedad1;
  --ink: #2b2b2b;
  --muted: #4a4a4a;
  --brand: #2563eb;
  --brand-2: #0ea5e9;
  --line: #b3b3b3;
  --panel: #cfcfcf;
  --panel-2: #c7c7c7;
  --shadow: 0 8px 18px rgba(0,0,0,.10);

  --bg-paint: var(--bg);
}

/* ---------- Apply theme vars ---------- */
html, body{
  background: var(--bg-paint, var(--bg));
  color: var(--ink);
}

/* ---------- Common panels ---------- */
.right, .cards-wrap, .walletbox, .nickbox, .remote, .actbar{
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--panel);
}

/* ==========================================================
   SKIN 2 — RegNo outline capsule (NO effects)
   - No background fill (transparent)
   - Black outline only
   - Remove any shadows/filters/blend that can cause color fringe
   ========================================================== */
html[data-skin="2"] .card .regno-badge,
body[data-skin="2"] .card .regno-badge{
  background: transparent !important;
  border: 2px solid rgba(0,0,0,0.75) !important;

  /* kill effects that can create blue fringe */
  text-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  -webkit-text-stroke: 0 !important;

  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* [NW FIX] Grid view reg-number double text kill (prevents blue+black blur overlap) */
#grid .card .reg,
#grid .card .regno,
#grid .card .reg-id,
#grid .card .reg-number{
  display:none !important;
  text-shadow:none !important;
  filter:none !important;
  mix-blend-mode: normal !important;
}


/* ==========================================================
   LIST VIEW — add depth (match grid "3D" feel)
   - subtle lift + shadow on list cards
   - slight inset border and cover depth
   ========================================================== */
.list .card{
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  transform: translateZ(0);
}
.list .card:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 16px 34px rgba(0,0,0,.24);
}

/* cover "card inside card" */
.list .card .cover{
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
}

/* meta area: a little separation */
.list .card .meta{
  position: relative;
}
.list .card .meta::before{
  content:"";
  position:absolute;
  left: -13px; /* sits in the column gap */
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: rgba(0,0,0,.10);
  opacity: .65;
}

/* skin2: slightly softer shadows on paper */
html[data-skin="2"] .list .card,
body[data-skin="2"] .list .card{
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
}
html[data-skin="2"] .list .card:hover,
body[data-skin="2"] .list .card:hover{
  box-shadow: 0 14px 26px rgba(0,0,0,.16);
  border-color: rgba(0,0,0,.22);
}
html[data-skin="2"] .list .card .cover,
body[data-skin="2"] .list .card .cover{
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 8px 16px rgba(0,0,0,.14);
}
html[data-skin="2"] .list .card .meta::before,
body[data-skin="2"] .list .card .meta::before{
  background: rgba(0,0,0,.14);
  opacity: .6;
}