/* ==========================================================
   BLOODLINE DASH  –  Complete CSS
   Matches all template class names exactly
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Variables ─────────────────────────────────────────── */
:root {
  --bg:          #0d0d0d;
  --bg2:         #161616;
  --bg3:         #1c1c1c;
  --bg4:         #222222;
  --sidebar-bg:  #111111;
  --border:      rgba(255,255,255,0.07);

  --red:         #cc2222;
  --red2:        #8b0000;
  --red-glow:    rgba(204,34,34,0.22);
  --gold:        #e8a000;
  --gold2:       #f5b942;
  --gold-glow:   rgba(232,160,0,0.20);
  --green:       #22c55e;
  --green2:      #16a34a;

  --txt:         #f0f0f0;
  --txt2:        #aaaaaa;
  --txt3:        #666666;

  --r:           12px;
  --r2:          8px;
  --r3:          6px;
  --sidebar-w:   265px;
  --topbar-h:    64px;
  --trans:       0.18s ease;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--txt);
       min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { color: var(--red); text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--gold); }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--sidebar-bg); }
::-webkit-scrollbar-thumb { background: var(--red2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }


/* ── Dashboard animated background ──────────────────────── */
.dash-bg-anim {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.dash-bg-anim::before {
  content: '';
  position: absolute;
  inset: -100px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(255,255,255,0.016) 80px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255,255,255,0.016) 80px);
  animation: gridDrift 30s linear infinite;
}

.dash-bg-anim::after {
  content: '';
  position: absolute;
  width: 1000px; height: 1000px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(204,34,34,0.08) 0%, transparent 68%);
  animation: glowOrbit 22s ease-in-out infinite alternate;
  left: -400px; top: -400px;
}

@keyframes gridDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(80px, 80px); }
}

@keyframes glowOrbit {
  0%   { transform: translate(0%, 0%); }
  25%  { transform: translate(120%, 60%); }
  50%  { transform: translate(180%, 160%); }
  75%  { transform: translate(70%, 220%); }
  100% { transform: translate(10%, 120%); }
}

/* ════════════════════════════════════════════════════════
   LOCKSCREEN PAGE  —  full public-facing site
   ════════════════════════════════════════════════════════ */

body.lockscreen-body {
  background: #0a0a0a;
  overflow-x: hidden;
}

/* ── Navbar ─────────────────────────────────────────────── */
.ls-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: rgba(8,8,8,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(204,34,34,0.18);
  transition: background 0.3s, box-shadow 0.3s;
}

.ls-nav--scrolled {
  background: rgba(5,5,5,0.98);
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}

.ls-nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 2rem;
  height: 64px;
  display: flex; align-items: center; gap: 2rem;
}

.ls-nav-logo {
  font-family: 'Cinzel', serif;
  font-size: 1rem; font-weight: 900;
  letter-spacing: 0.12em;
  background: linear-gradient(90deg, var(--red), var(--gold), #fff, var(--gold), var(--red));
  background-size: 300% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  text-decoration: none;
  animation: logoSweep 4s linear infinite;
}

@keyframes logoSweep {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}

.ls-nav-links {
  display: flex; align-items: center; gap: 2rem;
  margin-left: auto;
  list-style: none;
}

.ls-nav-links a {
  font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--txt2); text-decoration: none;
  transition: color var(--trans);
}

.ls-nav-links a:hover { color: var(--gold); }

.ls-nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
  margin-left: auto;
}
.ls-nav-hamburger span {
  width: 22px; height: 2px;
  background: var(--txt); border-radius: 2px; display: block;
  transition: all 0.2s;
}

/* ── Hero ────────────────────────────────────────────────── */
.ls-hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.ls-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('/static/images/Fundal.png') center/cover no-repeat;
}

.ls-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.45) 0%,
    rgba(5,0,0,0.65) 60%,
    rgba(0,0,0,0.88) 100%
  );
}

.ls-hero-content {
  position: relative; z-index: 2;
  text-align: center;
  padding: 0 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
}

.ls-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.6rem, 8vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  filter: drop-shadow(0 0 40px rgba(200,30,30,0.5));
  animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% { filter: drop-shadow(0 0 30px rgba(200,30,30,0.4)); }
  50%       { filter: drop-shadow(0 0 70px rgba(200,30,30,0.85)) drop-shadow(0 0 120px rgba(200,30,30,0.25)); }
}

.ls-hero-sub {
  font-size: clamp(0.72rem, 2vw, 0.9rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--txt2);
  font-weight: 400;
}

/* Discord login button */
.ls-portal-btn {
  display: inline-flex; align-items: center; gap: 0.65rem;
  background: var(--red);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.85rem 2.8rem;
  border-radius: 99px; border: none; cursor: pointer;
  box-shadow: 0 4px 28px rgba(204,34,34,0.5);
  transition: all 0.2s; text-decoration: none;
  margin-top: 0.5rem;
}

.ls-portal-btn:hover {
  background: #e03535;
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(204,34,34,0.65);
  color: #fff;
}

/* ── Section commons ─────────────────────────────────────── */
.ls-section {
  padding: 6rem 2rem;
}

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

.ls-section-header {
  text-align: center; margin-bottom: 3rem;
}

.ls-section-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}

.ls-section-sub {
  color: var(--txt2); font-size: 0.9rem; line-height: 1.7;
}

