/* =========================================================
   Soul Connect · form + register + admin styles
   ========================================================= */

.form-page { background:
    radial-gradient(60% 40% at 100% 0%, #fbeefa 0%, transparent 55%),
    radial-gradient(50% 40% at 0% 5%, #ffeee6 0%, transparent 55%),
    var(--bg);
  padding: 48px 0 80px;
}
.form-shell { max-width: 760px; margin: 0 auto; }

/* top banner */
.form-banner {
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  box-shadow: var(--shadow);
  margin-bottom: 26px;
  text-align: center;
}
.form-banner .badge {
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:14px; color:var(--rose-deep);
  background:var(--bg-tint); padding:7px 16px; border-radius:999px;
  border:1px solid rgba(239,79,120,.18); margin-bottom:14px;
}
.form-banner h1 { font-size: clamp(24px,4vw,32px); margin-bottom:10px; }
.form-banner p { color: var(--ink-soft); font-size:15px; margin:0 auto; max-width:560px; }

/* progress */
.form-progress {
  position: sticky; top: 72px; z-index: 20;
  background: rgba(253,246,243,.9); backdrop-filter: blur(10px);
  border:1px solid var(--line-soft); border-radius: 999px;
  padding: 8px 8px; margin-bottom: 24px;
  display:flex; gap:6px; box-shadow: var(--shadow-sm);
}
.form-progress button {
  flex:1; border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--ink-soft);
  padding:9px 6px; border-radius:999px; transition:.2s; white-space:nowrap;
}
.form-progress button.active { background: var(--grad); color:#fff; box-shadow: var(--shadow-sm); }
.form-progress button .num {
  display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background: rgba(58,46,63,.08); margin-right:6px; font-size:12px;
}
.form-progress button.active .num { background: rgba(255,255,255,.25); }
.form-progress button.done .num { background: var(--mint); color:#fff; }

/* fieldset card */
.fieldset {
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}
.fieldset > legend, .fieldset-head {
  display:flex; align-items:center; gap:12px; margin-bottom:6px; padding:0;
}
.fieldset-head .step-pill {
  font-size:12px; font-weight:700; color:#fff; background:var(--grad);
  padding:4px 12px; border-radius:999px; letter-spacing:.04em;
}
.fieldset-head h2 { font-size:20px; margin:0; }
.fieldset-sub { color:var(--ink-soft); font-size:14px; margin: 2px 0 22px; }

/* question block */
.q { margin-bottom: 26px; }
.q:last-child { margin-bottom: 4px; }
.q-label {
  display:block; font-weight:600; font-size:15.5px; margin-bottom:11px;
}
.q-label .idx { color: var(--rose-deep); font-weight:800; margin-right:7px; }
.q-label .req { color: var(--rose); margin-left:4px; }
.q-hint { color: var(--ink-faint); font-weight:500; font-size:13px; margin-left:6px; }

/* inputs */
.input, .select, .textarea {
  width:100%; font-family:inherit; font-size:15.5px; color:var(--ink);
  background:var(--bg); border:1.5px solid var(--line); border-radius:14px;
  padding:13px 16px; transition: border-color .2s, box-shadow .2s, background .2s;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:focus, .select:focus, .textarea:focus {
  outline:0; border-color: var(--rose);
  box-shadow: 0 0 0 4px rgba(255,111,145,.14); background:#fff;
}
.textarea { resize: vertical; min-height: 90px; line-height:1.6; }
.select {
  appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237c6a78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 16px center; padding-right:42px;
}
.input-row { display:flex; gap:12px; }
.input-row > * { flex:1; }

/* radio / checkbox option pills */
.options { display:grid; gap:10px; }
.options.cols-2 { grid-template-columns: 1fr 1fr; }
.options.cols-3 { grid-template-columns: repeat(3,1fr); }

.opt {
  position:relative; display:flex; align-items:center; gap:12px;
  border:1.5px solid var(--line); border-radius:14px;
  padding:13px 16px; cursor:pointer; background:var(--bg);
  transition: border-color .18s, background .18s, box-shadow .18s, transform .1s;
  font-size:15px;
}
.opt:hover { border-color: rgba(255,111,145,.5); }
.opt input { position:absolute; opacity:0; pointer-events:none; }
.opt .dot {
  flex:none; width:21px; height:21px; border-radius:50%;
  border:2px solid var(--line); display:grid; place-items:center; transition:.18s;
}
.opt .dot.sq { border-radius:7px; }
.opt .dot::after {
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--grad); transform:scale(0); transition: transform .18s;
}
.opt .dot.sq::after { border-radius:3px; }
.opt input:checked ~ .dot { border-color: var(--rose); }
.opt input:checked ~ .dot::after { transform: scale(1); }
.opt input:checked ~ .o-body,
.opt:has(input:checked) { /* fallback handled by .is-checked */ }
.opt.is-checked {
  border-color: var(--rose); background: var(--bg-tint);
  box-shadow: 0 6px 18px rgba(239,79,120,.12);
}
.opt.is-disabled { opacity:.45; cursor:not-allowed; }
.o-body strong { font-weight:600; }
.o-body small { display:block; color:var(--ink-soft); font-size:13px; font-weight:400; margin-top:2px; }

/* fruit grid */
.fruit-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fruit {
  position:relative; cursor:pointer;
  border:1.5px solid var(--line); border-radius:18px; padding:16px 16px;
  background:var(--bg); transition:.18s; display:flex; gap:14px; align-items:flex-start;
}
.fruit:hover { border-color: rgba(178,135,216,.55); transform: translateY(-2px); }
.fruit input { position:absolute; opacity:0; }
.fruit .f-emoji { font-size:32px; line-height:1; flex:none; }
.fruit .f-name { font-weight:700; font-size:15.5px; margin-bottom:2px; }
.fruit .f-desc { color:var(--ink-soft); font-size:13px; line-height:1.5; }
.fruit.is-checked {
  border-color: var(--lav); background: #f6effc;
  box-shadow: 0 10px 26px rgba(138,95,199,.16);
}
.fruit .f-check {
  position:absolute; top:12px; right:12px;
  width:22px;height:22px;border-radius:50%; background:var(--lav-deep); color:#fff;
  display:grid; place-items:center; font-size:12px; transform:scale(0); transition:.18s;
}
.fruit.is-checked .f-check { transform:scale(1); }

/* multi-select counter */
.pick-counter {
  font-size:13px; color:var(--ink-soft); font-weight:600;
  background:var(--bg-tint); padding:3px 11px; border-radius:999px;
}
.pick-counter.full { color:#fff; background:var(--rose); }

/* inline error */
.field-error { color: var(--rose-deep); font-size:13px; margin-top:8px; display:none; }
.q.invalid .field-error { display:block; }
.q.invalid .input, .q.invalid .select, .q.invalid .textarea { border-color: var(--rose); }

/* consent */
.consent {
  display:flex; gap:14px; align-items:flex-start;
  background:var(--grad-soft); border:1px solid rgba(178,135,216,.25);
  border-radius:16px; padding:18px 20px; cursor:pointer;
}
.consent input { margin-top:3px; width:20px; height:20px; accent-color: var(--rose-deep); flex:none; }
.consent span { font-size:14.5px; }
.consent a { color: var(--rose-deep); text-decoration: underline; }

/* submit bar */
.submit-bar { margin-top: 8px; }
.submit-note { text-align:center; color:var(--ink-faint); font-size:13px; margin-top:14px; }

/* ===== success screen ===== */
.success-screen { max-width:620px; margin:40px auto; text-align:center; }
.success-card {
  background:var(--bg-soft); border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); padding:48px 38px; box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
}
.success-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--grad);
}
.success-ring {
  width:84px;height:84px;border-radius:50%; margin:0 auto 22px;
  background:var(--grad); display:grid; place-items:center; color:#fff; font-size:40px;
  box-shadow:0 12px 30px rgba(239,79,120,.4); animation: pop .5s ease;
}
@keyframes pop { 0%{transform:scale(.4);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
.success-card h1 { font-size:28px; margin-bottom:10px; }
.success-card .lead { color:var(--ink-soft); font-size:16px; margin-bottom:28px; }

.invite-box {
  background:var(--grad-soft); border:1px dashed rgba(178,135,216,.5);
  border-radius:18px; padding:22px; margin-bottom:14px;
}
.invite-box .ib-label { font-size:13px; font-weight:700; color:var(--lav-deep); letter-spacing:.04em; margin-bottom:8px; }
.invite-code { font-family: var(--font-serif); font-size:30px; font-weight:700; letter-spacing:.12em; color:var(--ink); }
.invite-link-row { display:flex; gap:10px; margin-top:14px; }
.invite-link-row .input { background:#fff; font-size:14px; text-align:center; }
.copy-btn { flex:none; }
.copied-toast {
  display:inline-block; margin-top:10px; font-size:13px; color:var(--mint);
  font-weight:600; opacity:0; transition:.2s;
}
.copied-toast.show { opacity:1; }
.success-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.share-row { display:flex; gap:10px; justify-content:center; margin-top:18px; }
.share-row a {
  width:44px;height:44px;border-radius:12px; display:grid;place-items:center;
  background:var(--bg-tint); font-size:20px; border:1px solid var(--line-soft); transition:.2s;
}
.share-row a:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }

/* confetti */
.confetti { position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden; }
.confetti i {
  position:absolute; top:-12px; width:9px; height:14px; border-radius:2px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(105vh) rotate(640deg); opacity:.9; }
}

/* ============== ADMIN LOGIN ============== */
.login-gate {
  min-height: calc(100vh - 72px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(60% 40% at 100% 0%, #fbeefa 0%, transparent 55%),
    radial-gradient(50% 40% at 0% 100%, #ffeee6 0%, transparent 55%),
    var(--bg);
}
.login-card {
  width: 100%; max-width: 400px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 40px 34px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.login-mark {
  width: 60px; height: 60px; margin: 0 auto 18px;
  display: grid; place-items: center; font-size: 30px;
  border-radius: 18px; background: var(--grad); box-shadow: var(--shadow-sm);
}
.login-card h1 { font-size: 24px; margin-bottom: 6px; }
.login-card p { font-size: 14px; margin-bottom: 24px; }
.login-card form { display: grid; gap: 12px; text-align: left; }
.login-card .btn { margin-top: 6px; }
.login-error {
  background: var(--bg-tint); color: var(--rose-deep);
  border: 1px solid rgba(239,79,120,.25); border-radius: 12px;
  padding: 10px 14px; font-size: 13.5px; font-weight: 500;
}
.login-back {
  display: inline-block; margin-top: 20px;
  font-size: 13.5px; color: var(--ink-soft);
}
.login-back:hover { color: var(--rose-deep); }

/* ============== ADMIN ============== */
.admin-page { background: var(--bg); min-height: 100vh; padding: 36px 0 70px; }
.admin-head { display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; margin-bottom:24px; }
.admin-head h1 { font-size:26px; margin:0; }
.admin-head .sub { color:var(--ink-soft); font-size:14px; }

.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat {
  background:var(--bg-soft); border:1px solid var(--line-soft); border-radius:16px;
  padding:18px 20px; box-shadow:var(--shadow-sm);
}
.stat .v { font-size:30px; font-weight:800; letter-spacing:-.02em; }
.stat .v.text-grad { font-weight:800; }
.stat .k { color:var(--ink-soft); font-size:13.5px; }

.toolbar {
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  background:var(--bg-soft); border:1px solid var(--line-soft); border-radius:16px;
  padding:14px 16px; margin-bottom:18px; box-shadow:var(--shadow-sm);
}
.toolbar .search { flex:1; min-width:220px; }
.toolbar .search .input { padding:11px 14px; }
.toolbar .select { width:auto; min-width:150px; padding:11px 38px 11px 14px; }

.table-wrap { overflow-x:auto; background:var(--bg-soft); border:1px solid var(--line-soft); border-radius:18px; box-shadow:var(--shadow-sm); }
table.data { width:100%; border-collapse:collapse; font-size:14px; min-width:920px; }
table.data th, table.data td { padding:13px 16px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top; }
table.data th { background:var(--bg-tint); font-weight:700; color:var(--ink); white-space:nowrap; position:sticky; top:0; }
table.data tr:hover td { background: #fff8f5; }
table.data .tag {
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600;
  background:var(--bg-tint); color:var(--rose-deep);
}
table.data .fruit-tag { background:#f4eefc; color:var(--lav-deep); }
.admin-empty { text-align:center; padding:60px 20px; color:var(--ink-soft); }
.note-input {
  width:140px; font-size:13px; border:1px solid var(--line); border-radius:9px;
  padding:6px 9px; font-family:inherit;
}
.lock { color: var(--ink-faint); font-size:12px; display:inline-flex; gap:5px; align-items:center; margin-left:6px; }
.pill-toggle { display:inline-flex; gap:6px; }
.pill-toggle button {
  border:1px solid var(--line); background:var(--bg-soft); border-radius:999px;
  padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; color:var(--ink-soft);
}
.pill-toggle button.on { background:var(--ink); color:#fff; border-color:var(--ink); }

@media (max-width:680px){
  .stat-row { grid-template-columns:1fr 1fr; }
  .form-progress { overflow-x:auto; }
  .fruit-grid { grid-template-columns:1fr; }
  .options.cols-2, .options.cols-3 { grid-template-columns:1fr; }
  .fieldset { padding:24px 20px; }
  .success-card { padding:36px 22px; }
}