/* ============================================================
   EPAS CNME Buzău — design system
   Palette: Parliament Navy / EU Gold / Chamber Blue / Parchment
   Type: Fraunces (display) · IBM Plex Sans (body) · IBM Plex Mono (labels)
   Signature: legislative "dossier / article" motif + star-seal
   ============================================================ */

:root{
  --navy: #0c1230;
  --navy-2: #131a3d;
  --navy-3: #1b2350;
  --blue: #2347a3;
  --gold: #ffd100;
  --gold-dim: #caa22a;
  --paper: #f6f1e3;
  --paper-2: #efe7d2;
  --ink: #191c2e;
  --ink-soft: #4b4f66;
  --red: #c1443a;
  --white: #f7f7fb;
  --line: rgba(255, 209, 0, 0.22);

  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "IBM Plex Sans", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --container: 1180px;
  --radius: 4px;
  --ease: cubic-bezier(.22,.68,.32,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: opacity .2s ease;
}
body.page-leaving{ opacity: 0; }

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; font-weight: 600; }
p{ margin:0; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }

::selection{ background: var(--gold); color: var(--navy); }

:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- eyebrow / mono labels (letterhead motif) ---------- */
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before{
  content:"";
  width: 22px; height:1px;
  background: var(--gold-dim);
  flex: 0 0 auto;
}

/* ---------- star seal (signature element) ---------- */
.seal{
  --size: 84px;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  position: relative;
  border: 1px solid var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
}
.seal::before{
  content:"";
  position:absolute; inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(255,209,0,.35);
}
.seal-stars{
  position: relative;
  width: 44%; height: 44%;
}
.seal-stars span{
  position:absolute;
  top:50%; left:50%;
  width:5px; height:5px;
  margin:-2.5px 0 0 -2.5px;
  background: var(--gold);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  transform-origin: 2.5px 2.5px;
}