/* ── Services ────────────────────────────────────────────── */
.ls-services { background: #0d0d0d; }

.ls-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.ls-service-card {
  background: #161616;
  border-radius: 14px;
  padding: 2rem 1.6rem 2.2rem;
  display: flex; flex-direction: column; gap: 1.2rem;
  transition: box-shadow 0.3s, transform 0.3s;
  position: relative;
}

.ls-service-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 14px;
  padding: 2px;
  background: linear-gradient(90deg, #cc2222, #ff4444, #8b0000, #cc2222);
  background-size: 300% 100%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: cardBorder 3s linear infinite;
  pointer-events: none;
}

@keyframes cardBorder {
  0%   { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}

.ls-service-card:hover {
  box-shadow: 0 8px 40px rgba(204,34,34,0.35);
  transform: translateY(-6px);
}

.ls-service-card--featured {
  position: relative;
}

.ls-service-card--featured::before {
  background: linear-gradient(90deg, var(--gold), var(--gold2), var(--gold), var(--gold2));
  background-size: 300% 100%;
}

.ls-service-card--featured::after {
  content: 'Popular';
  position: absolute; top: -1px; right: 1.2rem;
  background: var(--gold);
  color: #000; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 0 0 6px 6px;
}

.ls-service-header { border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 1rem; }

.ls-service-name {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem; font-weight: 700;
  color: #fff; letter-spacing: 0.06em; margin-bottom: 0.5rem;
}

.ls-service-price {
  font-size: 1.1rem; font-weight: 800;
  color: var(--gold);
}

.ls-service-price span {
  font-size: 0.72rem; font-weight: 400;
  color: var(--txt3); margin-left: 0.25rem;
}

.ls-service-features { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }

.ls-service-features li {
  font-size: 0.86rem; color: var(--txt2);
  display: flex; align-items: center; gap: 0.55rem;
}

.ls-check {
  color: var(--red); font-weight: 800; font-size: 1rem; flex-shrink: 0;
}

.ls-service-card--featured .ls-check { color: var(--gold); }

/* ── Gallery ─────────────────────────────────────────────── */
.ls-gallery-section { background: #111111; }

.ls-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 220px 220px;
  gap: 0.75rem;
}

.ls-gallery-item {
  overflow: hidden;
  border-radius: 10px;
  background: #1a1a1a;
}

.ls-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.ls-gallery-item:hover img { transform: scale(1.06); }

.ls-gallery-item--wide {
  grid-column: span 2;
}

/* ── Personal ────────────────────────────────────────────── */
.ls-personal-section { background: #0d0d0d; }

.ls-personal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 860px; margin: 0 auto;
}

.ls-personal-card {
  background: #161616;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 2rem 1.5rem;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  transition: box-shadow 0.2s, transform 0.2s;
}

.ls-personal-card:hover {
  box-shadow: 0 6px 26px rgba(204,34,34,0.18);
  transform: translateY(-3px);
}

.ls-personal-avatar {
  width: 70px; height: 70px;
  background: linear-gradient(135deg, var(--red2), var(--red));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  box-shadow: 0 0 20px rgba(204,34,34,0.3);
}

.ls-personal-icon {
  display: block;
  flex-shrink: 0;
}

.ls-personal-name {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem; font-weight: 700;
  color: #fff; letter-spacing: 0.06em;
}

.ls-personal-phone {
  font-size: 0.88rem; color: var(--txt2);
  letter-spacing: 0.05em;
}

/* ── Footer ──────────────────────────────────────────────── */
.ls-footer {
  background: #080808;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 2.5rem 2rem;
}

.ls-footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-align: center;
}

.ls-footer-logo {
  font-family: 'Cinzel', serif;
  font-size: 1rem; font-weight: 900; letter-spacing: 0.15em;
  background: linear-gradient(90deg, var(--red), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ls-footer-links {
  display: flex; gap: 1.5rem; list-style: none;
}

.ls-footer-links a {
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--txt2); text-decoration: none;
  transition: color 0.18s;
}

.ls-footer-links a:hover { color: var(--gold); }

.ls-footer-copy, .ls-footer-credit {
  font-size: 0.72rem; color: var(--txt3);
  letter-spacing: 0.05em;
}

/* ── Floating music player ───────────────────────────────── */
.ls-music-bar {
  position: fixed;
  bottom: 24px; right: 24px; z-index: 600;
  display: flex; align-items: center; gap: 0.75rem;
  background: rgba(8,8,8,0.94);
  border: 1px solid rgba(204,34,34,0.38);
  border-radius: 16px;
  padding: 10px 16px 10px 10px;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.65);
  user-select: none;
  min-width: 220px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.22s;
}

.ls-music-bar:hover {
  border-color: rgba(204,34,34,0.7);
  box-shadow: 0 10px 44px rgba(204,34,34,0.28);
  transform: translateY(-3px);
}

.ls-music-btn {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--red2), var(--red));
  border: none; border-radius: 13px;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(204,34,34,0.55);
  transition: transform 0.18s, filter 0.18s;
}

.ls-music-btn:hover { transform: scale(1.09); filter: brightness(1.18); }

.ls-music-info {
  display: flex; flex-direction: column; line-height: 1.3;
  flex: 1; min-width: 0;
}

.ls-music-title  { font-size: 0.86rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-music-artist { font-size: 0.71rem; color: var(--txt2); margin-top: 2px; }

/* Equalizer bars */
.ls-music-eq {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 22px;
  flex-shrink: 0;
}

.ls-music-eq span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: rgba(204,34,34,0.4);
  transform-origin: bottom;
  transform: scaleY(0.25);
  transition: background 0.4s;
}

.ls-music-eq span:nth-child(1) { height: 55%; }
.ls-music-eq span:nth-child(2) { height: 100%; }
.ls-music-eq span:nth-child(3) { height: 70%; }
.ls-music-eq span:nth-child(4) { height: 45%; }
.ls-music-eq span:nth-child(5) { height: 82%; }

/* Playing state */
.ls-music-bar--playing {
  border-color: rgba(204,34,34,0.7);
  box-shadow: 0 0 0 1px rgba(204,34,34,0.12), 0 10px 44px rgba(204,34,34,0.3), 0 0 70px rgba(204,34,34,0.06);
}

.ls-music-bar--playing .ls-music-btn {
  animation: musicBtnPulse 2s ease-in-out infinite;
}

.ls-music-bar--playing .ls-music-eq span {
  background: linear-gradient(to top, var(--red), var(--gold));
  animation: eqBounce 0.65s ease-in-out infinite alternate;
}

.ls-music-bar--playing .ls-music-eq span:nth-child(1) { animation-delay: 0s; }
.ls-music-bar--playing .ls-music-eq span:nth-child(2) { animation-delay: 0.18s; }
.ls-music-bar--playing .ls-music-eq span:nth-child(3) { animation-delay: 0.09s; }
.ls-music-bar--playing .ls-music-eq span:nth-child(4) { animation-delay: 0.27s; }
.ls-music-bar--playing .ls-music-eq span:nth-child(5) { animation-delay: 0.13s; }

@keyframes eqBounce {
  0%   { transform: scaleY(0.12); }
  100% { transform: scaleY(1); }
}

@keyframes musicBtnPulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(204,34,34,0.5), 0 0 0 0 rgba(204,34,34,0.4); }
  50%       { box-shadow: 0 4px 26px rgba(204,34,34,0.75), 0 0 0 10px rgba(204,34,34,0); }
}

/* ── Gallery lightbox ────────────────────────────────────── */
.ls-lightbox {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.ls-lightbox--visible {
  opacity: 1;
  pointer-events: all;
}

.ls-lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(6px);
}

.ls-lightbox-wrap {
  position: relative; z-index: 1;
  max-width: min(90vw, 1100px);
  max-height: 88vh;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0.88);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.ls-lightbox--visible .ls-lightbox-wrap {
  transform: scale(1);
}

.ls-lightbox-img {
  max-width: 100%; max-height: 88vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 0 80px rgba(204,34,34,0.35), 0 20px 60px rgba(0,0,0,0.8);
  display: block;
}

.ls-lightbox-close {
  position: absolute; top: -14px; right: -14px;
  width: 34px; height: 34px;
  background: var(--red);
  color: #fff; font-size: 1.3rem; line-height: 1;
  border: none; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(204,34,34,0.5);
  transition: background 0.18s, transform 0.18s;
  z-index: 2;
}

.ls-lightbox-close:hover {
  background: #e03535;
  transform: rotate(90deg) scale(1.1);
}

/* Also add pointer cursor on gallery images to hint they're clickable */
.ls-gallery-item img { cursor: zoom-in; }

/* ── Lightbox responsive ─────────────────────────────────── */
@media (max-width: 600px) {
  .ls-lightbox-wrap { max-width: 95vw; }
}

/* ── Made by Zeus ────────────────────────────────────────── */
.ls-made-by {
  font-size: 0.78rem;
  color: var(--txt3);
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: color 0.2s;
}

