/* :root{
    --bg: #F9FAFB;
    --card: #FFFFFF;
    --ink: #111827;
    --muted: #6B7280;
    --border: rgba(17,24,39,.10);
    --shadow: 0 22px 60px rgba(0,0,0,.10);
    --shadow2: 0 12px 24px rgba(0,0,0,.10);
  
    --primary: #22C55E; /* ChurchGather green */
    --teal: #1EAE98;
    --blue: #3B82F6;
  
    --good: rgba(34,197,94,.14);
    --bad: rgba(239,68,68,.14);
    --warn: rgba(255,167,38,.16);
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    background: var(--bg);
    color: var(--ink);
  }
  
  .bg{
    position:fixed; inset:0;
    pointer-events:none;
    overflow:hidden;
  }
  .glow{
    position:absolute;
    width:680px; height:680px;
    border-radius:999px;
    filter: blur(0px);
    opacity: .9;
  }
  .glow-a{
    top:-320px; left:-320px;
    background: radial-gradient(circle at 35% 35%, rgba(34,197,94,.22), transparent 55%),
                radial-gradient(circle at 70% 60%, rgba(30,174,152,.18), transparent 55%);
  }
  .glow-b{
    bottom:-360px; right:-360px;
    background: radial-gradient(circle at 40% 40%, rgba(59,130,246,.18), transparent 55%),
                radial-gradient(circle at 65% 70%, rgba(30,174,152,.14), transparent 55%);
  }
  .grid{
    position:absolute; inset:0;
    background:
      linear-gradient(to right, rgba(17,24,39,.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(17,24,39,.05) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at center, black 35%, transparent 70%);
    opacity:.35;
  }
  
  .wrap{
    min-height: 100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding: 28px 18px;
    position:relative;
  }
  
  .card{
    width: min(560px, 92vw);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  
  .header{
    padding: 18px 18px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(17,24,39,.06);
  }
  
  .brand{
    display:flex;
    align-items:center;
    gap: 12px;
    min-width: 0;
  }
  .logoRing{
    width: 54px; height: 54px;
    border-radius: 18px;
    padding: 2px;
    background: linear-gradient(135deg, var(--primary), var(--teal));
    box-shadow: var(--shadow2);
  }
  .logoInner{
    width:100%; height:100%;
    border-radius: 16px;
    background: #fff;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .cg{
    font-weight: 900;
    letter-spacing: .5px;
    background: linear-gradient(135deg, var(--primary), var(--teal));
    -webkit-background-clip:text;
    background-clip:text;
    color: transparent;
  }
  
  .brandText{ min-width:0; }
  .name{
    font-weight: 900;
    font-size: 16px;
    line-height: 1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .tag{
    font-weight: 700;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  
  .pill{
    font-weight: 900;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(17,24,39,.10);
    background: rgba(255,255,255,.8);
    color: rgba(17,24,39,.85);
    flex-shrink:0;
  }
  
  .body{
    padding: 18px;
  }
  
  .statusRow{
    display:flex;
    gap: 14px;
    align-items:flex-start;
  }
  
  .spinner{
    width: 18px; height: 18px;
    border-radius: 999px;
    border: 2px solid rgba(17,24,39,.15);
    border-top-color: var(--teal);
    animation: spin 900ms linear infinite;
    margin-top: 6px;
  }
  @keyframes spin{ to{ transform: rotate(360deg);} }
  
  .title{
    margin:0;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 900;
  }
  .subtitle{
    margin: 6px 0 0;
    color: var(--muted);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.45;
  }
  
  .banner{
    margin-top: 14px;
    border-radius: 16px;
    padding: 12px 12px;
    border: 1px solid rgba(17,24,39,.08);
    background: rgba(34,197,94,.10);
    display:flex;
    align-items:center;
    gap: 10px;
  }
  .banner .dot{
    width: 10px; height:10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--teal));
    box-shadow: 0 6px 12px rgba(0,0,0,.08);
  }
  .bannerText{
    font-weight: 800;
    color: rgba(17,24,39,.90);
    font-size: 13px;
    line-height: 1.35;
  }
  
  .actions{
    display:flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap:wrap;
  }
  .btn{
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    font-weight: 900;
    font-size: 13px;
    border: 1px solid rgba(17,24,39,.10);
    transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
    user-select:none;
  }
  .btn:active{ transform: translateY(1px); opacity: .95; }
  
  .primary{
    color: #fff;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--teal));
    box-shadow: 0 18px 30px rgba(34,197,94,.18);
  }
  .ghost{
    background: rgba(255,255,255,.9);
    color: rgba(17,24,39,.90);
  }
  
  .fineprint{
    margin-top: 10px;
    color: rgba(107,114,128,.95);
    font-weight: 700;
    font-size: 12px;
  }
  
  .footer{
    margin-top: 16px;
    display:flex;
    gap: 10px;
    align-items:center;
    color: rgba(107,114,128,.95);
    font-weight: 700;
    font-size: 12px;
  }
  .sep{ opacity:.6; }
  .link{ color: rgba(30,174,152,.95); text-decoration:none; font-weight: 900; }
  .link:hover{ text-decoration: underline; }
  .logoImg {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px; /* optionnel */
}

  
  /* States */
  .state-good .banner{ background: var(--good); }
  .state-bad .banner{ background: var(--bad); }
  .state-warn .banner{ background: var(--warn); }
  .state-bad .spinner{ display:none; }
  .state-good .spinner{ display:none; }
  .state-warn .spinner{ display:none; }
  
  @media (max-width: 420px){
    .header{ padding: 16px 14px 12px; }
    .body{ padding: 14px; }
    .title{ font-size: 18px; }
  }
   */