/* ---------- navbar ---------- */
.navbar{
  position: fixed; top:0; left:0; right:0;
  z-index: 100;
  padding: 20px 0;
  transition: background .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.navbar.is-scrolled{
  background: rgba(12,18,48,.86);
  backdrop-filter: blur(10px);
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap: 20px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.brand-mark{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 15px;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text b{ font-size:13px; letter-spacing:.05em; }
.brand-text span{ font-size:10px; color: rgba(247,247,251,.55); letter-spacing:.12em; }

.nav-links{
  display:flex; align-items:center; gap: 6px;
}
.nav-item{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  color: rgba(247,247,251,.72);
  transition: color .25s, background .25s;
}
.nav-item:hover{ color: var(--white); }
.nav-item.active{ color: var(--navy); background: var(--gold); }

.nav-toggle{
  display:none;
  width: 40px; height:40px;
  border:1px solid var(--line);
  border-radius: 50%;
  background:transparent;
  color: var(--gold);
  cursor:pointer;
  align-items:center; justify-content:center;
}

@media (max-width: 780px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position: fixed; inset: 0 0 0 auto;
    height: 100vh; width: min(78vw, 320px);
    background: var(--navy-2);
    border-left: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 30px 30px;
    gap: 4px;
    transform: translateX(100%);
    transition: transform .4s var(--ease);
  }
  .nav-links.is-open{ transform: translateX(0); }
  .nav-item{ width:100%; padding: 14px 6px; border-bottom: 1px solid rgba(255,255,255,.06); border-radius:0; }
  .nav-item.active{ background:none; color: var(--gold); }
}

/* ---------- hero ---------- */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:flex-end;
  overflow: hidden;
  padding-bottom: 100px;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video, .hero-media img{
  width:100%; height:100%; object-fit: cover;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,14,36,.55) 0%, rgba(10,14,36,.35) 30%, rgba(9,12,30,.94) 92%),
    linear-gradient(90deg, rgba(9,12,30,.5), rgba(9,12,30,.1) 45%);
}
.hero-content{ position:relative; z-index:1; max-width: 760px; }
.hero .eyebrow{ margin-bottom: 22px; }
.hero-title{
  font-size: clamp(2.4rem, 5.4vw, 4.1rem);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -.01em;
}
.hero-title em{ font-style: italic; color: var(--gold); font-weight: 500; }
.hero-text{
  margin-top: 22px;
  max-width: 560px;
  color: rgba(247,247,251,.82);
  font-size: 1.02rem;
}
.hero-actions{ display:flex; align-items:center; gap:22px; margin-top: 34px; flex-wrap: wrap; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 26px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid var(--gold);
  transition: transform .3s var(--ease), background .3s, color .3s;
}
.btn-solid{ background: var(--gold); color: var(--navy); }
.btn-solid:hover{ transform: translateY(-2px); background: #ffdb33; }
.btn-line{ color: var(--white); border-color: var(--line); }
.btn-line:hover{ border-color: var(--gold); color: var(--gold); }

.scroll-cue{
  position:absolute; right: 36px; bottom: 30px; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.2em;
  color: rgba(247,247,251,.6);
}
.scroll-cue .line{ width:1px; height:46px; background: linear-gradient(var(--gold), transparent); animation: pulse-line 2.2s ease-in-out infinite; }
@keyframes pulse-line{ 0%,100%{ opacity:.4 } 50%{ opacity:1 } }

@media (max-width: 780px){
  .hero{ padding-bottom: 70px; align-items: center; }
  .scroll-cue{ display:none; }
}

/* ---------- sections ---------- */
section{ position: relative; }
.section{ padding: 110px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap: 30px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.section-title{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-top: 14px; max-width: 620px; }
.section-note{ max-width: 340px; color: rgba(247,247,251,.62); font-size: .93rem; padding-bottom: 6px; }

.divider{
  height:1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform: none; }

/* ---------- dossier cards (activities) ---------- */
.dossier-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 980px){ .dossier-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .dossier-grid{ grid-template-columns: 1fr; } }

.dossier{
  display: block;
  background: var(--navy-2);
  border: 1px solid var(--line);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: transform .4s var(--ease), border-color .4s;
}
.dossier:hover{ transform: translateY(-6px); border-color: var(--gold-dim); }
.dossier-photo{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.dossier-photo img{
  width:100%; height:100%; object-fit: cover;
  transition: transform .7s var(--ease), filter .5s;
  filter: grayscale(35%) contrast(1.02);
}
.dossier:hover .dossier-photo img{ transform: scale(1.07); filter: grayscale(0%); }
.dossier-tag{
  position:absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing:.1em;
  background: rgba(12,18,48,.78);
  border: 1px solid var(--line);
  color: var(--gold);
  padding: 5px 10px;
}
.dossier-count{
  position:absolute; bottom: 14px; right: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: 10.5px;
  background: rgba(12,18,48,.78);
  border: 1px solid var(--line);
  padding: 5px 10px;
  color: rgba(247,247,251,.8);
}
.dossier-body{ padding: 20px 20px 24px; }
.dossier-body h3{ font-size: 1.18rem; line-height:1.28; }
.dossier-body p{
  margin-top: 10px;
  font-size: .87rem;
  color: rgba(247,247,251,.6);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden;
}
.dossier-open{
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.1em;
  color: var(--gold);
  display:flex; align-items:center; gap:8px;
}
.dossier-open svg{ transition: transform .3s var(--ease); }
.dossier:hover .dossier-open svg{ transform: translateX(4px); }

/* ---------- slide dossiers (external Google Slides) ---------- */
.dossier-slide .dossier-tag{ color: var(--white); border-color: rgba(255,255,255,.22); }
.dossier-slide .dossier-photo::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,18,48,0) 40%, rgba(12,18,48,.65) 100%);
}
.slide-badge{
  position:absolute; bottom: 14px; left: 14px; z-index:2;
  display:flex; align-items:center; gap:7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing:.08em;
  color: var(--navy); background: var(--gold);
  padding: 5px 10px 5px 8px;
}
.dossier-open.is-external svg{ transform: rotate(-45deg); }
.dossier:hover .dossier-open.is-external svg{ transform: rotate(-45deg) translate(3px,-3px); }

.slide-row-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  margin: 90px 0 30px; flex-wrap:wrap;
}
.slide-row-head h2{ font-size: 1.5rem; }
.slide-row-head p{ color: rgba(247,247,251,.6); font-size:.88rem; max-width:420px; }