.ls-made-by span {
  background: linear-gradient(90deg, var(--red), var(--gold), var(--red));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  animation: zeusSweep 2.5s linear infinite;
}

@keyframes zeusSweep {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.ls-made-by:hover { color: var(--txt2); }

/* ── Scroll animations ───────────────────────────────────── */
[data-anim] {
  opacity: 0;
  transition: opacity 0.65s ease, transform 0.65s ease;
}

[data-anim="fade-up"]    { transform: translateY(40px); }
[data-anim="fade-left"]  { transform: translateX(-40px); }
[data-anim="fade-right"] { transform: translateX(40px); }

[data-anim].anim-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ── Lockscreen responsive ───────────────────────────────── */
@media (max-width: 900px) {
  .ls-services-grid { grid-template-columns: 1fr; }
  .ls-gallery-grid  { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .ls-gallery-item--wide { grid-column: span 2; }
  .ls-personal-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .ls-nav-links {
    display: none; flex-direction: column;
    position: absolute; top: 64px; left: 0; right: 0;
    background: rgba(8,8,8,0.98); border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 1.2rem 2rem;
  }
  .ls-nav-links.open { display: flex; }
  .ls-nav-hamburger  { display: flex; }
  .ls-nav-logo { margin: 0; }

  .ls-gallery-grid  { grid-template-columns: 1fr; grid-template-rows: auto; }
  .ls-gallery-item--wide { grid-column: span 1; }
  .ls-personal-grid { grid-template-columns: 1fr; }
  .ls-section { padding: 4rem 1.2rem; }
}


/* ════════════════════════════════════════════════════════
   LAYOUT SHELL  (sidebar + main)
   ════════════════════════════════════════════════════════ */

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform 0.25s ease;
}

/* Brand */
.sidebar-brand {
  padding: 1.5rem 1.4rem 1.1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-brand-title {
  font-family: 'Cinzel', serif;
  font-size: 1.22rem;
  font-weight: 900;
  display: block;
  color: #fff;
  letter-spacing: 0.08em;
  animation: sidebarGlowRed 3s ease-in-out infinite;
}

/* Grade-based logo glow colors — text always white for readability */
.brand-grade--lider .sidebar-brand-title,
.brand-grade--lider_secundar .sidebar-brand-title,
.brand-grade--colider .sidebar-brand-title {
  animation: sidebarGlowRed 2s ease-in-out infinite;
}
.brand-grade--staff .sidebar-brand-title {
  animation: sidebarGlowRed 2.5s ease-in-out infinite;
}
.brand-grade--tester .sidebar-brand-title {
  animation: sidebarGlowGold 2.5s ease-in-out infinite;
}
.brand-grade--membru .sidebar-brand-title,
.brand-grade--spalator .sidebar-brand-title,
.brand-grade--default .sidebar-brand-title {
  animation: sidebarGlowRed 3.5s ease-in-out infinite;
}

@keyframes sidebarGlowRed {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(200,30,30,0.3)); }
  50%       { filter: drop-shadow(0 0 14px rgba(200,30,30,0.85)) drop-shadow(0 0 28px rgba(200,30,30,0.25)); }
}
@keyframes sidebarGlowGold {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(200,160,30,0.3)); }
  50%       { filter: drop-shadow(0 0 14px rgba(200,160,30,0.85)) drop-shadow(0 0 28px rgba(200,160,30,0.25)); }
}

.sidebar-brand-sub {
  font-size: 0.68rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-top: 2px;
}

/* User strip */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  transition: background var(--trans);
}

.sidebar-user:hover { background: rgba(204,34,34,0.05); }

.sidebar-user-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--red);
  object-fit: cover;
  flex-shrink: 0;
  transition: box-shadow var(--trans);
}

.sidebar-user:hover .sidebar-user-avatar { box-shadow: 0 0 12px var(--red-glow); }

.sidebar-user-info { overflow: hidden; flex: 1; min-width: 0; }

.sidebar-user-name {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 0.72rem;
  color: var(--gold);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-notif-badge {
  background: var(--red);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  padding: 0.7rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 0.9rem;
  border-radius: var(--r3);
  color: var(--txt2);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  border-left: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.nav-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(204,34,34,0.12), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nav-item:hover::after { opacity: 1; }

.nav-item i { font-size: 1rem; width: 18px; text-align: center; flex-shrink: 0; z-index: 1; }
.nav-item > span, .nav-item > i ~ * { z-index: 1; position: relative; }

.nav-item:hover {
  background: rgba(204,34,34,0.08);
  color: var(--txt);
  border-left-color: rgba(204,34,34,0.5);
  transform: translateX(3px);
}

.nav-item.active {
  background: rgba(200,30,30,0.2);
  color: var(--txt);
  border-left-color: var(--red);
  font-weight: 600;
  box-shadow: inset 0 0 20px rgba(204,34,34,0.06);
}

.nav-item.active i { color: var(--gold); }

.nav-item.logout:hover { color: var(--red); background: rgba(204,34,34,0.08); }

.nav-section-label {
  padding: 0.6rem 1.2rem 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt3);
  opacity: 0.7;
}

/* Sidebar footer */
.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 0.75rem 1.2rem;
  flex-shrink: 0;
}

.sidebar-made-by {
  display: block;
  font-size: 0.73rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(90deg, var(--txt3) 20%, var(--red) 45%, var(--gold) 55%, var(--txt3) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: sidebarSweep 3.5s linear infinite;
}

.sidebar-made-by:hover { -webkit-text-fill-color: transparent; opacity: 0.9; }

.sidebar-discord-invite {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.5rem;
  border-radius: var(--r2);
  background: rgba(88,101,242,0.15);
  border: 1px solid rgba(88,101,242,0.3);
  color: #8ea1e1;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--trans);
}
.sidebar-discord-invite:hover {
  background: rgba(88,101,242,0.28);
  border-color: rgba(88,101,242,0.6);
  color: #b9c5f0;
}
.sidebar-discord-invite i { font-size: 1rem; }

@keyframes sidebarSweep {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Main area */
.main-area {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 90;
  height: var(--topbar-h);
  background: rgba(22,22,22,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 2rem;
}

.topbar-hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  color: var(--txt); font-size: 1.25rem; padding: 4px 6px;
  border-radius: 6px; transition: color var(--trans);
}

.topbar-hamburger:hover { color: var(--red); }

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.topbar-notif-btn {
  position: relative;
  background: none; border: none; cursor: pointer;
  color: var(--txt2); font-size: 1.1rem;
  padding: 6px 8px; border-radius: var(--r3);
  transition: color var(--trans), background var(--trans);
}

.topbar-notif-btn:hover { color: var(--gold); background: rgba(255,255,255,0.06); }

.notif-dot {
  position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px;
  background: var(--red); border-radius: 50%;
  border: 2px solid var(--bg2);
}

/* Content */
.content-area {
  flex: 1;
  padding: 2.2rem 2.4rem;
}

/* Page load fade-in */
.page-fade {
  opacity: 0;
  animation: pageFadeIn 0.4s ease forwards;
  animation-delay: 0.04s;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Topbar filter/search helpers */
.topbar-filter,
.topbar-search { display: flex; align-items: center; }


/* ════════════════════════════════════════════════════════
   PAGE HEADER
   ════════════════════════════════════════════════════════ */

.page-header { margin-bottom: 2rem; }

.page-title {
  font-family: 'Cinzel', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.page-title .bi { color: var(--red); }

.page-title-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  padding: 3px 9px;
  border-radius: 99px;
}

.page-subtitle {
  font-size: 0.92rem;
  color: var(--txt2);
  margin-top: 0.45rem;
}


/* ════════════════════════════════════════════════════════
   STAT CARDS  (dashboard top row)
   ════════════════════════════════════════════════════════ */

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.stat-card {
  background: var(--bg3);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r);
  padding: 1.5rem 1.4rem 1.3rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  opacity: 0;
  animation: cardEnter 0.5s ease forwards;
}

.stat-card:nth-child(1) { animation-delay: 0.08s; }
.stat-card:nth-child(2) { animation-delay: 0.16s; }
.stat-card:nth-child(3) { animation-delay: 0.24s; }
.stat-card:nth-child(4) { animation-delay: 0.32s; }

@keyframes cardEnter {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Gold top border gradient */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--red), var(--gold));
}

