:root{
  --pink:#ff66b2;
  --pink-2:#ff99cc;
  --pink-3:#ffe6f2;
  --text:#222;
  --bg:#fff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(90deg,var(--pink),var(--pink-2));
  color:white;
  padding:12px 18px;
  position:sticky;
  top:0; z-index:10;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.topbar .left{display:flex; align-items:center; gap:12px}
.topbar img.logo{height:44px;width:auto; border-radius:50%; background:white; padding:4px}
.topbar h1{margin:0; font-size:1.25rem; font-weight:700}
.topbar .points{font-weight:700; background:rgba(255,255,255,.18); padding:6px 10px; border-radius:999px}
.container{max-width:980px; margin:24px auto; padding:0 16px}
.card{
  background:white; border:1px solid #f2f2f2; border-radius:16px; padding:18px;
  box-shadow:0 8px 24px rgba(255,102,178,.08);
  margin-bottom:16px;
}
h2{margin:0 0 12px 0}
label{font-weight:600; display:block; margin:10px 0 6px}
input[type="number"], input[type="text"], input[type="password"], textarea, select{
  width:100%; padding:10px 12px; border:1px solid #eee; border-radius:12px; outline:none;
}
textarea{min-height:90px}
button,.btn{
  display:inline-block; border:none; background:var(--pink); color:white; padding:10px 14px;
  border-radius:12px; font-weight:700; cursor:pointer; text-decoration:none;
  box-shadow:0 8px 16px rgba(255,102,178,.25);
}
button:hover,.btn:hover{filter:brightness(.95)}
.btn-ghost{background:transparent; color:var(--pink); border:2px solid var(--pink)}
.flex{display:flex; gap:16px; flex-wrap:wrap}
.flex > .grow{flex:1 1 320px}
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px; border-bottom:1px solid #f6f6f6; text-align:left}
.progress{
  background:#f6f6f6; border-radius:999px; height:16px; position:relative; overflow:hidden;
}
.progress > .bar{
  height:100%; background:linear-gradient(90deg,var(--pink),var(--pink-2));
  width:0%; transition:width .6s ease;
}
.milestones{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.tag{background:var(--pink-3); color:#b00060; padding:6px 10px; border-radius:999px; font-size:.85rem}
footer{color:#888; font-size:.85rem; text-align:center; margin:24px 0}
.small{color:#666; font-size:.9rem}
.badge{display:inline-block; padding:4px 8px; border-radius:999px; background:#f4f4f4}
.badge.open{background:#fff0f7; color:#b00060; border:1px solid #ffd1e8}
.badge.accepted{background:#eaffea; color:#2c7a2c}
.badge.denied{background:#ffecec; color:#a60000}
.actions{display:flex; gap:8px; align-items:center}
.right{margin-left:auto}


/* === Colored action buttons === */
.btn-approve { background:#1ea34a; color:#fff; }
.btn-approve:hover { filter: brightness(0.95); }
.btn-deny { background:#d43c3c; color:#fff; }
.btn-deny:hover { filter: brightness(0.95); }

/* Neutral button (reuse .btn) */
.btn { transition: transform .05s ease, box-shadow .2s ease; }
.btn:active { transform: translateY(1px); }

/* === Progress bar animation === */
.progress-wrap { display:flex; align-items:center; gap:.5rem; }
.progress {
  width:100%;
  height:12px;
  background:#eee;
  border-radius:999px;
  overflow:hidden;
  position:relative;
}
.progress > .bar {
  height:100%;
  width:0;
  background:#ff4fa3;
  transition: width .5s ease;
}

/* === Toast popups === */
.toast {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 105, 180, 0.92);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  z-index: 9999;
  font-weight: 600;
}