/* ---------- lightbox ---------- */
.lightbox{
  position: fixed; inset:0; z-index: 300;
  background: rgba(8,11,26,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition: opacity .35s var(--ease);
  padding: 26px;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-inner{ max-width: 980px; width:100%; }
.lightbox-frame{ position:relative; }
.lightbox-frame img, .lightbox-frame video{
  width:100%; max-height: 62vh; object-fit: contain; background:#000;
  border: 1px solid var(--line);
}
.lightbox-caption{
  display:flex; justify-content:space-between; align-items:flex-start; gap: 20px;
  margin-top: 20px; flex-wrap: wrap;
}
.lightbox-caption h3{ font-size: 1.3rem; }
.lightbox-caption p{ color: rgba(247,247,251,.65); font-size: .92rem; margin-top: 8px; max-width: 560px; }
.lightbox-nav{ display:flex; gap:10px; }
.lightbox-btn{
  width: 42px; height:42px;
  border: 1px solid var(--line);
  background: transparent; color: var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius: 50%;
  transition: border-color .25s, color .25s;
}
.lightbox-btn:hover{ border-color: var(--gold); color: var(--gold); }
.lightbox-close{
  position:absolute; top: -20px; right: 0;
  transform: translateY(-100%);
}
.lightbox-index{
  font-family: var(--font-mono); font-size: 11.5px; color: rgba(247,247,251,.5);
  align-self:center;
}

/* ---------- parchment / article clause (despre) ---------- */
.parchment{
  background: var(--paper);
  color: var(--ink);
}
.clause-list{ display:flex; flex-direction:column; }
.clause{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid rgba(25,28,46,.12);
}
.clause:last-child{ border-bottom: 1px solid rgba(25,28,46,.12); }
.clause-num{
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing:.08em;
  color: var(--red);
  padding-top: 4px;
}
.clause-num span{ display:block; font-family: var(--font-display); font-size: 2.1rem; color: var(--ink); line-height: 1; margin-top: 6px; }
.clause h3{ font-size: 1.18rem; color: var(--ink); }
.clause p{ margin-top: 10px; color: var(--ink-soft); font-size: .95rem; max-width: 620px; }

@media (max-width: 640px){
  .clause{ grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- objectives grid ---------- */
.objectives{
  display:grid; grid-template-columns: repeat(2,1fr); gap:1px;
  background: rgba(25,28,46,.14);
  border: 1px solid rgba(25,28,46,.14);
  margin-top: 20px;
}
.objective{ background: var(--paper); padding: 26px 28px; }
.objective b{
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.1em;
  color: var(--red); display:block; margin-bottom: 10px;
}
.objective p{ color: var(--ink-soft); font-size: .93rem; }
@media (max-width: 700px){ .objectives{ grid-template-columns: 1fr; } }

/* ---------- team ---------- */
.team-head{ display:flex; align-items:center; gap:16px; margin: 6px 0 30px; }
.team-head h3{ font-size: 1.05rem; letter-spacing: .02em; color: rgba(247,247,251,.85); }
.team-head .count{ font-family: var(--font-mono); font-size: 12px; color: var(--gold); }

.team-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-bottom: 66px;
}
@media (max-width: 900px){ .team-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 620px){ .team-grid{ grid-template-columns: repeat(2,1fr); } }

.member{
  background: var(--navy-2);
  border: 1px solid var(--line);
  padding: 22px 16px;
  text-align:center;
  transition: border-color .3s, transform .3s var(--ease);
}
.member:hover{ border-color: var(--gold-dim); transform: translateY(-3px); }
.avatar{
  width: 56px; height:56px; margin: 0 auto 14px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--gold);
  background: radial-gradient(circle at 30% 25%, rgba(255,209,0,.13), transparent 70%);
}
.avatar.senior{ border-color: var(--gold); }
.member h4{ font-size: .92rem; font-weight: 500; line-height: 1.3; }
.member p{ margin-top: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing:.06em; color: rgba(247,247,251,.5); text-transform: uppercase; }

/* ---------- social ---------- */
.social-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
@media (max-width: 700px){ .social-grid{ grid-template-columns: 1fr; } }
.social-card{
  background: var(--navy-2);
  border: 1px solid var(--line);
  padding: 44px 34px;
  display:flex; flex-direction:column; gap: 20px;
  transition: border-color .3s, transform .3s var(--ease);
}
.social-card:hover{ border-color: var(--gold-dim); transform: translateY(-4px); }
.social-icon{
  width: 52px; height:52px; border-radius:50%;
  border: 1px solid var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  color: var(--gold);
}
.social-card h3{ font-size: 1.4rem; }
.social-card p{ color: rgba(247,247,251,.62); font-size: .93rem; }
.social-card .btn{ align-self:flex-start; margin-top: 6px; }

/* ---------- footer ---------- */
footer{
  border-top: 1px solid var(--line);
  padding: 46px 0;
}
.footer-inner{
  display:flex; justify-content:space-between; align-items:center; gap: 20px; flex-wrap:wrap;
}
.footer-inner p{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing:.04em; color: rgba(247,247,251,.5); }
.footer-links{ display:flex; gap:20px; }
.footer-links a{ font-family: var(--font-mono); font-size: 11.5px; color: rgba(247,247,251,.6); letter-spacing:.04em; }
.footer-links a:hover{ color: var(--gold); }

/* ---------- misc page hero (non-video) ---------- */
.page-hero{
  padding: 172px 0 80px;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(35,71,163,.35), transparent 60%),
    var(--navy);
  border-bottom: 1px solid var(--line);
}
.page-hero h1{ font-size: clamp(2.1rem, 4.4vw, 3.2rem); margin-top: 16px; max-width: 680px; }
.page-hero p{ margin-top: 18px; max-width: 560px; color: rgba(247,247,251,.7); }

.pillar-row{ display:flex; gap: 40px; margin-top: 44px; flex-wrap:wrap; }
.pillar{ font-family: var(--font-mono); }
.pillar b{ display:block; font-family: var(--font-display); font-size: 1.7rem; color: var(--gold); }
.pillar span{ font-size: 11px; letter-spacing:.06em; text-transform:uppercase; color: rgba(247,247,251,.55); }

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-body{ min-height:100vh; background: var(--navy); }

.admin-shell{ display:flex; min-height:100vh; }
.admin-side{
  width: 240px; flex: 0 0 auto;
  border-right: 1px solid var(--line);
  padding: 28px 20px;
  display:flex; flex-direction:column; gap: 6px;
}
.admin-main{ flex:1; padding: 40px 44px 100px; max-width: 980px; }
@media (max-width: 860px){
  .admin-shell{ flex-direction:column; }
  .admin-side{ width:100%; flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line); }
  .admin-main{ padding: 28px 20px 80px; }
}