.stat-card:hover {
  box-shadow: 0 10px 40px rgba(204,34,34,0.22);
  transform: translateY(-4px);
  border-color: rgba(204,34,34,0.22);
}

/* Top border color per taxa status */
.stat-card--paid::before,
.stat-card--ok::before       { background: linear-gradient(90deg, #22c55e, #00eab0); }
.stat-card--unpaid::before,
.stat-card--warn::before     { background: linear-gradient(90deg, #cc2222, #ff5555); }
.stat-card--free::before,
.stat-card--free_permanent::before,
.stat-card--gold::before     { background: linear-gradient(90deg, #c87000, #e8a000); }

/* Icon box */
.stat-card-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--red2), var(--gold));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem;
  color: #fff;
  box-shadow: 0 4px 14px rgba(204,34,34,0.3);
  transition: transform 0.2s ease;
}

.stat-card:hover .stat-card-icon { transform: scale(1.08); }

.stat-card-body { min-width: 0; }

.stat-card-label {
  font-size: 0.73rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt2);
  margin-bottom: 0.4rem;
}

.stat-card-value {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
}

.stat-card-sub {
  font-size: 0.74rem;
  color: var(--txt3);
  margin-top: 0.35rem;
}

.stat-card-sub-row {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.4rem;
  font-size: 0.73rem;
  color: var(--txt2);
  flex-wrap: wrap;
}

/* Value color variants */
.taxa-value.text-gold   { color: var(--gold) !important; }
.taxa-value.text-green  { color: var(--green) !important; }
.taxa-value.text-red    { color: var(--red) !important; }


/* ════════════════════════════════════════════════════════
   DASH CARDS  (generic card blocks)
   ════════════════════════════════════════════════════════ */

.dash-card {
  background: var(--bg3);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r);
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.dash-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  border-color: rgba(204,34,34,0.18);
  transform: translateY(-2px);
}

.dash-card-header {
  padding: 0.9rem 1.4rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(204,34,34,0.12) 0%, transparent 70%);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--txt2);
}

.dash-card-header .bi { color: var(--red); }

.dash-card-body { padding: 1.3rem 1.4rem; }
.dash-card-body.p-0 { padding: 0; }

/* Dashboard 2-col grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}

/* Taxa announcement */
.taxa-announcement-date {
  font-size: 0.68rem;
  color: var(--txt3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.taxa-announcement-text {
  font-size: 0.88rem;
  color: var(--txt2);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'Inter', sans-serif;
  background: rgba(204,34,34,0.06);
  border: 1px solid rgba(204,34,34,0.12);
  border-radius: var(--r3);
  padding: 0.85rem;
}

/* Istoric personal */
.istoric-row {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.istoric-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.85rem;
  background: rgba(255,255,255,0.03);
  border-radius: var(--r3);
  border: 1px solid var(--border);
}

.istoric-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--red2), var(--gold));
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #fff;
}

.istoric-label { font-size: 0.75rem; color: var(--txt2); }
.istoric-val   { font-size: 1.2rem; font-weight: 800; margin-top: 1px; }


/* ════════════════════════════════════════════════════════
   TABLE
   ════════════════════════════════════════════════════════ */

.bl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

.bl-table thead tr {
  background: linear-gradient(90deg, rgba(204,34,34,0.18) 0%, rgba(204,34,34,0.05) 100%);
}

.bl-table th {
  padding: 0.6rem 1rem;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt2);
}

.bl-table td {
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--border);
  vertical-align: middle;
}

.bl-table tbody tr:hover { background: rgba(255,255,255,0.025); }


/* ════════════════════════════════════════════════════════
   FORMS
   ════════════════════════════════════════════════════════ */

.bl-input {
  display: block;
  width: 100%;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r3);
  color: var(--txt);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  padding: 0.55rem 0.85rem;
  outline: none;
  transition: border-color var(--trans), box-shadow var(--trans);
  -webkit-appearance: none;
}

.bl-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
}

.bl-input::placeholder { color: var(--txt3); }
.bl-textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.bl-input--sm { padding: 0.38rem 0.7rem; font-size: 0.8rem; width: auto; }

select.bl-input { cursor: pointer; }

.form-group { margin-bottom: 0.85rem; }

.form-group label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--txt3);
  margin-bottom: 0.3rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}

.form-actions { display: flex; gap: 0.65rem; flex-wrap: wrap; }


/* ════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.52rem 1.05rem;
  border-radius: var(--r3);
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--trans);
  white-space: nowrap;
}

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-red {
  background: linear-gradient(135deg, var(--red2), var(--red));
  color: #fff;
  box-shadow: 0 2px 10px rgba(204,34,34,0.3);
}
.btn-red:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--red), #e03535);
  color: #fff;
}

.btn-gold {
  background: linear-gradient(135deg, #aa7000, var(--gold));
  color: #000;
}
.btn-gold:hover:not(:disabled) { filter: brightness(1.1); color: #000; }

.btn-green {
  background: linear-gradient(135deg, var(--green2), var(--green));
  color: #fff;
}
.btn-green:hover:not(:disabled) { filter: brightness(1.12); color: #fff; }

.btn-danger {
  background: rgba(204,34,34,0.12);
  color: var(--red);
  border: 1px solid rgba(204,34,34,0.3);
}
.btn-danger:hover:not(:disabled) { background: rgba(204,34,34,0.25); }

.btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--txt2);
  border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) { background: rgba(255,255,255,0.11); color: var(--txt); }

.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.76rem; }

.btn-buy {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: linear-gradient(135deg, var(--red2), var(--red));
  color: #fff; border: none;
  border-radius: var(--r3);
  padding: 0.45rem 0.85rem;
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all var(--trans);
}
.btn-buy:hover:not(:disabled) { background: linear-gradient(135deg, var(--red), var(--gold)); }
.btn-buy:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-icon {
  background: none; border: none; cursor: pointer;
  font-size: 0.9rem; padding: 4px 5px; border-radius: 4px;
  transition: background var(--trans), color var(--trans);
}
.btn-icon:hover { background: rgba(255,255,255,0.08); }

.w-full { width: 100%; justify-content: center; }


/* ════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════ */

