@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*{box-sizing:border-box;}
.vsp-wrap,.vsp-archive,.vsp-form-hd,.vsp-card,.vsp-sec,.vsp-pack,.vsp-quiz,.vsp-proc,.vsp-res-hd,.vsp-downloads,.vsp-debug{font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}

/* tokens */
:root{
  --blue:#2563eb;--blue-h:#1d4ed8;--blue-bg:#eff6ff;--blue-bd:#bfdbfe;
  --green:#16a34a;--green-bg:#f0fdf4;--green-bd:#86efac;
  --amber:#d97706;--amber-bg:#fffbeb;--amber-bd:#fcd34d;
  --red:#dc2626;--red-bg:#fef2f2;--red-bd:#fca5a5;
  --n0:#fff;--n50:#f9fafb;--n100:#f3f4f6;--n200:#e5e7eb;--n300:#d1d5db;
  --n400:#9ca3af;--n500:#6b7280;--n600:#4b5563;--n700:#374151;--n800:#1f2937;--n900:#111827;
  --r:8px;--shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
}

/* Archive */
.vsp-archive{background:var(--n0);border:1px solid var(--n200);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:28px;font-size:14px;}
.vsp-arc-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--n50);border-bottom:1px solid var(--n200);font-weight:600;color:var(--n800);}
.vsp-arc-cnt{font-size:11.5px;color:var(--n500);background:var(--n100);border:1px solid var(--n200);padding:2px 8px;border-radius:20px;font-weight:400;}
.vsp-arc-row{display:grid;grid-template-columns:1fr 130px auto auto;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--n100);}
.vsp-arc-row:last-child{border-bottom:none;}
.vsp-arc-row:hover{background:var(--n50);}
.vsp-arc-dom{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vsp-arc-date{font-size:12px;color:var(--n400);}
.vsp-arc-btns{display:flex;gap:5px;}

/* Badges */
.vsp-badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:20px;border:1px solid transparent;}
.vsp-badge--ok     {background:var(--green-bg);color:var(--green);border-color:var(--green-bd);}
.vsp-badge--warning{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-bd);}
.vsp-badge--poor   {background:var(--red-bg);color:var(--red);border-color:var(--red-bd);}

/* Buttons */
.vsp-btn-xs{display:inline-flex;align-items:center;gap:3px;padding:4px 10px;font-family:inherit;font-size:12px;font-weight:500;border:1px solid var(--n300);background:var(--n0);color:var(--n600);border-radius:6px;cursor:pointer;white-space:nowrap;transition:all .12s;}
.vsp-btn-xs:hover{border-color:var(--blue);color:var(--blue);}
.vsp-btn-xs--pdf{color:var(--red);border-color:var(--red-bd);}
.vsp-btn-xs--pdf:hover{background:var(--red-bg);}
.vsp-btn-xs--mp3{color:var(--green);border-color:var(--green-bd);}
.vsp-btn-xs--mp3:hover{background:var(--green-bg);}
.vsp-btn-primary{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;font-family:inherit;font-size:14.5px;font-weight:600;color:#fff;background:var(--blue);border:none;border-radius:var(--r);cursor:pointer;box-shadow:0 1px 3px rgba(37,99,235,.3);transition:background .15s;}
.vsp-btn-primary:hover{background:var(--blue-h);}
.vsp-btn-primary:disabled{opacity:.55;cursor:not-allowed;}

/* Form */
.vsp-form-hd{padding-bottom:22px;border-bottom:1px solid var(--n200);margin-bottom:20px;}
.vsp-form-hd h2{font-size:22px;font-weight:700;margin:0 0 5px;color:var(--n900);}
.vsp-form-hd p{font-size:14px;color:var(--n500);margin:0;}
.vsp-card{background:var(--n0);border:1px solid var(--n200);border-radius:12px;box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;}
.vsp-card-hd{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--n50);border-bottom:1px solid var(--n200);font-size:13.5px;font-weight:600;color:var(--n800);}
.vsp-card-hd em{font-weight:400;color:var(--n400);font-style:normal;}
.vsp-step{font-size:10.5px;font-weight:700;color:var(--blue);background:var(--blue-bg);border:1px solid var(--blue-bd);padding:2px 8px;border-radius:5px;}
.vsp-card-bd{padding:18px;}
.vsp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.vsp-row{grid-template-columns:1fr;}}
.vsp-field{margin-top:14px;}
.vsp-field:first-child,.vsp-row .vsp-field{margin-top:0;}
.vsp-field label{display:block;font-size:12.5px;font-weight:500;color:var(--n600);margin-bottom:5px;}
.vsp-field label em{font-weight:400;color:var(--n400);font-style:normal;}
.vsp-req{color:var(--red);}
.vsp-input{display:block;width:100%;padding:9px 12px;font-family:inherit;font-size:14px;color:var(--n900);background:var(--n0);border:1px solid var(--n300);border-radius:var(--r);outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;}
.vsp-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.vsp-input::placeholder{color:var(--n400);}
.vsp-ta{resize:vertical;min-height:68px;}
.vsp-input[id="f-pos"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:34px;}