.admin-tab{
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing:.05em;
  padding: 12px 14px; border-radius: 3px; color: rgba(247,247,251,.65);
  cursor:pointer; white-space: nowrap;
  border: 1px solid transparent;
  text-align: left;
}
.admin-tab:hover{ color: var(--white); }
.admin-tab.is-active{ background: var(--navy-2); border-color: var(--line); color: var(--gold); }

.admin-panel{ display:none; }
.admin-panel.is-active{ display:block; }

.admin-h1{ font-size: 1.7rem; margin-bottom: 6px; }
.admin-sub{ color: rgba(247,247,251,.55); font-size: .9rem; margin-bottom: 34px; }

.admin-card{
  background: var(--navy-2); border: 1px solid var(--line);
  padding: 24px; margin-bottom: 20px;
}
.admin-card h3{ font-size: 1rem; margin-bottom: 4px; }
.admin-card .meta{ font-family: var(--font-mono); font-size: 11px; color: rgba(247,247,251,.45); margin-bottom: 14px; }

.field{ margin-bottom: 16px; }
.field label{ display:block; font-family: var(--font-mono); font-size: 11px; letter-spacing:.05em; text-transform:uppercase; color: rgba(247,247,251,.6); margin-bottom: 7px; }
.field input[type="text"], .field input[type="number"], .field input[type="email"],
.field input[type="password"], .field input[type="url"], .field textarea, .field select{
  width:100%; background: var(--navy); border: 1px solid var(--line); color: var(--white);
  padding: 11px 13px; font-family: var(--font-body); font-size: .93rem; border-radius: 2px;
}
.field textarea{ min-height: 84px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color: var(--gold-dim); }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width:640px){ .field-row{ grid-template-columns: 1fr; } }