.badge-status {
  display: inline-block;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px;
  white-space: nowrap;
}

.badge-paid          { background: rgba(34,197,94,0.15);  color: var(--green);  border: 1px solid rgba(34,197,94,0.3); }
.badge-free,
.badge-free_permanent{ background: rgba(232,160,0,0.15);  color: var(--gold);   border: 1px solid rgba(232,160,0,0.3); }
.badge-unpaid        { background: rgba(204,34,34,0.15);  color: var(--red);    border: 1px solid rgba(204,34,34,0.3); }
.badge-pending       { background: rgba(232,160,0,0.15);  color: var(--gold);   border: 1px solid rgba(232,160,0,0.3); }
.badge-accepted      { background: rgba(34,197,94,0.15);  color: var(--green);  border: 1px solid rgba(34,197,94,0.3); }
.badge-rejected      { background: rgba(204,34,34,0.15);  color: var(--red);    border: 1px solid rgba(204,34,34,0.3); }
.badge-expired       { background: rgba(120,120,120,0.1); color: #888;          border: 1px solid rgba(120,120,120,0.2); }
.badge-inactiv       { background: rgba(120,120,120,0.1); color: #888;          border: 1px solid rgba(120,120,120,0.2); }
.badge-activ         { background: rgba(34,197,94,0.15);  color: var(--green);  border: 1px solid rgba(34,197,94,0.3); }

.badge-role {
  display: inline-block;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
}

.badge-admin          { background: rgba(204,34,34,0.18);  color: #ff6060; border: 1px solid rgba(204,34,34,0.38); }
.badge-worker         { background: rgba(232,160,0,0.15);  color: var(--gold); border: 1px solid rgba(232,160,0,0.3); }
.badge-member         { background: rgba(255,255,255,0.06); color: var(--txt2); border: 1px solid var(--border); }
.badge-lider          { background: rgba(204,34,34,0.18);  color: #ff8888; border: 1px solid rgba(204,34,34,0.35); }
.badge-lider_secundar { background: rgba(204,34,34,0.12);  color: #ffaaaa; border: 1px solid rgba(204,34,34,0.25); }
.badge-colider        { background: rgba(232,120,30,0.15); color: #f0a060; border: 1px solid rgba(232,120,30,0.3); }
.badge-tester         { background: rgba(232,160,0,0.12);  color: var(--gold2); border: 1px solid rgba(232,160,0,0.25); }
.badge-sageti         { background: rgba(232,160,0,0.1);   color: var(--gold2); border: 1px solid rgba(232,160,0,0.22); }
.badge-cat            { background: rgba(255,255,255,0.05); color: var(--txt2); border: 1px solid var(--border);
                        font-size: 0.62rem; padding: 1px 6px; border-radius: 3px; font-weight: 600; }


/* ════════════════════════════════════════════════════════
   NOTIFICATION DRAWER
   ════════════════════════════════════════════════════════ */

.notif-drawer {
  position: fixed;
  top: var(--topbar-h); right: 0; bottom: 0;
  width: 310px;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  z-index: 200;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.notif-drawer.open { transform: translateX(0); }

.notif-drawer-header {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  flex-shrink: 0;
}

.notif-list { flex: 1; overflow-y: auto; padding: 0.65rem; }

.notif-item {
  padding: 0.7rem 0.85rem;
  border-radius: var(--r3);
  border: 1px solid var(--border);
  margin-bottom: 0.45rem;
  font-size: 0.8rem; line-height: 1.5;
  background: var(--bg3);
}

.notif-item.unread { border-left: 3px solid var(--red); padding-left: 0.7rem; }
.notif-item-time { font-size: 0.68rem; color: var(--txt3); margin-top: 0.25rem; }
.notif-empty { text-align: center; color: var(--txt3); padding: 2rem 0.5rem; font-size: 0.82rem; }


/* ════════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════════ */

.toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 0.5rem;
  pointer-events: none;
}

.toast {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.7rem 1rem;
  font-size: 0.83rem;
  max-width: 300px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  display: flex; align-items: center; gap: 0.55rem;
  pointer-events: all;
  animation: toastIn 0.28s ease;
}

.toast.success { border-left: 3px solid var(--green); }
.toast.error   { border-left: 3px solid var(--red); }
.toast.info    { border-left: 3px solid var(--gold); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ════════════════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}

.modal-panel,
.modal-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 680px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  padding: 1.5rem;
  position: relative;
}

.modal-panel--sm { max-width: 420px; }
.modal-box--lg { max-width: 1020px; padding: 0; overflow-x: hidden; }

.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  color: var(--txt2); border-radius: 6px;
  width: 28px; height: 28px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
  transition: all var(--trans);
}
.modal-close:hover { background: rgba(204,34,34,0.18); color: var(--red); }
.modal-close i { pointer-events: none; }

/* Keep close button fully clickable in Member Management modal */
#memberModal .modal-close {
  top: 0.75rem;
  right: 0.75rem;
  width: 34px;
  height: 34px;
  z-index: 40;
}

.modal-title {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem; font-weight: 700;
  margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: 0.5rem;
}


/* ════════════════════════════════════════════════════════
   WORKER GRID
   ════════════════════════════════════════════════════════ */

.worker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

.worker-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.1rem;
  display: flex; align-items: center; gap: 0.75rem;
  cursor: pointer;
  transition: all var(--trans);
}

.worker-card:hover {
  border-color: rgba(204,34,34,0.38);
  box-shadow: 0 4px 18px rgba(204,34,34,0.15);
  transform: translateY(-2px);
}

.worker-card-avatar img {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--red); object-fit: cover;
}

.worker-card-name { font-size: 0.86rem; font-weight: 600; }
.worker-card-location { font-size: 0.7rem; color: var(--txt3); margin-top: 3px; }
.worker-card-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }

/* Worker detail */
.worker-detail-header {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}


/* ════════════════════════════════════════════════════════
   LEADERBOARD PAGE
   ════════════════════════════════════════════════════════ */
