:root{
  --glass: rgba(0,0,0,.42);
  --border: rgba(255,255,255,.14);
  --txt: #fff;
  --muted: rgba(255,255,255,.72);
  --accent: #3A7C6C;
  --accent2: #5aa892;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--txt);
  font-family: "Segoe UI",system-ui,-apple-system,Arial;
  min-height:100vh;
  background: #0b1220;
  background-image: var(--bg);
  background-size: cover;
  background-position:center;
  background-attachment: fixed;
}
a{color:#fff; text-decoration:none}
.container{width:min(1100px,92vw); margin:0 auto; padding:18px 0 32px}
.card{
  background:var(--glass);
  backdrop-filter: blur(18px);
  border:1px solid var(--border);
  border-radius:26px;
  padding:18px;
}
h1{margin:0 0 10px 0; font-size:34px; letter-spacing:.3px}
p{color:var(--muted); margin:6px 0}
hr{border:none;border-top:1px solid rgba(255,255,255,.12); margin:14px 0}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:20px;
  background: var(--accent); color:#fff; border:1px solid rgba(255,255,255,.12);
  cursor:pointer; font-weight:700; transition:.15s transform, .15s background;
}
.btn:hover{transform:scale(1.02); background:var(--accent2)}
.btn.ghost{background:transparent}
.btn.soft{background:rgba(255,255,255,.10)}
.grid{display:grid; gap:12px}
.g2{grid-template-columns: repeat(2, minmax(0,1fr))}
.g3{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width: 900px){
  .g2,.g3{grid-template-columns:1fr}
}

label{display:block; font-size:13px; color:rgba(255,255,255,.85); margin:0 0 6px}
input,select,textarea{
  width:100%; padding:10px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.35);
  color:#fff; outline:none;
}
textarea{min-height:92px; resize:vertical}
.small{font-size:12px; color:rgba(255,255,255,.72)}

.topbar{
  position:sticky; top:0; z-index:20;
  background: rgba(0,0,0,.50);
  backdrop-filter: blur(16px);
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
}
.brand{font-weight:900; letter-spacing:.6px}
.nav{display:flex; gap:8px; flex-wrap:wrap}
.navbtn{
  display:inline-flex; padding:8px 12px; border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  font-weight:700;
}
.navbtn:hover{background:rgba(255,255,255,.10)}
.who{margin-left:auto; color:rgba(255,255,255,.75); font-size:12px}
.logout{margin:0}

.ticker{
  overflow:hidden; white-space:nowrap;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:10px 12px;
  background:rgba(0,0,0,.35);
}
.ticker span{
  display:inline-block;
  padding-right:40px;
  animation: scroll 18s linear infinite;
}
@keyframes scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Messagerie */
.chatWrap{
  height: calc(100vh - 86px);
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:12px;
}
@media (max-width: 900px){
  .chatWrap{grid-template-columns:1fr; height:auto}
}
.sidebar{
  display:flex; flex-direction:column; overflow:hidden;
}
.sideHead{display:flex; gap:8px}
.threadList{margin-top:10px; overflow:auto; padding-right:6px}
.thread{
  padding:10px 12px; border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  cursor:pointer; margin-bottom:8px;
}
.thread:hover{background:rgba(255,255,255,.10)}
.thread b{display:block}
.thread .t{font-size:12px; color:rgba(255,255,255,.72)}

.chatMain{
  display:flex; flex-direction:column; overflow:hidden;
}
.chatHead{
  display:flex; align-items:center; justify-content:space-between;
}
.msgs{
  margin-top:10px;
  flex:1; overflow:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.28);
  padding:12px;
}
.bubble{
  max-width:72%;
  padding:10px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.08);
  margin:6px 0;
}
.bubble.me{margin-left:auto; background:rgba(58,124,108,.25)}
.composer{display:flex; gap:8px; margin-top:10px}
.composer input{flex:1}

/* ENNEALOVE_READABILITY_PATCH_V1 */
:root{
  --ennea-panel-bg: rgba(8, 10, 16, .86);
  --ennea-panel-border: rgba(255,255,255,.16);
  --ennea-panel-shadow: 0 18px 60px rgba(0,0,0,.45);
  --ennea-field-bg: rgba(10, 12, 20, .92);
  --ennea-field-border: rgba(255,255,255,.22);
  --ennea-text: #ffffff;
  --ennea-muted: rgba(255,255,255,.78);
}

/* 1) Encarts de lecture : plus opaques, toujours premium */
.card, .panel, .box, .tile, .glass, .content, .sheet, .modal, main .wrap, main .container{
  background: var(--ennea-panel-bg) !important;
  border: 1px solid var(--ennea-panel-border) !important;
  box-shadow: var(--ennea-panel-shadow) !important;
}

/* 2) Si certaines zones utilisent backdrop-filter très fort : on réduit un peu */
.card, .panel, .glass{
  backdrop-filter: blur(10px) !important;
}

/* 3) Champs et listes déroulantes : lisibilité MAX */
input, select, textarea{
  background: var(--ennea-field-bg) !important;
  color: var(--ennea-text) !important;
  border: 1px solid var(--ennea-field-border) !important;
  outline: none !important;
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.10) !important;
}

/* Important : menus des <select> (Windows) */
select option{
  background: rgb(10,12,20) !important;
  color: #ffffff !important;
}

/* Placeholder */
::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* 4) Texte secondaire */
.small, .muted, .hint, .sub, .meta{
  color: var(--ennea-muted) !important;
}

/* 5) Tables/listes sur fond image */
table, .table{
  background: rgba(8,10,16,.72) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* ENNEALOVE_BUSINESS_READABILITY_V1 */
/* Business : on renforce l’opacité des encarts KPI / blocs dashboard */
.kpi, .kpiCard, .stat, .stats, .widget, .widgetCard, .dashCard, .dashTile, .metric, .metrics, .panelKpi, .bizCard, .bizTile{
  background: rgba(8,10,16,.90) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.50) !important;
}

/* Si la page business a un conteneur spécifique */
#business, .business, .businessWrap, .businessGrid{
  color: #fff !important;
}

/* Boutons et labels dans business */
.business label, .business .label, #business label, #business .label{
  color: rgba(255,255,255,.88) !important;
}