/* ── Diagnostic Tool Styles ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:#020817;color:#fff;min-height:100vh;overflow-x:hidden}

.diagnostic-app{position:relative;min-height:100vh;width:100%}
.diag-screen{position:relative;min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.diag-bg-pattern{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(0,163,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,163,255,0.03) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at center,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center,black 20%,transparent 70%)}
.diag-bg-pattern::before{content:'';position:fixed;top:-20rem;right:-10rem;width:40rem;height:40rem;border-radius:50%;background:rgba(0,163,255,0.08);filter:blur(120px)}
.diag-bg-pattern::after{content:'';position:fixed;bottom:-20rem;left:-10rem;width:35rem;height:35rem;border-radius:50%;background:rgba(139,92,246,0.06);filter:blur(120px)}

.diag-container{position:relative;z-index:1;width:100%;max-width:36rem;margin:0 auto}
.diag-card{border-radius:1.5rem;border:1px solid rgba(255,255,255,0.08);background:rgba(11,20,38,0.9);padding:2rem;backdrop-filter:blur(20px);box-shadow:0 20px 60px rgba(0,0,0,0.4)}

/* Welcome screen */
.diag-card-welcome{text-align:center}
.diag-brand{display:flex;justify-content:center;margin-bottom:1rem}
.diag-brand-icon{width:3rem;height:3rem;color:#00A3FF}
.diag-badge{display:inline-flex;align-items:center;border-radius:9999px;border:1px solid rgba(0,163,255,0.2);background:rgba(0,163,255,0.1);padding:.375rem 1rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#7DD3FC;margin-bottom:1rem}
.diag-title{font-size:1.75rem;font-weight:800;line-height:1.2;letter-spacing:-.02em;margin-bottom:.75rem}@media(min-width:640px){.diag-title{font-size:2.25rem}}
.diag-desc{font-size:.875rem;line-height:1.6;color:#94A3B8;margin-bottom:1.5rem;max-width:30rem;margin-left:auto;margin-right:auto}
.diag-desc strong{color:#fff}

.diag-features{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1.5rem}
.diag-feature{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.75rem;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);font-size:.75rem;color:#94A3B8}
.diag-feature-icon{width:1rem;height:1rem;color:#22C55E;flex-shrink:0}

/* Form fields */
.diag-form{text-align:left}.diag-form .diag-btn{width:100%}
.diag-field{margin-bottom:1rem}
.diag-field-full{grid-column:1/-1}
.diag-label{display:block;margin-bottom:.375rem;font-size:.8125rem;font-weight:600;color:#E2E8F0}
.diag-optional{font-weight:400;color:#64748B;font-size:.75rem}
.diag-input{width:100%;border-radius:.75rem;border:1px solid rgba(255,255,255,0.1);background:#020817;padding:.75rem 1rem;font-size:.875rem;color:#fff;outline:none;transition:border-color .2s,box-shadow .2s;color-scheme:dark}
.diag-input::placeholder{color:#64748B}
.diag-input:focus{border-color:rgba(0,163,255,0.5);box-shadow:0 0 0 3px rgba(0,163,255,0.15)}
.diag-select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748B'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1.25rem;padding-right:2.5rem}
.diag-textarea{min-height:6rem;resize:vertical}

/* Buttons */
.diag-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;cursor:pointer;border:none;outline:none;transition:all .2s;text-decoration:none}
.diag-btn-primary{background:#00A3FF;color:#fff;box-shadow:0 4px 20px rgba(0,163,255,0.3)}.diag-btn-primary:hover{background:#0088DD;transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,163,255,0.4)}.diag-btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.diag-btn-ghost{background:rgba(255,255,255,0.08);color:#94A3B8;border:1px solid rgba(255,255,255,0.1)}.diag-btn-ghost:hover{background:rgba(255,255,255,0.12);color:#fff}
.diag-btn-success{background:#22C55E;color:#fff;box-shadow:0 4px 20px rgba(34,197,94,0.3)}.diag-btn-success:hover{background:#16A34A;transform:translateY(-1px)}
.diag-btn-icon{width:1.25rem;height:1.25rem}
.diag-btn-lg{width:100%;padding:1rem 2rem;font-size:1rem}
.diag-btn-sm{width:auto;padding:.5rem 1rem;font-size:.8125rem}
.diag-btn-primary .diag-btn-icon,.diag-btn-success .diag-btn-icon,.diag-btn-outline .diag-btn-icon{color:inherit}

.diag-btn-outline{background:transparent;color:#22C55E;border:2px solid #22C55E;box-shadow:0 0 24px rgba(34,197,94,0.12)}.diag-btn-outline:hover{background:rgba(34,197,94,0.08);transform:translateY(-1px);box-shadow:0 0 32px rgba(34,197,94,0.25)}.diag-btn-outline:disabled{opacity:.5;cursor:not-allowed;transform:none}

.diag-btn-text{display:inline-flex;align-items:center;gap:.5rem}

.diag-footnote{text-align:center;margin-top:1rem;font-size:.75rem;color:#64748B}

/* Questions screen */
.diag-screen-questions{flex-direction:column;padding-top:0;align-items:stretch}
.diag-topbar{position:sticky;top:0;z-index:20;background:rgba(2,8,23,0.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.06);padding:.75rem 1rem}
.diag-topbar-inner{display:flex;align-items:center;justify-content:space-between;max-width:48rem;margin:0 auto;width:100%}
.diag-topbar-left{display:flex;align-items:center;gap:.5rem}
.diag-topbar-icon{width:1.25rem;height:1.25rem;color:#00A3FF}
.diag-topbar-text{font-size:.8125rem;font-weight:600;color:#E2E8F0}
.diag-topbar-right{display:flex;align-items:center;gap:.5rem}
.diag-counter{font-size:.75rem;font-weight:500;color:#94A3B8}
.diag-progress-bar{height:3px;background:rgba(255,255,255,0.06);border-radius:9999px;margin-top:.625rem;max-width:48rem;margin-left:auto;margin-right:auto;overflow:hidden}
.diag-progress-fill{height:100%;background:linear-gradient(90deg,#00A3FF,#7DD3FC);border-radius:9999px;transition:width .5s cubic-bezier(.4,0,.2,1)}

.diag-questions-area{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;max-width:48rem;margin:0 auto;width:100%;min-height:calc(100vh - 5rem)}
.diag-question-card{width:100%;max-width:36rem;margin:0 auto}
.diag-q-number{font-size:.75rem;font-weight:700;color:#00A3FF;letter-spacing:.1em;margin-bottom:.5rem}
.diag-q-title{font-size:1.375rem;font-weight:700;line-height:1.3;margin-bottom:1.5rem}@media(min-width:640px){.diag-q-title{font-size:1.625rem}}

.diag-options{display:flex;flex-direction:column;gap:.75rem}
.diag-option{display:flex;align-items:center;gap:.75rem;width:100%;padding:1rem 1.25rem;border-radius:1rem;border:1.5px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:#94A3B8;font-size:.9375rem;text-align:left;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative}
.diag-option:hover{border-color:rgba(0,163,255,0.3);background:rgba(0,163,255,0.05);color:#E2E8F0}
.diag-option-selected{border-color:#00A3FF;background:rgba(0,163,255,0.12);color:#fff;box-shadow:0 0 20px rgba(0,163,255,0.15)}
.diag-option-letter{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:.5rem;background:rgba(255,255,255,0.06);font-size:.75rem;font-weight:700;color:#64748B;flex-shrink:0;transition:all .2s}
.diag-option-selected .diag-option-letter{background:#00A3FF;color:#fff}
.diag-option-text{flex:1}
.diag-option-check{margin-left:auto;width:1.5rem;height:1.5rem;color:#00A3FF;flex-shrink:0}

.diag-q-footer{display:flex;justify-content:space-between;margin-top:2rem;gap:.75rem}

/* Results screen */
.diag-screen-results{min-height:100vh}
.diag-score-wrap{display:flex;justify-content:center;margin-bottom:2rem}
.diag-score-ring{position:relative;width:8rem;height:8rem}@media(min-width:640px){.diag-score-ring{width:10rem;height:10rem}}
.diag-score-svg{transform:rotate(-90deg);width:100%;height:100%}
.diag-score-bg{fill:none;stroke:rgba(255,255,255,0.06);stroke-width:6}
.diag-score-fill{fill:none;stroke:#00A3FF;stroke-width:6;stroke-linecap:round;stroke-dasharray:328;stroke-dashoffset:328;transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1)}
.diag-score-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.diag-score-value{font-size:2.5rem;font-weight:800;color:#fff;line-height:1}@media(min-width:640px){.diag-score-value{font-size:3.25rem}}
.diag-score-label{font-size:.75rem;font-weight:600;color:#64748B;text-transform:uppercase;letter-spacing:.05em}

.diag-result-content{text-align:center}
.diag-result-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.25rem 1rem;font-size:.8125rem;font-weight:600;margin-bottom:1rem}
.diag-badge-red{background:rgba(239,68,68,0.1);color:#FCA5A5;border:1px solid rgba(239,68,68,0.2)}
.diag-badge-amber{background:rgba(245,158,11,0.1);color:#FDE68A;border:1px solid rgba(245,158,11,0.2)}
.diag-badge-blue{background:rgba(59,130,246,0.1);color:#93C5FD;border:1px solid rgba(59,130,246,0.2)}
.diag-badge-green{background:rgba(34,197,94,0.1);color:#86EFAC;border:1px solid rgba(34,197,94,0.2)}

.diag-result-title{font-size:1.375rem;font-weight:700;line-height:1.3;margin-bottom:1rem}@media(min-width:640px){.diag-result-title{font-size:1.625rem}}
.diag-result-title span{color:#00A3FF}
.diag-result-desc{font-size:.875rem;line-height:1.6;color:#94A3B8;max-width:32rem;margin:0 auto 1.5rem}

.diag-recommendations{text-align:left;margin-bottom:1.5rem}
.diag-rec-title{font-size:1rem;font-weight:700;margin-bottom:.75rem;color:#E2E8F0}
.diag-rec-list{display:flex;flex-direction:column;gap:.5rem}
.diag-rec-item{display:flex;align-items:center;gap:.625rem;padding:.625rem 1rem;border-radius:.75rem;background:rgba(0,163,255,0.06);border:1px solid rgba(0,163,255,0.12);font-size:.875rem;color:#94A3B8}
.diag-rec-icon{width:1.125rem;height:1.125rem;color:#22C55E;flex-shrink:0}

.diag-opportunities{margin-bottom:1.5rem}
.diag-opp-title{font-size:1rem;font-weight:700;margin-bottom:.75rem;color:#E2E8F0;text-align:left}
.diag-opp-grid{display:flex;flex-wrap:wrap;gap:.5rem}
.diag-opp-chip{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:9999px;background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.2);font-size:.75rem;font-weight:500;color:#C4B5FD}
.diag-opp-icon{width:.875rem;height:.875rem;color:#22C55E;flex-shrink:0}

/* Form screen */
.diag-card-form{text-align:center}
.diag-form-title{font-size:1.25rem;font-weight:700;line-height:1.3;margin-bottom:.75rem}@media(min-width:640px){.diag-form-title{font-size:1.5rem}}
.diag-form-desc{font-size:.8125rem;line-height:1.6;color:#94A3B8;margin-bottom:1.5rem}
.diag-form-grid{display:grid;grid-template-columns:1fr;gap:0}@media(min-width:480px){.diag-form-grid{grid-template-columns:1fr 1fr;gap:0 .75rem}}

/* Success screen */
.diag-card-success{text-align:center;padding:3rem 2rem}
.diag-success-icon{display:flex;justify-content:center;margin-bottom:1rem}
.diag-success-icon svg{width:4rem;height:4rem;color:#22C55E}
.diag-success-title{font-size:1.5rem;font-weight:700;margin-bottom:.75rem}
.diag-success-desc{font-size:.875rem;line-height:1.6;color:#94A3B8;margin-bottom:1.5rem}

/* Animations */
.diag-fade-in-enter-active{animation:diagFadeIn .5s cubic-bezier(.4,0,.2,1) both}
.diag-slide-in-enter-active{animation:diagSlideIn .45s cubic-bezier(.22,1,.36,1) both}
.diag-slide-out-leave-active{animation:diagSlideOut .3s cubic-bezier(.4,0,.2,1) both}

@keyframes diagFadeIn{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}
@keyframes diagSlideIn{from{opacity:0;transform:translateX(2rem)}to{opacity:1;transform:translateX(0)}}
@keyframes diagSlideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-2rem)}}

/* Responsive */
@media(max-width:639px){
  .diag-screen{padding:1rem}
  .diag-card{padding:1.5rem 1.25rem;border-radius:1.25rem}
  .diag-title{font-size:1.5rem}
  .diag-q-title{font-size:1.125rem}
  .diag-option{padding:.75rem 1rem;font-size:.875rem}
  .diag-option-letter{width:1.75rem;height:1.75rem;font-size:.6875rem}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .diag-progress-fill{transition:none}
}