.lb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.lb-section {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.lb-section-header {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1.2rem;
  background: linear-gradient(90deg, rgba(204,34,34,0.15), transparent);
  border-bottom: 1px solid var(--border);
  font-family: 'Cinzel', serif;
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.lb-list { padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.55rem; }

.lb-item {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--r2);
  background: var(--bg4);
  border: 1px solid transparent;
  transition: all var(--trans);
}

.lb-item:hover { border-color: rgba(204,34,34,0.28); }

.lb-rank {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 800; flex-shrink: 0;
}
.lb-rank-1 { background: linear-gradient(135deg,#d4af37,#f5e16a); color: #1a1000; box-shadow: 0 0 10px rgba(212,175,55,0.5); }
.lb-rank-2 { background: linear-gradient(135deg,#b0b0b0,#d8d8d8); color: #111; }
.lb-rank-3 { background: linear-gradient(135deg,#a87050,#d4956a); color: #fff; }

.lb-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--border); }
.lb-info { flex: 1; min-width: 0; }
.lb-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-role { font-size: 0.7rem; color: var(--txt3); }
.lb-score { font-size: 1rem; font-weight: 800; color: var(--gold); flex-shrink: 0; }

.lb-empty { padding: 1.5rem; text-align: center; color: var(--txt3); font-size: 0.85rem; }
.lb-unit  { font-size: 0.7rem; color: var(--txt3); font-weight: 400; margin-left: 2px; }
.lb-section-sub { font-size: 0.72rem; color: var(--txt3); font-weight: 400; margin-left: auto; text-transform: none; letter-spacing: 0; }


/* ════════════════════════════════════════════════════════
   SITE LOGS PAGE
   ════════════════════════════════════════════════════════ */
.logs-table {
  width: 100%;
  border-collapse: collapse;
}
.logs-table th, .logs-table td {
  padding: 0.65rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.84rem;
}
.logs-table th { color: var(--txt2); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.logs-table tr:last-child td { border-bottom: none; }
.logs-table tr:hover td { background: rgba(255,255,255,0.02); }

.log-action-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.la-anunt { background: rgba(232,160,0,0.18); color: var(--gold2); border: 1px solid rgba(232,160,0,0.3); }
.la-fw { background: rgba(204,34,34,0.18); color: #ff6b6b; border: 1px solid rgba(204,34,34,0.3); }
.la-rank { background: rgba(100,160,255,0.15); color: #80b4ff; border: 1px solid rgba(100,160,255,0.3); }
.la-points { background: rgba(34,197,94,0.15); color: var(--green); border: 1px solid rgba(34,197,94,0.3); }
.la-remove { background: rgba(204,34,34,0.28); color: #ff4444; border: 1px solid rgba(204,34,34,0.5); }
.la-default { background: rgba(255,255,255,0.08); color: var(--txt2); border: 1px solid var(--border); }

.logs-pagination {
  display: flex; align-items: center; gap: 0.5rem;
  justify-content: center;
  padding: 1.2rem 0 0;
}
.logs-pagination a, .logs-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px;
  padding: 0 8px;
  border-radius: var(--r2);
  font-size: 0.84rem; font-weight: 600;
  background: var(--bg4);
  border: 1px solid var(--border);
  transition: all var(--trans);
}
.logs-pagination a { color: var(--txt); text-decoration: none; }
.logs-pagination a:hover { border-color: var(--red); color: var(--red); }
.logs-pagination span { color: var(--txt3); cursor: default; }
.logs-pagination .pg-current { background: var(--red); border-color: var(--red); color: #fff; }

.log-row { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.82rem; min-width: 0; }
.log-row:last-child { border-bottom: none; }
.log-date { color: var(--txt3); flex-shrink: 0; font-size: 0.76rem; white-space: nowrap; }
.log-msg { color: var(--txt2); flex: 1; min-width: 0; word-break: break-word; overflow-wrap: anywhere; }


/* ════════════════════════════════════════════════════════
   MEMBER MANAGEMENT – MODAL
   ════════════════════════════════════════════════════════ */

/* Member detail MODAL */
.mm-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(3px);
}

.mm-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  width: 100%; max-width: 700px;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(204,34,34,0.12);
}

.mm-header,
.mm-modal-header {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(204,34,34,0.1), transparent);
  position: relative;
}

.mm-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--red);
  box-shadow: 0 0 18px rgba(204,34,34,0.4);
}

.mm-header-info { flex: 1; min-width: 0; }
.mm-name,
.mm-header-name {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem; font-weight: 900;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mm-meta-row,
.mm-tags {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin-top: 0.3rem;
}

.mm-meta,
.mm-meta-chip {
  font-size: 0.72rem; color: var(--txt3);
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: 20px; padding: 2px 10px;
}

.mm-close {
  position: absolute; top: 0.9rem; right: 1rem;
  background: none; border: none; color: var(--txt3);
  font-size: 1.1rem; cursor: pointer; padding: 6px;
  border-radius: var(--r2); transition: all var(--trans);
}
.mm-close:hover { background: rgba(204,34,34,0.18); color: var(--red); }

/* Tabs */
.mm-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  padding: 0 1rem; overflow-x: auto;
}
.mm-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 0.7rem 1.1rem;
  color: var(--txt3); font-size: 0.83rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all var(--trans);
}
.mm-tab:hover { color: var(--txt); }
.mm-tab.active { color: var(--red); border-bottom-color: var(--red); }

/* Stats grid inside modal */
.mm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.mm-stat {
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 0.75rem;
  text-align: center;
}
.mm-stat-val { font-size: 1.4rem; font-weight: 800; color: var(--red); }
.mm-stat-lbl { font-size: 0.68rem; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

.mm-bani-row {
  display: flex; gap: 1rem; margin-bottom: 1rem;
}
.mm-bani-card {
  flex: 1;
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: var(--r2); padding: 0.75rem;
}
.mm-bani-card .label { font-size: 0.7rem; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.05em; }
.mm-bani-card .value { font-size: 1rem; font-weight: 700; color: var(--gold); margin-top: 3px; }

/* Points form */
.mm-pts-form {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 0.9rem;
  margin-bottom: 1rem;
}
.mm-pts-form .form-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--txt2); margin-bottom: 0.65rem; letter-spacing: 0.05em; }
.mm-pts-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-end; }
.mm-pts-row .bl-select, .mm-pts-row .bl-input { flex: 1; min-width: 80px; }
.mm-pts-row .btn { flex-shrink: 0; }

/* Rank form */
.mm-rank-form {
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.mm-rank-form label { font-size: 0.8rem; font-weight: 600; color: var(--txt2); flex-shrink: 0; }
.mm-rank-form .bl-select { flex: 1; min-width: 140px; }

/* FW toggle cards */
.mm-fw-cards { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.mm-fw-card {
  display: flex; align-items: center; gap: 0.8rem;
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: var(--r2); padding: 0.75rem 1rem;
  transition: border-color var(--trans);
}
.mm-fw-card.active { border-color: rgba(204,34,34,0.55); background: rgba(204,34,34,0.06); }
.mm-fw-card-label { flex: 1; font-size: 0.85rem; font-weight: 600; }
.mm-fw-card-desc { font-size: 0.72rem; color: var(--txt3); margin-top: 2px; }

/* FW warn icon inside fw-card */
.mm-fw-icon {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1.1rem;
  color: var(--txt3);
  transition: color var(--trans);
}
.mm-fw-card.active .mm-fw-icon { color: var(--red); }

/* Modal tab content: constrain so it doesn’t escape the modal box */
.mm-tab-content { padding: 1.2rem 1.4rem; overflow: hidden; }
.mm-tab-content table { width: 100%; max-width: 100%; table-layout: fixed; word-break: break-word; }
.mm-tab-content table td, .mm-tab-content table th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }
.mm-sanctions-list { max-height: 260px; overflow-y: auto; overflow-x: hidden; }
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 22px; cursor: pointer;
  transition: background var(--trans), border-color var(--trans);
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 16px; height: 16px; left: 2px; top: 2px;
  background: var(--txt3); border-radius: 50%;
  transition: transform var(--trans), background var(--trans);
}
.toggle-switch input:checked + .toggle-slider { background: rgba(204,34,34,0.3); border-color: var(--red); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); background: var(--red); }