.btn-admin{
  font-family: var(--font-mono); font-size: 12px; letter-spacing:.05em;
  padding: 10px 18px; border-radius: 2px; cursor:pointer; border: 1px solid var(--gold);
  background: var(--gold); color: var(--navy);
}
.btn-admin:hover{ background:#ffdb33; }
.btn-admin.ghost{ background:transparent; color: var(--white); border-color: var(--line); }
.btn-admin.ghost:hover{ border-color: var(--gold); color: var(--gold); }
.btn-admin.danger{ background:transparent; color: var(--red); border-color: rgba(193,68,58,.5); }
.btn-admin.danger:hover{ background: rgba(193,68,58,.12); }
.btn-admin:disabled{ opacity:.5; cursor:default; }

.admin-row-actions{ display:flex; gap:10px; margin-top: 14px; flex-wrap:wrap; }

.repeat-block{ border: 1px solid var(--line); padding: 16px; margin-bottom: 12px; position:relative; }
.repeat-remove{ position:absolute; top:10px; right:10px; }

.admin-login{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding: 24px;
}
.admin-login-box{ width: 100%; max-width: 380px; }
.admin-login-box .brand{ margin-bottom: 30px; justify-content:center; }

.thumb-row{ display:flex; gap:10px; flex-wrap:wrap; margin: 14px 0; }
.thumb{ position:relative; width:84px; height:84px; border:1px solid var(--line); overflow:hidden; }
.thumb img, .thumb video{ width:100%; height:100%; object-fit:cover; }
.thumb button{
  position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%;
  background: rgba(8,11,26,.85); color:var(--white); border:none; cursor:pointer; font-size:11px; line-height:1;
}

table.admin-table{ width:100%; border-collapse: collapse; font-size: .88rem; }
table.admin-table th{ text-align:left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing:.06em; text-transform:uppercase; color: rgba(247,247,251,.5); padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.admin-table td{ padding: 12px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; }
table.admin-table tr:hover td{ background: rgba(255,255,255,.02); }

.status-pill{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing:.04em; padding: 4px 9px; border-radius: 999px; display:inline-block; }
.status-pill.in_asteptare{ background: rgba(255,209,0,.14); color: var(--gold); }
.status-pill.acceptat{ background: rgba(70,180,110,.16); color: #6fd39a; }
.status-pill.respins{ background: rgba(193,68,58,.16); color: #e78d84; }

.toast{
  position: fixed; bottom: 24px; right: 24px; z-index: 400;
  background: var(--navy-2); border: 1px solid var(--gold-dim); color: var(--white);
  padding: 13px 20px; font-family: var(--font-mono); font-size: 12.5px;
  transform: translateY(140%); transition: transform .35s var(--ease);
}
.toast.is-visible{ transform: translateY(0); }
.toast.is-error{ border-color: var(--red); }

/* ---------- grid state UE (interactiv, pagina Despre) ---------- */
.eu-fact-panel{
  background: var(--navy-2); border: 1px solid var(--gold-dim);
  padding: 22px 26px; margin-bottom: 22px;
  display:flex; align-items:center; gap: 18px; flex-wrap:wrap;
  min-height: 74px;
}
.eu-fact-flag{ font-size: 2.4rem; line-height:1; }
.eu-fact-text b{ font-family: var(--font-display); font-size: 1.05rem; color: var(--gold); display:block; margin-bottom: 3px; }
.eu-fact-text span{ font-size: .87rem; color: rgba(247,247,251,.68); }
.eu-fact-placeholder{ color: rgba(247,247,251,.5); font-size: .9rem; }

.eu-grid{
  display:grid; grid-template-columns: repeat(9, 1fr); gap: 8px;
}
@media (max-width: 900px){ .eu-grid{ grid-template-columns: repeat(6,1fr); } }
@media (max-width: 560px){ .eu-grid{ grid-template-columns: repeat(4,1fr); } }
.eu-flag-btn{
  background: var(--navy-2); border: 1px solid var(--line);
  aspect-ratio: 1; display:flex; align-items:center; justify-content:center;
  font-size: 1.5rem; cursor:pointer; transition: transform .2s var(--ease), border-color .2s;
}
.eu-flag-btn:hover, .eu-flag-btn.is-active{ transform: translateY(-3px); border-color: var(--gold); }

/* ---------- pagina Jocuri ---------- */
.game-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 40px; }
.game-tab{
  font-family: var(--font-mono); font-size: 12px; letter-spacing:.05em;
  padding: 11px 20px; border-radius: 999px; cursor:pointer;
  background: transparent; border: 1px solid var(--line); color: rgba(247,247,251,.65);
}
.game-tab:hover{ border-color: var(--gold-dim); color: var(--white); }
.game-tab.is-active{ background: var(--gold); color: var(--navy); border-color: var(--gold); }
.game-panel{ display:none; }
.game-panel.is-active{ display:block; }

.game-card{ background: var(--navy-2); border: 1px solid var(--line); padding: 34px; }
.game-score{ font-family: var(--font-mono); font-size: 12px; color: rgba(247,247,251,.6); margin-bottom: 20px; letter-spacing:.05em; }
.game-score b{ color: var(--gold); }

.quiz-question{ font-size: 1.2rem; margin-bottom: 22px; font-family: var(--font-display); }
.quiz-options{ display:grid; gap: 10px; }
.quiz-option{
  text-align:left; padding: 14px 18px; background: var(--navy); border: 1px solid var(--line);
  color: var(--white); cursor:pointer; font-family: var(--font-body); font-size: .95rem;
}
.quiz-option:hover{ border-color: var(--gold-dim); }
.quiz-option.is-correct{ border-color: #6fd39a; background: rgba(70,180,110,.12); color:#6fd39a; }
.quiz-option.is-wrong{ border-color: var(--red); background: rgba(193,68,58,.12); color:#e78d84; }
.quiz-option:disabled{ cursor:default; }
.quiz-explain{ margin-top:18px; padding:14px 18px; background: var(--navy); border-left:2px solid var(--gold); font-size:.88rem; color: rgba(247,247,251,.75); }
.quiz-next{ margin-top: 22px; }
.quiz-final{ text-align:center; padding: 20px 0; }
.quiz-final .big{ font-family: var(--font-display); font-size: 3rem; color: var(--gold); }

.wheel-wrap{ display:flex; flex-direction:column; align-items:center; gap: 26px; }
.wheel-pointer{ font-size: 1.6rem; color: var(--gold); margin-bottom:-14px; z-index:2; }
.wheel{
  width: 280px; height: 280px; border-radius: 50%;
  border: 5px solid var(--gold-dim);
  transition: transform 4s cubic-bezier(.15,.65,.15,1);
}
.wheel-result{ min-height: 60px; text-align:center; max-width: 460px; font-size: .95rem; color: rgba(247,247,251,.8); }
.wheel-result b{ display:block; color: var(--gold); font-family:var(--font-display); font-size:1.1rem; margin-bottom:6px; }

.guess-flag{ font-size: 5rem; text-align:center; margin-bottom: 30px; }
.guess-options{ display:grid; grid-template-columns:1fr 1fr; gap: 12px; max-width: 440px; margin: 0 auto; }
@media (max-width:520px){ .guess-options{ grid-template-columns:1fr; } }

.memory-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 460px; margin: 0 auto; }
@media (max-width:520px){ .memory-grid{ grid-template-columns: repeat(4,1fr); gap:7px; } }
.memory-card{
  aspect-ratio: 1; background: var(--navy); border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size: 1.8rem;
  cursor:pointer; user-select:none;
}
.memory-card.is-flipped, .memory-card.is-matched{ background: var(--navy-2); border-color: var(--gold-dim); }
.memory-card.is-hidden-face{ color: transparent; }
.memory-card.is-hidden-face::after{ content:"?"; color: var(--gold-dim); font-family: var(--font-mono); }

.admin-empty{ color: rgba(247,247,251,.45); font-size: .9rem; padding: 20px 0; }
.config-warning{
  background: rgba(193,68,58,.12); border: 1px solid rgba(193,68,58,.4);
  color: #e78d84; padding: 16px 20px; font-size: .88rem; margin-bottom: 26px;
}

.stats-cards-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:30px; }
@media (max-width:700px){ .stats-cards-grid{ grid-template-columns:repeat(2,1fr); } }
.stat-card{ background: var(--navy-2); border:1px solid var(--line); padding:22px; }
.stat-card b{ display:block; font-family:var(--font-display); font-size:2rem; color:var(--gold); }
.stat-card span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:rgba(247,247,251,.55); }
.chart-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; height:100%; }
.chart-bar{ width:100%; background: var(--gold); min-height:3px; transition: height .5s var(--ease); }
.chart-bar-label{ font-family:var(--font-mono); font-size:10px; color:rgba(247,247,251,.55); }