/* ═══════════════════════════════════════
   GoEcho — Global Stylesheet
   ═══════════════════════════════════════ */

:root{
  --bg:#5B4E7A;
  --card:#3A3840;
  --card2:#423F4A;
  --white:#FFFFFF;
  --white2:rgba(255,255,255,.88);
  --white3:rgba(255,255,255,.55);
  --purple:#8B5CF6;
  --pl:#C4B5FD;
  --pl-bg:rgba(139,92,246,.15);
  --pl-border:rgba(196,181,253,.28);
  --border:rgba(255,255,255,.12);
  --beige:#EDE8DF;
}

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

html,body{
  min-height:100%;
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--white);
  line-height:1.5;
}

/* ── TYPOGRAPHIE ── */
h1,h2,h3,.syne{font-family:'Syne',sans-serif}

/* ── CARDS ── */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px;
}
.card-sm{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px;
}
.card-purple{
  background:var(--pl-bg);
  border:1px solid var(--pl-border);
  border-radius:20px;
  padding:24px;
}

/* ── BOUTONS ── */
.btn-primary{
  padding:12px 26px;
  background:linear-gradient(135deg,var(--purple),var(--pl));
  border:none;border-radius:30px;
  font-family:'Syne',sans-serif;font-size:14px;font-weight:700;
  color:var(--bg);cursor:pointer;transition:all .2s;
  box-shadow:0 4px 18px rgba(139,92,246,.35);
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
}
.btn-primary:hover{opacity:.9;transform:translateY(-1px)}

.btn-secondary{
  padding:10px 20px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  border-radius:20px;font-size:13px;font-weight:600;
  color:var(--white2);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
  transition:all .2s;cursor:pointer;
  font-family:'DM Sans',sans-serif;
}
.btn-secondary:hover{background:rgba(255,255,255,.14)}

.btn-purple{
  padding:10px 20px;
  background:var(--pl-bg);border:1px solid var(--pl-border);
  border-radius:20px;font-size:13px;font-weight:600;
  color:var(--pl);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
  transition:all .2s;cursor:pointer;
  font-family:'DM Sans',sans-serif;
}
.btn-purple:hover{background:rgba(139,92,246,.25)}

.btn-danger{
  padding:8px 16px;background:transparent;
  border:1px solid rgba(239,68,68,.25);border-radius:8px;
  font-size:12px;color:rgba(248,113,113,.7);cursor:pointer;transition:all .2s;
}
.btn-danger:hover{background:rgba(239,68,68,.08);color:#F87171}

/* ── CHIPS / BADGES ── */
.chip{
  font-size:12px;padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid var(--border);
  color:var(--white2);
}
.chip-purple{
  font-size:12px;padding:5px 12px;border-radius:999px;
  background:var(--pl-bg);border:1px solid var(--pl-border);
  color:var(--pl);font-weight:600;
}

/* ── INPUTS ── */
.input{
  width:100%;background:rgba(255,255,255,.07);
  border:1px solid var(--border);border-radius:10px;
  color:var(--white);font-family:'DM Sans',sans-serif;
  font-size:15px;padding:12px 16px;transition:border-color .2s;
}
.input:focus{outline:none;border-color:var(--pl-border)}
.input::placeholder{color:var(--white3)}

.label{
  font-size:13px;font-weight:600;color:var(--white2);
  margin-bottom:8px;display:block;
}

/* ── SECTION TITLE ── */
.section-title{
  font-family:'Syne',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--pl);margin-bottom:18px;
}

/* ── AVATAR ── */
.av{
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-weight:800;color:var(--white);
  flex-shrink:0;overflow:hidden;
}
.av img{width:100%;height:100%;object-fit:cover}
.av-sm{width:36px;height:36px;font-size:14px}
.av-md{width:46px;height:46px;font-size:18px}
.av-lg{width:80px;height:80px;font-size:28px}