/* Modal sections */
.mm-section { margin-bottom: 1.1rem; }
.mm-section-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--txt3); margin-bottom: 0.55rem; }
.mm-actions-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }

/* FW badge in header */
.mm-fw-badge {
  display: inline-block;
  background: rgba(204,34,34,0.2); color: #ff6b6b;
  border: 1px solid rgba(204,34,34,0.5);
  border-radius: 4px; padding: 2px 8px;
  font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* Shop next-update timer */
.shop-timer-widget {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem; color: var(--txt2);
}
.shop-timer-widget .timer-val { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }

/* Dashboard enhancements */
.dash-item-enter {
  animation: fadeSlideUp 0.4s ease both;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stat-card { animation: fadeSlideUp 0.5s ease both; }
.stat-cards .stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-cards .stat-card:nth-child(2) { animation-delay: 0.12s; }
.stat-cards .stat-card:nth-child(3) { animation-delay: 0.19s; }
.stat-cards .stat-card:nth-child(4) { animation-delay: 0.26s; }

/* Animated red pulse on unpaid taxa card */
.stat-card--warn .stat-card-value { animation: pulse-red 2.2s ease-in-out infinite; }
@keyframes pulse-red {
  0%, 100% { text-shadow: 0 0 6px rgba(204,34,34,0.4); }
  50%       { text-shadow: 0 0 20px rgba(204,34,34,0.85), 0 0 40px rgba(204,34,34,0.35); }
}

/* Glowing border on stat-card--ok */
.stat-card--ok { border-color: rgba(34,197,94,0.3); }
.stat-card--ok:hover { box-shadow: 0 8px 24px rgba(34,197,94,0.15); }

.dash-card { animation: fadeSlideUp 0.5s ease both; animation-delay: 0.3s; }

/* Floating particles on dashboard */
.dash-particles {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.dash-particle {
  position: absolute;
  bottom: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204,34,34,0.55) 0%, transparent 70%);
  animation: particleRise linear infinite;
  opacity: 0;
}
@keyframes particleRise {
  0%   { opacity: 0; transform: translateY(0) scale(1); }
  8%   { opacity: 0.8; }
  85%  { opacity: 0.25; }
  100% { opacity: 0; transform: translateY(-100vh) scale(0.3); }
}

/* Colored stat-card icons */
.stat-card-icon--gold { color: var(--gold); }
.stat-card-icon--blue { color: #60a5fa; }
.stat-icon--gold { color: var(--gold); }

/* Recrutare badge in points-guide */
.points-guide li {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.35rem 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.88rem;
}
.points-guide li:last-child { border-bottom: none; }

.worker-detail-avatar {
  width: 78px; height: 78px; border-radius: 50%;
  border: 3px solid var(--red); object-fit: cover;
  box-shadow: 0 0 18px var(--red-glow);
}

.worker-detail-name { font-size: 1.1rem; font-weight: 700; }
.worker-detail-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.worker-detail-actions { margin-left: auto; display: flex; gap: 0.45rem; flex-wrap: wrap; }

.detail-stat-row {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 0.65rem;
}

.detail-stat {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r3); padding: 0.7rem; text-align: center;
}

.detail-stat-label { font-size: 0.65rem; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.1em; }
.detail-stat-val   { font-size: 1.05rem; font-weight: 700; margin-top: 3px; }

.pontaj-shift-section {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1rem 1.1rem;
}

.shift-status-text { font-size: 0.83rem; color: var(--txt2); }


/* ════════════════════════════════════════════════════════
   MEMBER GRID & CARDS
   ════════════════════════════════════════════════════════ */

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

/* Card shell */
.member-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.member-card:hover {
  border-color: rgba(204,34,34,0.45);
  box-shadow: 0 6px 24px rgba(204,34,34,0.18);
  transform: translateY(-2px);
}

/* Avatar */
.member-card-avatar-wrap { width: 46px; height: 46px; flex-shrink: 0; }
.member-card-avatar-wrap img {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--red); display: block;
}

/* Body: name + badges stacked */
.member-card-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.member-card-name {
  font-size: 0.88rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--txt);
}
.member-card-badges {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
}

/* Actions – compact buttons stacked */
.member-card-actions {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 4px;
  align-items: stretch;
}
.member-card-actions .btn {
  font-size: 0.72rem;
  padding: 4px 8px;
  white-space: nowrap;
}

/* Arrow */
.member-card-arrow {
  color: var(--txt3); font-size: 0.85rem; flex-shrink: 0;
  transition: transform var(--trans), color var(--trans);
}
.member-card:hover .member-card-arrow { color: var(--red); transform: translateX(3px); }


/* ════════════════════════════════════════════════════════
   ADMIN PANEL
   ════════════════════════════════════════════════════════ */

.admin-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}

.admin-col-full { grid-column: 1 / -1; }

.week-selector {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 0.5rem;
}

.week-option {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r3); padding: 0.6rem 0.7rem;
  cursor: pointer; text-align: center; transition: all var(--trans);
}

.week-option:hover  { border-color: rgba(204,34,34,0.4); background: rgba(204,34,34,0.08); }
.week-option.active { border-color: var(--gold); background: rgba(232,160,0,0.09); }
.week-option-label  { font-size: 0.76rem; font-weight: 600; }

.sanct-action-item {
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

.sanct-action-title { font-size: 0.86rem; font-weight: 600; }

.stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.65rem; }

.stats-item {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r3); padding: 0.7rem; text-align: center;
}

.stats-label { font-size: 0.65rem; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.1em; }
.stats-val   { font-size: 1.2rem; font-weight: 800; margin-top: 3px; }


/* ════════════════════════════════════════════════════════
   SHOP
   ════════════════════════════════════════════════════════ */

.shop-top-right { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }

.points-display {
  display: flex; align-items: center; gap: 0.4rem;
  background: rgba(232,160,0,0.08);
  border: 1px solid rgba(232,160,0,0.2);
  border-radius: var(--r3); padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.85rem; margin-top: 1rem;
}

.product-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
  transition: all var(--trans);
  cursor: pointer;
}

.product-card:hover { border-color: rgba(204,34,34,0.35); box-shadow: 0 4px 18px rgba(204,34,34,0.14); }
.product-card--inactive { opacity: 0.45; }

.product-img-wrap { height: 140px; overflow: hidden; }
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

.product-img-placeholder {
  background: rgba(255,255,255,0.03);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: var(--txt3);
}