/* Pills */
.vsp-pills{display:flex;gap:8px;}
.vsp-pill{cursor:pointer;user-select:none;}
.vsp-pill input{display:none;}
.vsp-pill span{display:block;padding:7px 16px;font-size:13px;font-weight:500;color:var(--n500);background:var(--n0);border:1px solid var(--n300);border-radius:var(--r);transition:all .12s;}
.vsp-pill.on span,.vsp-pill:hover span{border-color:var(--blue);background:var(--blue);color:#fff;}

/* Tags */
.vsp-tags{display:flex;flex-wrap:wrap;gap:6px;}
.vsp-tag{cursor:pointer;user-select:none;}
.vsp-tag input{display:none;}
.vsp-tag span{display:block;padding:4px 11px;font-size:12.5px;color:var(--n600);background:var(--n0);border:1px solid var(--n300);border-radius:20px;transition:all .12s;}
.vsp-tag:hover span{border-color:var(--blue);color:var(--blue);}
.vsp-tag input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:500;}

/* Upload */
.vsp-upload{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px;border:2px dashed var(--n300);border-radius:12px;background:var(--n50);cursor:pointer;text-align:center;transition:all .15s;color:var(--n500);font-size:13.5px;}
.vsp-upload:hover,.vsp-upload.over{border-color:var(--blue);background:var(--blue-bg);color:var(--blue);}
.vsp-upload.has-files{border-color:var(--green);background:var(--green-bg);border-style:solid;}

/* Submit / Processing */
.vsp-submit-row{display:flex;align-items:center;gap:14px;margin-top:18px;}
.vsp-submit-note{font-size:12.5px;color:var(--n400);}
.vsp-proc{text-align:center;padding:44px 20px;background:var(--n0);border:1px solid var(--n200);border-radius:12px;box-shadow:var(--shadow);margin-top:16px;}
.vsp-proc p{font-size:15px;font-weight:500;margin:0 0 10px;color:var(--n800);}
.vsp-pbar{width:240px;height:5px;background:var(--n200);border-radius:3px;overflow:hidden;margin:0 auto;}
.vsp-pbar-fill{height:100%;background:var(--blue);border-radius:3px;transition:width .4s ease;}
.vsp-spinner{width:38px;height:38px;border:3px solid var(--n200);border-top-color:var(--blue);border-radius:50%;animation:vsp-spin .75s linear infinite;margin:0 auto 14px;}
@keyframes vsp-spin{to{transform:rotate(360deg);}}

