/* ---------------- Base */
:root{
  --bg:#0b0e13;
  --panel:#121822;
  --ink:#eaf0ff;
  --muted:#a8b0c2;
  --brand:#5cf2b1;
  --brand2:#8ea1ff;
  --accent:#ffd166;
  --pink:#ff6db0;
  --ok:#66ffa8;
  --ring: 0 0 0 .1rem rgba(140,170,255,.35), 0 0 0 .35rem rgba(92,242,177,.15);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:
    radial-gradient(1200px 600px at 110% -10%, #1a2340 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #0f2f23 0%, transparent 60%),
    linear-gradient(180deg,#0b0e13 0%, #0b0e13 100%);
  font:16px/1.55 system-ui,Segoe UI,Roboto,Arial,sans-serif;
}

.hero{padding:3rem 1.25rem 1rem; text-align:center}
.logo{
  font-size: clamp(1.8rem, 1.2rem + 3vw, 3.2rem);
  margin:0;
  letter-spacing:.5px;
  background: linear-gradient(90deg,var(--brand),var(--brand2),var(--accent),var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 6px 30px rgba(92,242,177,.15));
  animation: hue 10s linear infinite;
}
@keyframes hue { to { filter: hue-rotate(360deg) drop-shadow(0 6px 30px rgba(92,242,177,.15)); } }
.tagline{margin:.35rem auto 1rem; color:var(--muted)}

/* ---------------- Layout & Cards */
.wrap{max-width:980px; margin:0 auto; padding:1rem 1.25rem 3rem; display:grid; gap:1.25rem}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px; padding:1.1rem 1rem 1.25rem;
  backdrop-filter:saturate(120%) blur(8px);
  box-shadow: 0 12px 38px rgba(0,0,0,.35);
}
.card.pop-in{animation: pop .45s ease}
@keyframes pop { 0%{transform:scale(.98);opacity:.0} 100%{transform:scale(1);opacity:1} }

.card h2{margin:.2rem 0 1rem;font-size:1.25rem;color:#dfe7ff}
.card h3{font-size:1.05rem;margin:1rem 0 .5rem;color:#dfe7ff}

.card-head{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-bottom:.5rem}
.offer-num{color:var(--accent)}
.ico{opacity:.9}

.offer-form .grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}
@media (max-width:760px){ .offer-form .grid{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:.4rem}
.field span{color:var(--muted); font-size:.9rem}
.field input[type="text"],
.field input[type="url"],
.field input[type="file"]{
  background:#0f141d; border:1px solid rgba(255,255,255,.10);
  color:#eef3ff; border-radius:12px; padding:.7rem .85rem;
  outline:none;
}
.field input:focus{box-shadow: var(--ring); border-color:#9fb1ff}
.span-2{grid-column:1 / -1}

/* Pills */
.type-pills{display:flex; gap:.5rem; flex-wrap:wrap}
.pill{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  padding:.5rem .8rem; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(90deg, rgba(142,161,255,.15), rgba(255,209,102,.15));
  color:#eaf0ff; user-select:none;
  transition: transform .12s ease, background .2s ease, border-color .2s ease, filter .2s ease;
}
.pill:hover{transform:translateY(-1px); filter:saturate(1.25)}
.type-pills input{position:absolute; opacity:0; pointer-events:none}
.type-pills input:checked + .pill{
  border-color:#a4b4ff; background:linear-gradient(90deg,rgba(92,242,177,.22), rgba(142,161,255,.22));
  box-shadow: var(--ring);
}

/* Range */
.range-wrap{position:relative}
.range-wrap input[type="range"]{width:100%}
.range-wrap .ticks{position:absolute;left:0;right:0;bottom:-.4rem; display:flex; justify-content:space-between}
.ticks i{width:2px;height:8px;background:rgba(255,255,255,.25); display:block}
.range-hints{display:flex; justify-content:space-between; margin-top:.35rem; color:var(--muted); font-size:.8rem}

/* Reasons as chips + editors */
.reasons{margin-top:1rem}
.reason-group{
  border:1px dashed rgba(255,255,255,.20);
  border-radius:12px; padding:.7rem .8rem; margin-top:.6rem;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.reason-group legend{padding:0 .5rem;color:#cfe1ff}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#f1f6ff;
  padding:.45rem .65rem;
  border-radius:999px; cursor:pointer;
  transition:transform .12s ease, background .2s ease;
}
.chip:hover{transform:translateY(-1px); background:rgba(92,242,177,.16)}

.chip-edit{
  display:flex; align-items:center; gap:.35rem;
  background: rgba(92,242,177,.10);
  border:1px solid rgba(92,242,177,.35);
  padding:.35rem .45rem .35rem .45rem;
  border-radius:999px;
  animation: pop .35s ease;
}
.chip-edit input{
  border:none; outline:none; color:#eaf0ff; background:transparent; min-width:9ch;
}
.mini{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:#eaf0ff; border-radius:999px; padding:.2rem .45rem; cursor:pointer;
}
.mini:hover{background:rgba(255,255,255,.14)}

/* Options */
.options{display:grid; gap:.6rem; margin-top:1rem}
.check{display:flex; gap:.6rem; align-items:center}
.check input{accent-color:var(--brand)}

/* Pledge card */
.pledge details summary{cursor:pointer; color:#e9f2ff; font-weight:600}
.pledge-card{
  margin-top:.7rem; display:grid; gap:.9rem; grid-template-columns: 1.6fr .9fr;
  border:1px solid rgba(255,255,255,.10); border-radius:14px; overflow:hidden;
}
@media (max-width:760px){ .pledge-card{grid-template-columns:1fr} }
.pledge-left{padding:1rem; background:#0e1521}
.pledge-right{padding:1rem; background:#0b111a; border-left:1px solid rgba(255,255,255,.06)}
.stamp{
  font-weight:800; letter-spacing:.08em; display:inline-block; padding:.2rem .5rem;
  border:2px solid rgba(92,242,177,.6); color:#b9ffe3; border-radius:6px; margin-bottom:.4rem;
  transform: rotate(-2deg);
}
.pledge-title{font-size:1.15rem; margin:.1rem 0 .2rem}
.pledge-sub{color:var(--muted); margin:.1rem 0 .5rem}
.pledge-points{margin:.4rem 0 0 1.1rem}
.tiny{color:var(--muted); font-size:.85rem}
.qr-placeholder{
  width:120px;height:120px; display:grid; place-items:center;
  border:2px dashed rgba(255,255,255,.18); border-radius:10px; color:#9fb1ff; font-weight:700; letter-spacing:.05em;
}

/* Buttons */
.actions{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem}
.btn{
  border:1px solid rgba(255,255,255,.20); padding:.7rem 1rem; border-radius:12px; cursor:pointer;
  text-decoration:none; color:#f3f6ff; display:inline-grid; place-items:center;
  transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(90deg,#5cf2b1 0%, #8ea1ff 50%, #ffd166 100%); color:#0a0d12; border-color:transparent; font-weight:700}
.btn.ghost{background:rgba(255,255,255,.05)}
.btn.subtle{background:rgba(255,255,255,.03); color:#cfe1ff}
.btn.tiny{font-size:.9rem; padding:.4rem .6rem; background:rgba(255,255,255,.08)}

/* Tooltips (CSS-only) */
[data-tip]{ position:relative }
[data-tip]:hover::after{
  content: attr(data-tip);
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: calc(100% + .45rem);
  background:#0a0f18; color:#dfe7ff; border:1px solid rgba(255,255,255,.22);
  padding:.55rem .7rem; border-radius:10px; white-space:pre-wrap; font-size:.9rem;
  box-shadow:0 10px 30px rgba(0,0,0,.35); width:max-content; max-width:44ch; text-align:left;
  z-index:2;
}
[data-tip]:hover::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(100% + .15rem); width:10px; height:10px; rotate:45deg;
  background:#0a0f18; border-left:1px solid rgba(255,255,255,.22); border-bottom:1px solid rgba(255,255,255,.22);
  z-index:2;
}

/* Footer */
.foot{padding:2rem 1rem; text-align:center; color:#b7c6ff; opacity:.8}

/* Print */
@media print{
  body{background:#fff}
  .hero, .actions, .foot, .btn.tiny{display:none}
  .card{box-shadow:none; border:1px solid #ddd}
  .pledge-card{border-color:#bbb}
}