/* ── FEED ITEMS ── */
.feed-item{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;margin-bottom:10px;transition:all .2s;
}
.feed-item:hover{border-color:var(--pl-border);background:var(--card2)}
.feed-item.type-match{border-left:3px solid var(--purple)}
.feed-item.type-message{border-left:3px solid #93C5FD}
.feed-item.type-analyse{border-left:3px solid #6EE7B7}
.feed-item.type-request{border-left:3px solid #FCD34D}
.feed-item.type-tip{border-left:3px solid var(--pl-border)}

.feed-body{flex:1;min-width:0}
.feed-text{font-size:14px;color:var(--white);margin-bottom:4px;line-height:1.45}
.feed-text strong{font-weight:700;color:var(--white)}
.feed-time{font-size:11px;color:var(--white3)}
.feed-action{
  padding:6px 13px;background:var(--pl-bg);border:1px solid var(--pl-border);
  border-radius:8px;font-size:11px;font-weight:700;color:var(--pl);
  text-decoration:none;white-space:nowrap;
}

/* ── MATCH CARDS ── */
.match-card{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;background:var(--card);border:1px solid var(--border);
  border-radius:14px;margin-bottom:8px;text-decoration:none;color:var(--white);transition:all .2s;
}
.match-card:hover{border-color:var(--pl-border);transform:translateY(-1px)}
.match-name{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;color:var(--white);margin-bottom:3px}
.match-score{font-family:'Syne',sans-serif;font-size:20px;font-weight:700;color:var(--pl);letter-spacing:-1px;line-height:1}
.match-score-lbl{font-size:9px;color:var(--white3);text-transform:uppercase;letter-spacing:.5px}

/* ── PLAYER ── */
.player-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;background:rgba(255,255,255,.06);
  border:1px solid var(--border);border-radius:12px;margin-bottom:8px;transition:all .2s;
}
.player-row.playing{border-color:var(--pl-border);background:var(--pl-bg)}
.player-btn{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid var(--border);
  color:var(--white);font-size:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;
}
.player-btn:hover{background:rgba(255,255,255,.18)}
.player-btn.playing{background:var(--purple);border-color:var(--purple)}
.player-title{font-size:14px;font-weight:500;color:var(--white);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-bar-bg{height:4px;border-radius:4px;background:rgba(255,255,255,.1);cursor:pointer;overflow:hidden}
.player-bar-fill{height:100%;border-radius:4px;background:var(--purple);transition:width .1s linear}
.player-dur{font-size:12px;color:var(--white3);flex-shrink:0;width:36px;text-align:right}

/* ── GROUP LABEL (feed) ── */
.group-lbl{
  font-size:10px;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--white3);font-weight:700;margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
.group-lbl::after{content:'';flex:1;height:1px;background:var(--border)}
.group{margin-bottom:22px}

/* ── FILTRE BUTTONS ── */
.filter-btn{
  padding:7px 14px;border:1px solid var(--border);border-radius:20px;
  font-size:12px;color:var(--white3);background:transparent;
  cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;
  display:flex;align-items:center;gap:5px;white-space:nowrap;
}
.filter-btn:hover{border-color:var(--pl-border);color:var(--white)}
.filter-btn.active{background:var(--pl-bg);border-color:var(--pl-border);color:var(--pl);font-weight:600}
.filters-bar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.filter-sep{width:1px;height:20px;background:var(--border);margin:0 4px}

/* ── STATUS SECTION ── */
.status-section{margin-bottom:28px}
.status-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.status-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px}
.status-title{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--white)}
.status-count{font-size:12px;color:var(--white3)}

/* ── PAGE TITLE ── */
.page-title{font-family:'Syne',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.4px;margin-bottom:6px;color:var(--white)}
.page-sub{font-size:13px;color:var(--white3);margin-bottom:24px}

/* ── RESPONSIVE ── */
@media(max-width:640px){
  .hide-mobile{display:none}
}