/* Alerts */
.vsp-alert{padding:12px 16px;border-radius:var(--r);font-size:13.5px;margin-bottom:14px;border:1px solid transparent;line-height:1.5;}
.vsp-alert strong{display:block;margin-bottom:2px;}
.vsp-alert ul{margin:6px 0 0;padding-left:16px;}
.vsp-alert--error{background:var(--red-bg);border-color:var(--red-bd);color:var(--red);}
.vsp-alert--warn {background:var(--amber-bg);border-color:var(--amber-bd);color:#92400e;}
.vsp-alert--info {background:var(--blue-bg);border-color:var(--blue-bd);color:#1e3a8a;}

/* Result */
.vsp-res-hd{display:flex;align-items:flex-start;gap:14px;padding:18px 0;border-bottom:1px solid var(--n200);margin-bottom:18px;flex-wrap:wrap;}
.vsp-res-hd h2{font-size:20px;font-weight:700;margin:0 0 5px;color:var(--n900);}
.vsp-back{font-family:inherit;font-size:13px;color:var(--n500);background:none;border:none;cursor:pointer;padding:4px 0;margin-top:4px;transition:color .12s;}
.vsp-back:hover{color:var(--blue);}
.vsp-downloads{display:flex;gap:10px;flex-wrap:wrap;padding:14px 16px;background:var(--n50);border:1px solid var(--n200);border-radius:12px;margin-bottom:18px;}
.vsp-dl{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:13.5px;font-weight:500;border:1px solid var(--n300);background:var(--n0);color:var(--n700);border-radius:var(--r);text-decoration:none;transition:all .12s;}
.vsp-dl:hover{border-color:var(--blue);color:var(--blue);}

/* Pack */
.vsp-pack{display:flex;flex-direction:column;gap:14px;}
.vsp-sec{background:var(--n0);border:1px solid var(--n200);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;}
.vsp-sec-hd{padding:12px 18px;font-size:13.5px;font-weight:600;color:var(--n800);background:var(--n50);border-bottom:1px solid var(--n200);}
.vsp-sec--warn .vsp-sec-hd{background:var(--red-bg);}
.vsp-sec--info .vsp-sec-hd{background:var(--blue-bg);}
.vsp-item{padding:11px 18px;border-bottom:1px solid var(--n100);}
.vsp-item:last-child{border-bottom:none;}
.vsp-item-t{font-size:14px;font-weight:600;color:var(--n800);margin-bottom:2px;display:flex;align-items:center;gap:8px;}
.vsp-item p{margin:0;font-size:13px;color:var(--n500);line-height:1.5;}
.vsp-proof{font-size:12px;color:var(--green);font-weight:500;margin-top:3px;display:block;}
.vsp-conf{font-size:10px;font-weight:700;padding:1px 6px;border-radius:3px;text-transform:uppercase;}
.vsp-conf--medium{background:var(--amber-bg);color:var(--amber);}
.vsp-conf--low   {background:var(--red-bg);color:var(--red);}
.vsp-targets{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.vsp-target{padding:13px 18px;border-right:1px solid var(--n100);border-bottom:1px solid var(--n100);}
.vsp-target-seg{font-size:13.5px;font-weight:600;color:var(--n800);margin-bottom:7px;}
.vsp-target-row{font-size:12.5px;color:var(--n600);margin-bottom:4px;line-height:1.5;}
.vsp-target-row span{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--n400);}
.vsp-hooks{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:580px){.vsp-hooks{grid-template-columns:1fr;}}
.vsp-hook-list{counter-reset:h;margin:0;padding:0;list-style:none;}
.vsp-hook-list li{counter-increment:h;display:flex;gap:10px;align-items:flex-start;padding:10px 18px;border-bottom:1px solid var(--n100);font-size:13.5px;color:var(--n700);line-height:1.5;}
.vsp-hook-list li:last-child{border-bottom:none;}
.vsp-hook-list li::before{content:counter(h);min-width:20px;height:20px;background:var(--blue-bg);color:var(--blue);border-radius:50%;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.vsp-avoid{margin:0;padding:0;list-style:none;}
.vsp-avoid li{display:flex;gap:10px;align-items:flex-start;padding:10px 18px;border-bottom:1px solid var(--n100);font-size:13.5px;color:var(--n700);}
.vsp-avoid li:last-child{border-bottom:none;}
.vsp-avoid li::before{content:"✕";color:var(--red);font-weight:700;flex-shrink:0;}
.vsp-pod-wrap{padding:16px 18px;}
.vsp-pod{font-family:inherit;font-size:13.5px;color:var(--n700);line-height:1.7;white-space:pre-wrap;background:var(--n50);border:1px solid var(--n200);border-radius:var(--r);padding:13px;margin:0;}
.vsp-pod-edit{width:100%;min-height:160px;font-family:inherit;font-size:13.5px;color:var(--n700);line-height:1.7;border:1px solid var(--blue);border-radius:var(--r);padding:13px;outline:none;resize:vertical;}
.vsp-pod-btns{display:flex;gap:8px;margin-top:10px;}

/* Quiz */
.vsp-quiz{overflow:hidden;}
.vsp-quiz-bar{height:5px;background:var(--n200);}
.vsp-quiz-bar-fill{height:100%;background:var(--blue);transition:width .3s;}
.vsp-quiz-info{padding:8px 18px;font-size:12px;color:var(--n400);font-weight:500;border-bottom:1px solid var(--n200);background:var(--n50);display:flex;gap:12px;}
.vsp-quiz-score{color:var(--blue);}
.vsp-quiz-slide{padding:18px;display:none;}
.vsp-quiz-slide.active{display:block;}
.vsp-quiz-q{font-size:15px;font-weight:600;color:var(--n900);margin:0 0 14px;line-height:1.5;}
.vsp-quiz-opts{display:flex;flex-direction:column;gap:7px;}
.vsp-quiz-opt{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border:1.5px solid var(--n300);border-radius:var(--r);cursor:pointer;font-size:13.5px;color:var(--n700);line-height:1.5;background:var(--n0);transition:all .12s;user-select:none;}
.vsp-quiz-opt:hover:not(.answered){border-color:var(--blue);background:var(--blue-bg);}
.vsp-quiz-opt.correct{border-color:var(--green);background:var(--green-bg);color:var(--green);font-weight:500;}
.vsp-quiz-opt.wrong  {border-color:var(--red);background:var(--red-bg);color:var(--red);}
.vsp-quiz-opt-l{min-width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;opacity:.6;transition:all .12s;}
.vsp-quiz-opt.correct .vsp-quiz-opt-l,.vsp-quiz-opt.wrong .vsp-quiz-opt-l{opacity:1;background:currentColor;color:#fff;}
.vsp-quiz-exp{margin-top:10px;padding:9px 13px;background:var(--n50);border-left:3px solid var(--blue);font-size:13px;color:var(--n600);line-height:1.6;display:none;border-radius:0 var(--r) var(--r) 0;}
.vsp-quiz-exp.show{display:block;}
.vsp-quiz-result{padding:36px 18px;text-align:center;}
.vsp-quiz-pct{font-size:52px;font-weight:800;color:var(--blue);letter-spacing:-2px;margin-bottom:8px;}
.vsp-quiz-lbl{font-size:18px;font-weight:700;color:var(--n800);margin-bottom:5px;}
.vsp-quiz-sub{font-size:14px;color:var(--n400);margin-bottom:16px;}
.vsp-quiz-nav{display:flex;justify-content:space-between;padding:12px 18px;background:var(--n50);border-top:1px solid var(--n200);}
.vsp-quiz-btn{font-family:inherit;font-size:13px;font-weight:500;padding:7px 15px;border:1px solid var(--n300);background:var(--n0);color:var(--n600);border-radius:var(--r);cursor:pointer;transition:all .12s;}
.vsp-quiz-btn:hover:not(:disabled){border-color:var(--blue);color:var(--blue);}
.vsp-quiz-btn:disabled{opacity:.35;cursor:not-allowed;}
.vsp-quiz-btn--p{background:var(--blue);border-color:var(--blue);color:#fff;}
.vsp-quiz-btn--p:hover:not(:disabled){background:var(--blue-h);}

/* Debug */
.vsp-debug{margin-top:14px;border:1px solid var(--n200);border-radius:12px;overflow:hidden;}
.vsp-debug-toggle{width:100%;padding:10px 16px;background:var(--n50);border:none;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--n500);text-align:left;transition:color .12s;}
.vsp-debug-toggle:hover{color:var(--n700);}
.vsp-debug-body{background:#111827;padding:14px;max-height:300px;overflow:auto;}
.vsp-debug-body pre{font-family:monospace;font-size:12px;line-height:1.6;color:#a3e635;margin:0;white-space:pre-wrap;}