/* Personality test styles for Pathuniq */
:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa4b2;
  --accent:#00b4d8;
  --accent-2:#007bff;
  --glass: rgba(255,255,255,0.04);
  --radius:14px;
  --soft-shadow: 0 8px 24px rgba(3,7,18,0.6);
  --glass-border: rgba(255,255,255,0.04);
}

/* Navigation / Back link */
.pn-nav{max-width:1100px;margin:8px auto;padding:0 18px}
.pn-nav-inner{display:flex;align-items:center}
.pn-back{display:inline-block;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.02);color:var(--accent);text-decoration:none;border:1px solid rgba(255,255,255,0.02);font-weight:600;box-shadow:0 6px 18px rgba(3,7,18,0.4);transition:transform .14s,box-shadow .14s}
.pn-back:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,180,216,0.06)}

/* Layout */
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;color:#e6eef8;background:linear-gradient(180deg,#071029 0%, #081426 60%);}
.pn-wrapper{min-height:100vh;display:flex;flex-direction:column}

/* Hero */
.pn-hero{padding:48px 18px 24px;}
.pn-hero-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:28px}
.pn-hero-copy{flex:1}
.pn-brand{display:inline-block;font-weight:700;color:var(--accent);letter-spacing:0.6px}
.pn-hero h1{font-size:clamp(22px,4vw,40px);margin:10px 0 8px}
.pn-sub{color:var(--muted);margin:0 0 18px}
.pn-start{display:inline-block;padding:10px 18px;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),var(--accent));color:white;text-decoration:none;cursor:pointer;box-shadow:0 6px 18px rgba(0,180,216,0.18);transition:transform .18s,box-shadow .18s}
.pn-start:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,180,216,0.14)}
.pn-hero-art{width:380px;flex:0 0 380px}

/* Test container */
.pn-test{max-width:920px;margin:22px auto;padding:18px;display:grid;grid-template-columns:1fr;gap:16px}
.pn-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);padding:18px;box-shadow:var(--soft-shadow);border:1px solid var(--glass-border)}

/* Progress */
.pn-progress{height:10px;background:rgba(255,255,255,0.03);border-radius:999px;overflow:hidden;margin-bottom:16px}
.pn-progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .5s ease}

.pn-qbox{min-height:160px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pn-q{margin:0;color:white}

.pn-options{display:flex;flex-direction:column;gap:10px;width:100%}
.pn-option{background:var(--glass);padding:12px;border-radius:12px;border:1px solid transparent;color:#dbeafe;cursor:pointer;display:flex;align-items:center;gap:12px;transition:transform .18s,background .18s,box-shadow .18s}
.pn-option:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(2,6,22,0.6)}
.pn-option[data-selected="true"]{background:linear-gradient(90deg, rgba(0,123,255,0.12), rgba(0,180,216,0.08));border-color:rgba(0,180,216,0.14)}
.pn-option .pn-option-key{min-width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.04);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent-2);}
.pn-option .pn-option-text{flex:1}

/* Footer buttons */
.pn-footer{display:flex;justify-content:space-between;gap:12px;margin-top:12px}
.pn-btn{padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:600}
.pn-btn-primary{background:linear-gradient(90deg,var(--accent-2),var(--accent));color:white;box-shadow:0 8px 20px rgba(0,123,255,0.14)}
.pn-btn-secondary{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.pn-btn[disabled]{opacity:0.45;cursor:not-allowed}

/* Result card */
.pn-result{display:none;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;box-shadow:var(--soft-shadow);border:1px solid var(--glass-border);}
.pn-result.show{display:block}
.pn-result h3{margin:0 0 8px}
.pn-type-badge{display:inline-block;padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,#7c3aed,#00b4d8);color:white;font-weight:700}
.pn-careers{margin-top:10px}
.pn-careers li{margin-bottom:6px}

/* Responsive */
@media (max-width:900px){
  .pn-hero-inner{flex-direction:column;align-items:flex-start}
  .pn-hero-art{width:100%;height:auto}
  .pn-test{padding:12px}
}

@media (max-width:520px){
  .pn-card{padding:12px}
  .pn-q{font-size:16px}
  .pn-option{padding:10px}
  .pn-hero{padding:28px 16px}
}

/* Small animation helpers */
.fade-in-enter{animation:fadeIn .36s ease both}
.fade-out-leave{animation:fadeOut .24s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fadeOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}

/* Restart button */
.pn-restart{margin-top:14px;display:inline-block}