*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --odoo-purple:#714B67;--odoo-purple-bg:#f5eef3;
  --navy:#1a0f18;--gray:#64748b;--gray-l:#f8f9fb;--gray-b:#e8ecf1;
  --text:#0f172a;
  --font:'Inter',system-ui,sans-serif;--font-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --r-lg:16px;--r-xl:24px;
  --sh-btn:0 1px 2px rgba(15,23,42,.06),0 4px 14px rgba(113,75,103,.22);
}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:#fafbfc;min-height:100vh;-webkit-font-smoothing:antialiased}

.pi-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-b)}
.pi-nav-i{max-width:760px;margin:0 auto;padding:0 1.25rem;height:60px;display:flex;align-items:center;justify-content:space-between}
.pi-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--navy);font-family:var(--font-display);font-weight:700;font-size:14px}
.pi-logo img{height:36px}
.pi-save-hint{font-size:11px;color:var(--gray);font-weight:500}

.pi-wrap{max-width:760px;margin:0 auto;padding:5.5rem 1.25rem 3rem}
.pi-header{margin-bottom:1.75rem}
.pi-header h1{font-family:var(--font-display);font-size:clamp(1.35rem,3vw,1.75rem);font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1.2;margin-bottom:.5rem}
.pi-header p{font-size:14px;color:var(--gray);line-height:1.6}
.pi-time-badge{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--gray-b);border-radius:100px;padding:6px 12px;font-size:12px;font-weight:600;color:#475569;margin-bottom:1rem}
.pi-booked-note{background:var(--odoo-purple-bg);border:1px solid rgba(113,75,103,.2);border-radius:var(--r-lg);padding:12px 14px;font-size:13px;color:#475569;margin-bottom:1.25rem;line-height:1.5}
.pi-booked-note strong{color:var(--odoo-purple)}

.pi-progress{display:flex;gap:4px;margin-bottom:1.5rem}
.pi-dot{flex:1;height:4px;border-radius:100px;background:#e2e8f0;transition:background .3s}
.pi-dot.done{background:rgba(113,75,103,.35)}.pi-dot.active{background:var(--odoo-purple)}
.pi-step-label{font-size:12px;font-weight:600;color:var(--gray);margin-bottom:1rem}

.pi-card{background:#fff;border:1px solid var(--gray-b);border-radius:var(--r-xl);padding:1.5rem;box-shadow:0 4px 24px rgba(15,23,42,.04)}
.pi-card h2{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:.35rem}
.pi-card .hint{font-size:13px;color:var(--gray);margin-bottom:1.25rem;line-height:1.55}

.pi-learn{background:var(--gray-l);border-radius:var(--r-lg);margin-bottom:1.25rem;overflow:hidden;border:1px solid var(--gray-b)}
.pi-learn summary{padding:10px 14px;font-size:12.5px;font-weight:600;color:var(--odoo-purple);cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
.pi-learn summary::-webkit-details-marker{display:none}
.pi-learn .pi-learn-body{padding:0 14px 12px;font-size:12.5px;color:#475569;line-height:1.6}

.pi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pi-grid .full{grid-column:1/-1}
.pi-field label{display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:5px}
.pi-field input,.pi-field select,.pi-field textarea{width:100%;padding:11px 14px;border:1px solid var(--gray-b);border-radius:var(--r-lg);font-size:13px;font-family:inherit;background:#fafbfc}
.pi-field input:focus,.pi-field select:focus,.pi-field textarea:focus{border-color:var(--odoo-purple);outline:none;box-shadow:0 0 0 3px rgba(113,75,103,.1);background:#fff}
.pi-field textarea{resize:vertical;min-height:88px}

.pi-chips{display:flex;flex-direction:column;gap:6px}
.pi-chip{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--gray-b);border-radius:var(--r-lg);cursor:pointer;font-size:13px;background:#fafbfc;transition:all .15s}
.pi-chip:hover{border-color:rgba(113,75,103,.3)}
.pi-chip.selected{border-color:var(--odoo-purple);background:var(--odoo-purple-bg)}
.pi-chip input{accent-color:var(--odoo-purple);margin-top:2px;flex-shrink:0}
.pi-chip span{line-height:1.45}

.pi-foot{display:flex;justify-content:space-between;align-items:center;margin-top:1.25rem;gap:10px}
.btn{padding:11px 22px;border-radius:100px;font-size:14px;font-weight:600;cursor:pointer;border:none;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn-p{background:var(--navy);color:#fff;box-shadow:var(--sh-btn)}.btn-p:hover{background:var(--odoo-purple)}
.btn-o{background:#fff;color:var(--navy);border:1px solid var(--gray-b)}.btn-o:hover{background:var(--gray-l)}
.btn:disabled{opacity:.55;cursor:not-allowed}

.pi-success{display:none;text-align:center;padding:2rem 0}
.pi-success .ico{font-size:3rem;margin-bottom:.75rem}
.pi-success h2{font-family:var(--font-display);font-size:1.35rem;color:var(--navy);margin-bottom:.5rem}
.pi-success p{font-size:14px;color:var(--gray);line-height:1.65;max-width:480px;margin:0 auto 1.25rem}
.pi-summary{text-align:left;background:var(--gray-l);border-radius:var(--r-lg);padding:1rem 1.15rem;margin:1.25rem 0;font-size:13px;line-height:1.6;color:#475569}
.pi-summary strong{color:var(--navy)}

.pi-step{display:none}.pi-step.active{display:block}

.pi-quiz{margin-top:.5rem}
.pi-quiz-q{padding:1rem 0;border-bottom:1px solid var(--gray-b)}
.pi-quiz-q:last-child{border-bottom:none;padding-bottom:0}
.pi-quiz-q .q-title{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:8px;line-height:1.45}
.pi-quiz-opts{display:flex;flex-direction:column;gap:6px}
.pi-radio{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--gray-b);border-radius:var(--r-lg);cursor:pointer;font-size:12.5px;background:#fafbfc;transition:all .15s;line-height:1.45}
.pi-radio:hover{border-color:rgba(113,75,103,.3)}
.pi-radio:has(input:checked){border-color:var(--odoo-purple);background:var(--odoo-purple-bg)}
.pi-radio input{accent-color:var(--odoo-purple);margin-top:2px;flex-shrink:0}

.pi-score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:1.25rem 0}
.pi-score-card{background:var(--gray-l);border:1px solid var(--gray-b);border-radius:var(--r-lg);padding:14px;text-align:center}
.pi-score-big{font-family:var(--font-display);font-size:1.75rem;font-weight:800;line-height:1}
.pi-score-lbl{font-size:11px;color:var(--gray);margin-top:4px;font-weight:500}
.pi-bar{height:6px;background:#e2e8f0;border-radius:4px;margin:6px 0 10px;overflow:hidden}
.pi-bar-fill{height:100%;border-radius:4px;transition:width .4s}
.pi-tip{background:#ecfdf5;border-left:3px solid #0F6E56;border-radius:0 var(--r-lg) var(--r-lg) 0;padding:10px 14px;font-size:13px;color:#065f46;margin-bottom:8px;line-height:1.5;text-align:left}
.pi-warn{background:#fffbeb;border-left:3px solid #BA7517;border-radius:0 var(--r-lg) var(--r-lg) 0;padding:10px 14px;font-size:13px;color:#633806;margin-bottom:8px;line-height:1.5;text-align:left}

@media(max-width:640px){
  .pi-grid{grid-template-columns:1fr}
  .pi-score-grid{grid-template-columns:1fr}
  .pi-foot{flex-direction:column-reverse}
  .pi-foot .btn{width:100%;justify-content:center}
}