*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --green:  #00ff87;
  --green2: #00c853;
  --bg:     #080808;
  --bg2:    #0f0f0f;
  --bg3:    #161616;
  --bg4:    #1c1c1c;
  --border: rgba(255,255,255,0.07);
  --text:   #e2e2e2;
  --muted:  #555;
  --muted2: #888;
  --card:   #111111;
  --r:      12px;
}

body { background:var(--bg); color:var(--text); font-family:'Segoe UI',system-ui,Arial,sans-serif; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; }

/* HEADER */
header { background:var(--bg2); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.header-inner { max-width:1200px; margin:0 auto; padding:0 24px; height:60px; display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:10px; font-size:1.35rem; font-weight:900; letter-spacing:-0.5px; }
.logo span { color:var(--green); }
.logo-ball { display:inline-block; animation:spin 10s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
nav { display:flex; gap:2px; }
nav a { padding:7px 14px; border-radius:8px; font-size:0.84rem; font-weight:600; color:var(--muted2); transition:all .15s; }
nav a:hover { background:rgba(255,255,255,.05); color:#fff; }
nav a.active { background:rgba(0,255,135,.1); color:var(--green); }

/* TICKER */
.breaking { background:var(--green); color:#000; font-size:0.75rem; font-weight:700; padding:7px 0; overflow:hidden; display:flex; align-items:center; }
.breaking-label { background:#000; color:var(--green); padding:2px 14px; font-size:0.68rem; letter-spacing:2px; white-space:nowrap; flex-shrink:0; margin-right:16px; }
.ticker-wrap { overflow:hidden; flex:1; }
.ticker-text { display:inline-block; white-space:nowrap; animation:ticker 40s linear infinite; padding-right:80px; }
@keyframes ticker { from{transform:translateX(100vw)} to{transform:translateX(-100%)} }

/* PAGE GRID */
.page { max-width:1200px; margin:0 auto; padding:28px 24px 60px; display:grid; grid-template-columns:1fr 300px; gap:28px; }
@media(max-width:860px){ .page{grid-template-columns:1fr; padding:20px 16px;} }

/* HERO CARD */
.hero-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-bottom:20px; transition:border-color .2s; }
.hero-card:hover { border-color:rgba(0,255,135,.2); }

.hero-matchup {
  background:linear-gradient(160deg, #0b1a0f 0%, #090915 100%);
  padding:28px 24px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
}
.hero-team { display:flex; flex-direction:column; align-items:center; gap:10px; }
.hero-team img { width:72px; height:72px; object-fit:contain; filter:drop-shadow(0 4px 16px rgba(0,0,0,.7)); }
.hero-team-name { font-size:0.9rem; font-weight:800; text-align:center; color:#fff; }
.hero-center { text-align:center; }
.hero-vs { font-size:1.6rem; font-weight:900; color:var(--green); line-height:1; }
.hero-time { font-size:0.7rem; color:var(--muted); margin-top:5px; }

.hero-body { padding:20px 24px 24px; }
.hero-cat { display:inline-block; background:rgba(0,255,135,.1); color:var(--green); font-size:0.67rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:3px 10px; border-radius:100px; margin-bottom:10px; }
.hero-body h2 { font-size:1.3rem; font-weight:900; line-height:1.25; letter-spacing:-0.3px; color:#fff; margin-bottom:8px; }
.hero-body .excerpt { font-size:0.87rem; color:var(--muted2); line-height:1.5; margin-bottom:14px; }
.byline { display:flex; align-items:center; gap:10px; }
.byline-ava { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--green2),#0055cc); display:flex; align-items:center; justify-content:center; font-size:0.85rem; flex-shrink:0; }
.byline-name { font-size:0.79rem; font-weight:700; color:var(--green); }
.byline-meta { font-size:0.71rem; color:var(--muted); }

/* ARTICLE GRID */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:560px){ .grid-2{grid-template-columns:1fr;} }

.art-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, transform .2s; }
.art-card:hover { border-color:rgba(0,255,135,.22); transform:translateY(-2px); }

.card-matchup {
  background:linear-gradient(135deg, #0c180e, #0d0d18);
  padding:12px 14px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
}
.card-team { display:flex; flex-direction:column; align-items:center; gap:6px; }
.card-team img { width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.card-team-name { font-size:0.68rem; font-weight:700; color:#ccc; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:90px; }
.card-vs { font-size:0.7rem; font-weight:900; color:var(--green); text-align:center; }

.card-body { padding:12px 14px; flex:1; display:flex; flex-direction:column; }
.card-cat { font-size:0.63rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--green); margin-bottom:6px; }
.card-title { font-size:0.86rem; font-weight:700; line-height:1.35; color:#ddd; flex:1; margin-bottom:10px; }
.card-foot { display:flex; justify-content:space-between; font-size:0.7rem; color:var(--muted); border-top:1px solid var(--border); padding-top:9px; margin-top:auto; }

/* SIDEBAR */
.sb-block { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:18px; margin-bottom:18px; }
.sb-title { font-size:0.63rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border); }

.sb-match { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.sb-match:last-child { border-bottom:none; padding-bottom:0; }
.sb-badges { display:flex; align-items:center; gap:3px; flex-shrink:0; }
.sb-badges img { width:18px; height:18px; object-fit:contain; }
.sb-match-info { flex:1; min-width:0; }
.sb-match-teams { font-size:0.77rem; font-weight:600; color:#ccc; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-match-comp { font-size:0.67rem; color:var(--muted); }
.sb-match-time { font-size:0.72rem; font-weight:700; color:var(--green); flex-shrink:0; }

.sb-team-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sb-team-card { background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:10px; text-align:center; }
.sb-team-emoji { font-size:1.4rem; margin-bottom:5px; }
.sb-team-name { font-size:0.74rem; font-weight:700; }
.sb-team-role { font-size:0.62rem; color:var(--muted); margin-top:2px; }

/* ARTICLE PAGE */
.article-page { max-width:1200px; margin:0 auto; padding:28px 24px 60px; display:grid; grid-template-columns:1fr 300px; gap:28px; }
@media(max-width:860px){ .article-page{grid-template-columns:1fr;} }

.art-cat { display:inline-block; background:rgba(0,255,135,.1); color:var(--green); font-size:0.67rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:3px 10px; border-radius:100px; margin-bottom:14px; }
.article-content h1 { font-size:clamp(1.45rem,3.5vw,2.1rem); font-weight:900; line-height:1.2; letter-spacing:-0.4px; color:#fff; margin-bottom:14px; }
.art-meta { display:flex; flex-wrap:wrap; gap:14px; font-size:0.77rem; color:var(--muted2); padding-bottom:18px; border-bottom:1px solid var(--border); margin-bottom:22px; }

.art-matchup {
  background:linear-gradient(160deg,#0b1a0f,#090915);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:24px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  margin-bottom:22px;
}
.art-team { display:flex; flex-direction:column; align-items:center; gap:10px; }
.art-team img { width:80px; height:80px; object-fit:contain; filter:drop-shadow(0 6px 20px rgba(0,0,0,.7)); }
.art-team-name { font-size:1rem; font-weight:800; text-align:center; color:#fff; }
.art-center { text-align:center; }
.art-vs { font-size:1.8rem; font-weight:900; color:var(--green); line-height:1; }
.art-time { font-size:0.73rem; color:var(--muted); margin-top:6px; }

.stats-box { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-bottom:22px; }
.stat-row { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border-bottom:1px solid var(--border); font-size:0.84rem; }
.stat-row:last-child { border-bottom:none; }
.stat-row span:first-child { color:var(--muted2); }
.stat-row span:last-child { font-weight:600; color:#ddd; }

.art-body { font-size:0.95rem; line-height:1.8; color:#c5c5c5; }
.art-body p { margin-bottom:16px; }

.player-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); padding:16px 20px; display:flex; align-items:flex-end; gap:16px; margin:20px 0; overflow:hidden; }
.player-card img { height:100px; width:auto; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 4px 12px rgba(0,0,0,.6)); }
.player-name { font-size:1rem; font-weight:800; color:#fff; }
.player-pos { font-size:0.74rem; color:var(--muted2); margin-top:3px; }
.player-desc { font-size:0.81rem; color:var(--muted2); margin-top:8px; line-height:1.45; }

.art-signature { display:flex; align-items:center; gap:14px; padding:18px 0; border-top:1px solid var(--border); margin-top:28px; }
.sig-ava { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--green2),#0055cc); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.sig-name { font-weight:800; color:var(--green); font-size:0.91rem; }
.sig-role { font-size:0.74rem; color:var(--muted); margin-top:2px; }

.disclaimer { font-size:0.73rem; color:#2e2e2e; padding:12px 16px; background:var(--bg3); border-radius:8px; margin-top:16px; }

/* FOOTER */
footer { background:var(--bg2); border-top:1px solid var(--border); padding:28px 24px; margin-top:40px; }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-logo { font-size:1.1rem; font-weight:900; }
.footer-logo span { color:var(--green); }
.footer-links { display:flex; gap:20px; }
.footer-links a { font-size:0.8rem; color:var(--muted); transition:color .15s; }
.footer-links a:hover { color:var(--green); }
.footer-copy { font-size:0.72rem; color:#222; }

/* ===== TAGS & CATEGORIES ===== */
.tags { display:flex; flex-wrap:wrap; gap:6px; margin:16px 0; }
.tag {
  background:var(--bg3); border:1px solid var(--border);
  color:var(--muted2); font-size:0.68rem; font-weight:600;
  padding:3px 10px; border-radius:100px; letter-spacing:0.5px;
  transition:all .15s;
}
.tag:hover { border-color:rgba(0,255,135,.3); color:var(--green); }
.tag.cat-stiri    { border-color:rgba(59,130,246,.3); color:#60a5fa; }
.tag.cat-analiza  { border-color:rgba(168,85,247,.3); color:#c084fc; }
.tag.cat-predictie{ border-color:rgba(245,158,11,.3); color:#fbbf24; }
.tag.cat-liga1    { border-color:rgba(220,38,38,.3);  color:#f87171; }
.tag.cat-transfer { border-color:rgba(34,197,94,.3);  color:#4ade80; }
.tag.cat-tactica  { border-color:rgba(20,184,166,.3); color:#2dd4bf; }

/* ===== FORM BAR ===== */
.form-section { margin-bottom:22px; }
.form-title { font-size:0.68rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.form-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.form-team-name { font-size:0.8rem; font-weight:600; color:#ccc; width:130px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.form-dots { display:flex; gap:4px; }
.form-dot {
  width:28px; height:28px; border-radius:6px;
  font-size:0.72rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
}
.form-dot.W { background:rgba(0,200,83,.2); color:#00c853; border:1px solid rgba(0,200,83,.3); }
.form-dot.D { background:rgba(255,193,7,.1); color:#ffc107; border:1px solid rgba(255,193,7,.2); }
.form-dot.L { background:rgba(220,38,38,.15); color:#f87171; border:1px solid rgba(220,38,38,.25); }
.form-dot.\? { background:var(--bg4); color:var(--muted); border:1px solid var(--border); }
.form-matches { margin-top:6px; }
.form-match-row { display:flex; justify-content:space-between; align-items:center; padding:5px 8px; border-radius:6px; font-size:0.76rem; }
.form-match-row:nth-child(odd) { background:var(--bg3); }
.form-match-score { font-weight:700; color:#ddd; }
.form-match-result { font-size:0.7rem; font-weight:800; padding:1px 6px; border-radius:4px; }
.form-match-result.W { background:rgba(0,200,83,.15); color:#00c853; }
.form-match-result.D { background:rgba(255,193,7,.1); color:#ffc107; }
.form-match-result.L { background:rgba(220,38,38,.12); color:#f87171; }

/* ===== TABLE IN ARTICOL ===== */
.mini-table { width:100%; border-collapse:collapse; font-size:0.78rem; margin-bottom:22px; }
.mini-table th { text-align:left; padding:6px 8px; font-size:0.65rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); }
.mini-table td { padding:7px 8px; border-bottom:1px solid rgba(255,255,255,.04); color:#ccc; }
.mini-table tr:last-child td { border-bottom:none; }
.mini-table .highlight td { color:#fff; font-weight:700; }
.mini-table .highlight td:first-child { color:var(--green); }
.mini-table td.pts { font-weight:800; color:#fff; }
.table-pos { font-size:0.72rem; color:var(--muted); width:20px; }

/* ===== MOBILE ===== */
@media (max-width:640px) {
  .header-inner { padding:0 16px; }
  nav a { padding:6px 10px; font-size:0.78rem; }
  .logo { font-size:1.15rem; }
  .page, .article-page { padding:16px 14px 40px; gap:20px; }
  .hero-matchup { padding:20px 16px; }
  .hero-team img { width:56px; height:56px; }
  .hero-team-name { font-size:0.78rem; }
  .hero-vs { font-size:1.3rem; }
  .hero-body { padding:16px 16px 20px; }
  .hero-body h2 { font-size:1.1rem; }
  .grid-2 { grid-template-columns:1fr; }
  .art-matchup { padding:18px 16px; gap:12px; }
  .art-team img { width:60px; height:60px; }
  .art-team-name { font-size:0.85rem; }
  .art-vs { font-size:1.5rem; }
  .player-card { flex-direction:column; align-items:flex-start; gap:12px; }
  .player-card img { height:80px; }
  .form-team-name { width:100px; font-size:0.74rem; }
  .form-dot { width:24px; height:24px; font-size:0.65rem; }
  .stats-box .stat-row { font-size:0.78rem; }
  footer .footer-inner { flex-direction:column; align-items:flex-start; gap:12px; }
  .footer-links { gap:14px; }
  .article-content h1 { font-size:1.3rem; }
  .sb-block { padding:14px; }
}

@media (max-width:380px) {
  nav a span { display:none; }
  .hero-team img { width:44px; height:44px; }
  .form-dot { width:22px; height:22px; }
}