:root{
  --bg1:#e0f2fe; /* light blue */
  --bg2:#dcfce7; /* light green */
  --accent1:#14b8a6; /* teal */
  --accent2:#3b82f6; /* blue */
  --accent3:#22c55e; /* green */
  --text:#0f172a;
  --muted:#64748b;
  --star:#f59e0b;
  --card-bg: rgba(255,255,255,0.95);
  --pill-bg: #eef2ff;
  --shadow: 0 10px 30px rgba(2, 132, 199, .15);
  --shadow-sm: 0 4px 12px rgba(2, 132, 199, .12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  color: var(--text);
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  background-attachment: fixed;
}

.topbar{
  position: sticky; top:0; z-index:10;
  backdrop-filter: saturate(180%) blur(6px);
  background: linear-gradient(90deg, rgba(59,130,246,.85), rgba(34,197,94,.85));
  color:#fff; padding:.75rem 1rem; box-shadow: var(--shadow);
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; }
.logo{ height:36px; width:auto; border-radius:8px; }

.container{
  max-width: 900px; margin: 2rem auto; padding: 0 1rem;
}

.card{
  background: var(--card-bg);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 1.25rem 1.25rem 1.5rem;
}

h1{ margin:.25rem 0 .25rem; }
h2{ margin:1rem 0 .5rem; }
.muted{ color: var(--muted); }

.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:.85rem; }
.field{ display:flex; flex-direction:column; gap:.35rem; }
input[type="text"], select, textarea{
  padding:.7rem .8rem; border-radius:10px; border:1px solid #dbeafe; background:#fff;
  outline:none; box-shadow: var(--shadow-sm);
}
textarea{ resize: vertical; }

/* Stars */
.stars{
  display:flex; flex-direction: row-reverse; gap:.35rem; font-size: 2.2rem; width:max-content;
}
.stars input{ display:none; }
.stars label{
  cursor:pointer; filter: drop-shadow(0 2px 2px rgba(0,0,0,.08));
  transition: transform .1s ease, color .15s ease;
  color:#cbd5e1;
}
.stars input:checked ~ label{ color: var(--star); }
.stars label:hover,
.stars label:hover ~ label{ color: var(--star); transform: translateY(-1px) scale(1.04); }

/* Pills */
.pills{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pill{
  border:1px solid #dbeafe; background: var(--pill-bg); padding:.4rem .7rem; border-radius:999px; cursor:pointer; user-select:none;
  transition: transform .08s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.pill.active{
  background: linear-gradient(90deg, #3b82f6, #22c55e); color:#fff; border-color: transparent;
  transform: translateY(-1px);
}

/* Buttons */
.btn{
  background: linear-gradient(90deg, #3b82f6, #22c55e);
  border:none; color:#fff; padding:.7rem 1rem; border-radius:12px; cursor:pointer; font-weight:700;
  box-shadow: var(--shadow);
}
.btn:hover{ filter: brightness(1.05); }
.btn:active{ transform: translateY(1px); }
.btn-ghost{
  background: transparent; border:1px solid #93c5fd; color:#0f172a;
}

/* Survey */
.survey.hidden{ display:none; }
.survey{ margin-top: .9rem; }

/* Footer */
.footer{ text-align:center; padding: 2rem 1rem; }

/* Dialog */
dialog{
  border:none; border-radius:16px; padding:1.2rem 1.1rem; box-shadow: var(--shadow);
  max-width: 420px;
}
.dialog-icon{
  height:48px; width:48px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:.25rem;
  background: #ecfeff; color:#14b8a6;
}