:root{
  --ink:#101314; --panel:#181c1d; --panel-2:#1f2425; --line:#2b3132;
  --paper:#f8fefe; --mint:#00ffbf; --violet:#b69df0; --cream:#f9e6ba; --muted:#8b9695;
}
*{box-sizing:border-box;}
/* Garantit que "hidden" masque toujours l'élément, même si une autre règle
   plus bas fixe un display sur ce même élément. */
[hidden]{display:none !important;}

html,body{margin:0;padding:0;background:var(--ink);color:var(--paper);
  font-family:'Helvetica Neue',Arial,sans-serif;}
.wrap{max-width:980px;margin:0 auto;padding:32px 20px 80px;}

.view[hidden]{display:none;}

.top{display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:28px;gap:12px;flex-wrap:wrap;}
.brand{display:flex;flex-direction:column;gap:2px;}
.brand .mark{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);font-weight:700;}
.brand h1{margin:0;font-size:22px;font-weight:800;}
.who{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px;}
.who button{background:transparent;border:1px solid var(--line);color:var(--paper);
  padding:6px 12px;border-radius:7px;font-size:12px;cursor:pointer;}

.avatarBtn{width:30px;height:30px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);
  padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.avatarBtn:hover{border-color:var(--mint);}
.avatarImg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;font-size:14px;color:var(--muted);}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:20px;}
.panel h2{margin:0 0 14px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;}

input,select,textarea{background:var(--panel-2);border:1px solid var(--line);color:var(--paper);
  padding:10px 12px;border-radius:8px;font-size:14px;font-family:inherit;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--mint);}
button{cursor:pointer;font-family:inherit;}
.btn{background:var(--mint);color:var(--ink);border:none;padding:10px 18px;border-radius:8px;font-weight:700;font-size:14px;}
.btn:hover{opacity:.9;}
.btnGhost{background:var(--panel-2);border:1px solid var(--line);color:var(--paper);padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;}
.btnGhost:hover{border-color:var(--mint);}
.btnGhost.isSelected{border-color:var(--mint);}
.btnLink{background:none;border:none;color:var(--violet);font-size:13px;text-decoration:underline;padding:0;}

.loginCard{max-width:360px;margin:40px auto;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:28px;}
.loginCard h2{margin:0 0 4px;font-size:20px;}
.loginCard .sub{color:var(--muted);font-size:13px;margin-bottom:20px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.field label{font-size:12px;color:var(--muted);}
.field input, .field select{width:100%;}
.googleBtn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--paper);padding:10px;border-radius:8px;font-size:14px;font-weight:600;margin-bottom:14px;}
.divider{display:flex;align-items:center;gap:10px;margin:4px 0 14px;color:var(--muted);font-size:11px;}
.divider .line{flex:1;height:1px;background:var(--line);}
.errorMsg{color:#e0847a;font-size:12.5px;margin-top:10px;}
.successMsg{background:#5dcaa522;color:#5dcaa5;border-radius:8px;padding:8px 12px;font-size:12.5px;}

.grid{display:grid;grid-template-columns:1.5fr 1.4fr .9fr .9fr auto;gap:12px;align-items:center;}
.rowHead{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  padding:0 4px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.rowHead > div:nth-child(3), .rowHead > div:nth-child(4){text-align:center;}
.rowHead > div:last-child{text-align:right;}

.projRow{padding:14px 4px;border-bottom:1px solid var(--line);}
.projRow:last-child{border-bottom:none;}
.colProj{display:flex;flex-direction:column;gap:5px;}
.pname{font-weight:700;font-size:14.5px;}
.colMembers{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.colTime, .colAmount{text-align:center;}
.colActions{display:flex;gap:6px;justify-content:flex-end;align-items:center;}

.badge{display:inline-block;font-size:11px;padding:3px 9px;border-radius:6px;font-weight:700;white-space:nowrap;width:fit-content;
  border:none;}
.badge.isClickable{cursor:pointer;}
.badge.isClickable:hover{outline:1px solid currentColor;}
.memberChip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 9px 3px 3px;border-radius:999px;font-weight:600;}
.memberDot{width:14px;height:14px;border-radius:50%;flex-shrink:0;cursor:pointer;}
.memberName{cursor:pointer;}
.addMemberBtn{width:26px;height:26px;border-radius:50%;background:var(--panel-2);border:1px dashed var(--line);
  color:var(--muted);font-size:15px;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;}
.addMemberBtn:hover{border-color:var(--mint);color:var(--mint);}
.addGuestBtn{font-size:11.5px;padding:5px 12px;border-radius:999px;}

.timeCell{font-family:'SF Mono',Consolas,monospace;font-size:14.5px;}
.timeCell .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mint);
  margin-right:6px;animation:pulse 1.2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}
.price{font-weight:800;font-size:15.5px;color:var(--cream);}

.iconBtn{width:32px;height:32px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);
  color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.iconBtn:hover{border-color:var(--mint);}
.startStop{border:1px solid var(--line);background:var(--panel-2);color:var(--paper);
  padding:7px 12px;border-radius:8px;font-size:11.5px;font-weight:700;}
.startStop.isRunning{background:var(--violet);color:var(--ink);border-color:var(--violet);}
.startStop.isStopped{background:var(--mint);color:var(--ink);border-color:var(--mint);}

.empty{color:var(--muted);font-size:13.5px;padding:16px 4px;}

.modalBg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;
  justify-content:center;z-index:50;padding:20px;}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;
  max-width:420px;width:100%;}
.modal h3{margin:0 0 16px;font-size:16px;}
.modalActions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}
.colorSwatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;}
.swatch.isSelected{border-color:var(--paper);}
.genLink{background:var(--panel-2);border:1px dashed var(--line);border-radius:8px;padding:10px 12px;
  font-size:12px;color:var(--muted);word-break:break-all;margin-top:10px;}
.typeToggle{display:flex;gap:8px;}

.chatModal{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  max-width:420px;width:100%;height:600px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;}
.chatHead{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.chatHead h3{margin:0;font-size:15px;}
.chatClose{background:none;border:none;color:var(--muted);font-size:20px;line-height:1;}
.chatBody{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:4px;}
.bubbleRow{display:flex;flex-direction:column;max-width:78%;}
.bubbleRow.isMine{align-self:flex-end;align-items:flex-end;}
.bubbleRow.isTheirs{align-self:flex-start;align-items:flex-start;}
.bubbleAuthor{font-size:10.5px;color:var(--muted);margin:6px 4px 2px;}
.bubble{padding:9px 14px;border-radius:18px;font-size:14px;line-height:1.4;color:var(--ink);}
.bubbleRow.isMine .bubble{border-bottom-right-radius:4px;}
.bubbleRow.isTheirs .bubble{border-bottom-left-radius:4px;}
.chatInputBar{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);}
.chatInputBar input{flex:1;border-radius:20px;}
.chatInputBar button{background:var(--mint);color:var(--ink);border:none;width:38px;height:38px;
  border-radius:50%;font-weight:700;flex-shrink:0;}

.totalBar{display:flex;justify-content:space-between;align-items:center;
  background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:16px 20px;}
.totalBar .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;}
.totalBar .amount{font-size:22px;font-weight:800;color:var(--mint);}

@media (max-width:720px){
  .grid{grid-template-columns:1fr;gap:6px;}
  .rowHead{display:none;}
  .colTime,.colAmount{text-align:left;}
  .colActions{justify-content:flex-start;}
}