/* BedTimeStories Frontend - pastel, rounded, playful, light animation */
.bts-wrap{max-width:760px;margin:24px auto;padding:0 12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.bts-card{position:relative;border-radius:28px;padding:22px 20px 18px;background:linear-gradient(135deg,#fff6fb,#f3fbff);box-shadow:0 12px 40px rgba(0,0,0,.08);overflow:hidden}
.bts-card:before{content:"";position:absolute;inset:-120px -140px auto auto;width:280px;height:280px;border-radius:999px;background:radial-gradient(circle at 30% 30%,rgba(255,215,235,.9),rgba(255,215,235,0));filter:blur(0);opacity:.9}
.bts-card:after{content:"";position:absolute;inset:auto auto -140px -140px;width:320px;height:320px;border-radius:999px;background:radial-gradient(circle at 60% 60%,rgba(190,240,255,.9),rgba(190,240,255,0));opacity:.9}
.bts-header{position:relative;z-index:1;text-align:center;margin-bottom:14px}
.bts-badge{display:inline-block;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.75);backdrop-filter:blur(6px);font-weight:700}
.bts-header h2{margin:10px 0 8px;font-size:28px;line-height:1.1}
.bts-header p{margin:0;color:#2b2b2b;opacity:.9}
.bts-form{position:relative;z-index:1}
.bts-progress{display:flex;align-items:center;gap:10px;margin:8px 0 14px}
.bts-progress-track{flex:1;height:10px;border-radius:999px;background:rgba(0,0,0,.06);overflow:hidden}
.bts-progress-bar{height:100%;border-radius:999px;background:linear-gradient(135deg,#ffb3d9,#8ee6ff);transition:width .22s ease}
.bts-progress-text{font-weight:800;font-size:12px;min-width:42px;text-align:right;opacity:.85}

.bts-steps{margin-top:6px}
.bts-step-title{font-weight:900;font-size:16px;margin:6px 0 10px}
.bts-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bts-full{grid-column:1 / -1}
.bts-field label{display:block;font-weight:700;margin:4px 0 6px}
.bts-field input,.bts-field select,.bts-field textarea{width:100%;padding:12px 12px;border-radius:16px;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.85);outline:none;transition:transform .08s ease,border-color .15s ease,box-shadow .15s ease}
.bts-field input:focus,.bts-field select:focus,.bts-field textarea:focus{border-color:rgba(80,120,255,.35);box-shadow:0 0 0 4px rgba(80,120,255,.12)}
.bts-hint{font-size:12px;opacity:.75;margin-top:6px}
.bts-btn{margin-top:14px;width:100%;border:0;border-radius:18px;padding:14px 14px;font-size:16px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#ffb3d9,#8ee6ff);box-shadow:0 12px 26px rgba(0,0,0,.10);transform:translateY(0);transition:transform .12s ease,filter .12s ease}
.bts-btn-secondary{background:rgba(255,255,255,.75);box-shadow:0 12px 26px rgba(0,0,0,.06)}
.bts-btn:hover{transform:translateY(-1px);filter:saturate(1.05)}
.bts-btn:active{transform:translateY(1px)}
.bts-btn-sparkle{margin-right:8px}
.bts-status{margin-top:12px;font-weight:700}
.bts-status.is-ok{color:#0a7a3b}
.bts-status.is-bad{color:#b4002a}
.bts-trust{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.bts-trust-item{padding:2px 0;background:transparent;box-shadow:none;color:rgba(40,40,60,.85)}

/* Screen-reader only (labels stay for accessibility, but not visible in UI). */
.bts-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media (max-width:640px){.bts-grid{grid-template-columns:1fr}}
@keyframes btsFloat{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.bts-badge{animation:btsFloat 3.2s ease-in-out infinite}

.bts-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.bts-nav .bts-btn{margin-top:0}
.bts-nav .bts-btn[data-bts-submit]{grid-column:1/-1}

.bts-choice{display:flex;flex-direction:column;gap:10px}
.bts-radio{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:16px;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.75);cursor:pointer}
.bts-radio input{margin-top:2px}