.product-body { padding: 0.8rem; flex: 1; display: flex; flex-direction: column; gap: 0.35rem; }
.product-name  { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.product-description {
  font-size: 0.8rem;
  line-height: 1.45;
  min-height: 2.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-price { font-size: 0.85rem; display: flex; align-items: center; gap: 0.3rem; }
.product-stock { font-size: 0.72rem; }
.product-details-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.product-details-description {
  white-space: pre-wrap;
  line-height: 1.65;
  color: rgba(255,255,255,0.86);
}
.product-actions { display: flex; align-items: center; gap: 0.45rem; margin-top: auto; padding-top: 0.45rem; }
.product-admin-actions {
  display: flex; gap: 0.3rem; padding-top: 0.35rem;
  border-top: 1px solid var(--border); margin-top: 0.35rem;
}

.qty-control {
  display: flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--r3); overflow: hidden;
}

.qty-btn {
  background: var(--bg); border: none; color: var(--txt);
  width: 26px; height: 26px; cursor: pointer; font-size: 1rem;
  transition: background var(--trans);
}
.qty-btn:hover { background: rgba(204,34,34,0.18); }

.qty-input {
  width: 32px; background: none; border: none;
  text-align: center; color: var(--txt); font-size: 0.8rem;
  padding: 0; outline: none; -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.points-guide { padding: 0.35rem 0; }
.points-guide li {
  padding: 0.42rem 0; border-bottom: 1px solid var(--border);
  font-size: 0.83rem; display: flex; align-items: center; gap: 0.7rem;
}
.points-guide li:last-child { border-bottom: none; }


/* ════════════════════════════════════════════════════════
   REQUESTS  (Demisii / Invoiri)
   ════════════════════════════════════════════════════════ */

.requests-grid { display: flex; flex-direction: column; gap: 0.65rem; }

.request-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r); padding: 0.9rem 1.1rem;
  display: flex; align-items: flex-start; gap: 0.75rem;
  transition: border-color var(--trans);
}

.request-card:hover { border-color: rgba(204,34,34,0.28); }
.request-card--clickable { cursor: pointer; }

.request-card-avatar img {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid rgba(204,34,34,0.3); object-fit: cover; flex-shrink: 0;
}

.request-card-body { flex: 1; min-width: 0; }
.request-card-name { font-size: 0.88rem; font-weight: 600; }
.request-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin-top: 3px; }
.request-card-reason { font-size: 0.78rem; line-height: 1.5; }
.request-card-link { font-size: 0.75rem; color: #d49a4a; }
.request-card-status { flex-shrink: 0; text-align: right; }
.request-card-actions { display: flex; gap: 0.35rem; justify-content: flex-end; margin-top: 0.35rem; }
.demisie-modal-meta {
  display: grid;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.82);
}
.demisie-modal-reason {
  white-space: pre-wrap;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
  max-height: 55vh;
  overflow-y: auto;
}


/* ════════════════════════════════════════════════════════
   ERROR PAGE
   ════════════════════════════════════════════════════════ */

.error-page {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 60vh; text-align: center; padding: 2rem;
}

.error-code  { font-family: 'Cinzel', serif; font-size: 6rem; font-weight: 900; line-height: 1; }
.error-title { font-size: 1.5rem; font-weight: 700; margin-top: 0.5rem; }


/* ════════════════════════════════════════════════════════
   LOADER / EMPTY STATE
   ════════════════════════════════════════════════════════ */

.loader-spin {
  width: 30px; height: 30px;
  border: 3px solid var(--border); border-top-color: var(--red);
  border-radius: 50%; animation: spin 0.75s linear infinite;
  margin: 2rem auto;
}

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

.empty-state {
  grid-column: 1 / -1; text-align: center;
  padding: 3rem 0; color: var(--txt3);
}
.empty-state i { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }
.empty-state p { font-size: 0.88rem; }


/* ════════════════════════════════════════════════════════
   UTILITY
   ════════════════════════════════════════════════════════ */

.text-red      { color: var(--red) !important; }
.text-gold     { color: var(--gold) !important; }
.text-silver   { color: #c0c0c0 !important; }
.text-bronze   { color: #cd7f32 !important; }
.text-green    { color: var(--green) !important; }
.text-muted    { color: var(--txt3) !important; }
.text-secondary{ color: var(--txt2) !important; }

.mt-1 { margin-top: 0.35rem; }
.mt-2 { margin-top: 0.75rem; }
.mt-3 { margin-top: 1.1rem; }
.mt-4 { margin-top: 1.6rem; }
.mb-2 { margin-bottom: 0.75rem; }
.mb-3 { margin-bottom: 1.1rem; }
.mb-4 { margin-bottom: 1.6rem; }
.ms-1 { margin-left: 0.35rem; }
.ms-2 { margin-left: 0.75rem; }
.p-3  { padding: 0.85rem; }
.gap-2 { gap: 0.5rem; }

.dash-section-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--txt3); border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }

.d-flex                  { display: flex; }
.align-items-center      { align-items: center; }
.justify-content-between { justify-content: space-between; }
.flex-wrap               { flex-wrap: wrap; }


/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  .sidebar {
    width: 225px;
    transform: translateX(-225px);
  }
  .sidebar.open { transform: translateX(0); }

  .main-area { margin-left: 0; }

  .topbar-hamburger { display: block; }

  .content-area { padding: 1rem; }

  .stat-cards { grid-template-columns: 1fr 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .week-selector { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .detail-stat-row { grid-template-columns: repeat(3,1fr); }

  .ls-prices { padding: 1.5rem 1rem 0; }
  .ls-prices-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 480px) {
  .stat-cards { grid-template-columns: 1fr; }
  .member-grid { grid-template-columns: 1fr; }
  .worker-grid { grid-template-columns: 1fr 1fr; }
  .ls-title { font-size: 2.8rem; }
}

/* ── Dashboard: staggered item entrance ─────────────────── */
.dash-item-enter {
  opacity: 0;
  animation: cardEnter 0.5s ease forwards;
}

.dash-item-enter:nth-child(1) { animation-delay: 0.04s; }
.dash-item-enter:nth-child(2) { animation-delay: 0.12s; }
.dash-item-enter:nth-child(3) { animation-delay: 0.20s; }
.dash-item-enter:nth-child(4) { animation-delay: 0.28s; }
.dash-item-enter:nth-child(5) { animation-delay: 0.36s; }

/* Istoric items hover */
.istoric-item {
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.istoric-item:hover {
  background: rgba(204,34,34,0.06);
  border-color: rgba(204,34,34,0.2);
  transform: translateX(4px);
}

/* ════════════════════════════════════════════════════════
   GOLDEN HOUR CARD
   ════════════════════════════════════════════════════════ */

.gh-status {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.8rem 1rem;
  border-radius: var(--r2);
  font-size: 0.88rem;
  margin-bottom: 0.75rem;
}
.gh-status--active {
  background: rgba(232,160,0,0.12);
  border: 1px solid rgba(232,160,0,0.35);
  color: var(--gold2);
}
.gh-status--active i { font-size: 1.2rem; color: var(--gold); }
.gh-status--inactive {
  background: var(--bg4);
  border: 1px solid var(--border);
  color: var(--txt3);
}
.gh-status--inactive i { font-size: 1.2rem; }
.gh-controls {
  display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;
}
.gh-controls input[type="number"] {
  width: 90px; padding: 0.4rem 0.6rem;
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: var(--r1); color: var(--txt1); font-size: 0.85rem;
}
.gh-controls input[type="number"]:focus {
  outline: none; border-color: var(--gold);
}
#gh-countdown {
  font-size: 0.85rem; color: var(--gold2);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════
   AMENZI PAGE
   ════════════════════════════════════════════════════════ */

.amenzi-form {
  display: flex; flex-direction: column; gap: 0.85rem;
}
.amenzi-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
}
@media (max-width: 480px) {
  .amenzi-form-row { grid-template-columns: 1fr; }
}