:root{
  --bg: rgba(10,14,26,0.72);
  --line: rgba(255,255,255,0.14);
  --text: rgba(235,242,255,0.96);
  --muted: rgba(170,179,214,0.92);
  --accent1:#22c55e;
  --accent2:#38bdf8;
  --label:#67e8f9;
  --goal:#7dd3fc;
  --left:#4ade80;
  --today:#fbbf24;
  --gold1:#fff3b0;
  --gold2:#ffd24a;
  --gold3:#f0a500;
  --shadow: 0 14px 40px rgba(0,0,0,0.45);
}

*{box-sizing:border-box}

html,body{
  width:431px;
  height:133px;
  margin:0;
  overflow:hidden;
  background:transparent;
}

body.obsCompact{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.card{
  width:100%;
  height:100%;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:14px;
  background: var(--bg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

/* Title */
.title{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  line-height:1;
}
.brandMain{
  flex:0 0 auto;
  font-size:19px;
  font-weight:1000;
  letter-spacing:-0.01em;
  line-height:1;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brandSub{
  min-width:0;
  font-size:9px;
  font-weight:900;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color: #bfd0ff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.donate{
  flex:0 0 auto;
  margin-left:auto;
  padding-left:8px;
  font-size:25px;
  font-weight:1000;
  letter-spacing:0.005em;
  line-height:1;
  white-space:nowrap;
  background: linear-gradient(180deg, var(--gold1) 0%, var(--gold2) 48%, var(--gold3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(255,190,40,0.45));
}

/* Total raised */
.totalRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.label{
  font-size:11px;
  font-weight:900;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color: var(--label);
  text-shadow: 0 0 12px rgba(34,211,238,0.35);
  white-space:nowrap;
}
.value{
  font-size:31px;
  font-weight:1000;
  letter-spacing:-0.02em;
  line-height:1;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #b9ecff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(56,189,248,0.30));
}

/* Progress */
.progress{
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  overflow:hidden;
}
.progressBar{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  transition: width 400ms ease;
}

/* Goal / left / donations today */
.meta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  min-width:0;
}
.goalGroup{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-variant-numeric: tabular-nums;
}
#goalMeta{color: var(--goal)}
.goalGroup .dot{
  color: rgba(190,205,235,0.55);
  font-size:9px;
  margin:0 4px;
}
#leftMeta{color: var(--left)}
.todayCount{
  flex:0 0 auto;
  margin-left:auto;
  color: var(--today);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(251,191,36,0.28);
}