/* HERO */
.ps-hero {
display:grid;
grid-template-columns: 1fr 420px;
gap:20px;
}

/* LIST */
.ps-list {
padding-left:18px;
font-size:0.85rem;
color:rgba(199,210,254,0.9);
}

/* SCAN CARD */
.scan-card {
background: rgba(8,10,22,0.95);
border:1px solid rgba(120,144,255,0.4);
border-radius:16px;
padding:16px;
box-shadow:0 20px 40px rgba(0,0,0,0.7);
}

/* HEADER */
.scan-header {
font-size:0.9rem;
margin-bottom:10px;
display:flex;
align-items:center;
gap:6px;
}

.scan-dot {
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 10px #22c55e;
}

/* FORM */
.scan-form {
display:flex;
gap:8px;
}

.scan-form input {
flex:1;
background:#020617;
border:1px solid rgba(120,144,255,0.5);
border-radius:8px;
padding:8px;
color:#38bdf8;
font-family:monospace;
}

.scan-form button {
background:linear-gradient(90deg,#2563eb,#4f46e5);
border:none;
border-radius:8px;
padding:8px 14px;
color:white;
cursor:pointer;
}

/* STATUS */
#scanStatus {
font-size:12px;
color:#38bdf8;
margin-top:6px;
}

/* RESULT */
.scan-result {
display:none;
margin-top:10px;
}

.score-circle {
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(120,144,255,0.5);
margin-bottom:10px;
}

/* INFO */
.scan-info {
font-size:0.75rem;
color:rgba(148,163,184,0.8);
margin-top:8px;
}

/* EXPLAIN */
.ps-explain {
margin-top:20px;
display:grid;
grid-template-columns: repeat(3,1fr);
gap:16px;
}

/* MOBILE */
@media (max-width:900px){
.ps-hero {
grid-template-columns:1fr;
}
.ps-explain {
grid-template-columns:1fr;
}
}
.scan-result {
    display: none;
    margin-top: 14px;
}

.score-circle {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(120, 144, 255, 0.5);
    margin-bottom: 14px;
    background:
        radial-gradient(circle at 20% 20%, rgba(59,130,246,0.18), transparent 60%),
        rgba(3,7,18,0.92);
    box-shadow: 0 0 18px rgba(37,99,235,0.18);
}

.score-circle span {
    font-size: 1.3rem;
    font-weight: 700;
    color: #e5f0ff;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#findings {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.finding-item {
    border-radius: 12px;
    border: 1px solid rgba(120, 144, 255, 0.22);
    background: rgba(10, 12, 24, 0.82);
    padding: 10px 12px;
}

.finding-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #f3f6ff;
    margin-bottom: 4px;
}

.finding-detail {
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(199, 210, 254, 0.88);
    word-break: break-word;
}

.finding-pass {
    border-color: rgba(34, 197, 94, 0.35);
}

.finding-warn {
    border-color: rgba(250, 204, 21, 0.35);
}

.finding-fail {
    border-color: rgba(239, 68, 68, 0.35);
}

.finding-info {
    border-color: rgba(59, 130, 246, 0.35);
}

.scan-empty {
    font-size: 0.82rem;
    color: rgba(199, 210, 254, 0.75);
}
/* =========================
   RESULTS SECTION
========================= */

.ps-results {
    margin-top: 20px;
    display: none;
}

/* Findings Grid */
#findings {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Summary */
.summary-box {
    display: flex;
    gap: 14px;
    font-size: 0.85rem;
    margin-bottom: 12px;
    color: rgba(199,210,254,0.9);
}

/* Mini result oben */
.scan-mini-result {
    display: none;
    margin-top: 10px;
}

/* Scanner wieder klein halten */
.ps-right {
    width: 380px;
}

.ps-hero {
    grid-template-columns: 1fr 380px;
}

.fix-box {
    margin-top: 10px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(0, 200, 255, 0.08);
    border: 1px solid rgba(0, 200, 255, 0.2);
}

.fix-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: #38bdf8;
}

.fix-desc {
    font-size: 13px;
    opacity: 0.8;
    margin-bottom: 6px;
}

.fix-code {
    background: #020617;
    padding: 8px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 12px;
    overflow-x: auto;
}

.fix-box {
    margin-top: 10px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(0, 200, 255, 0.08);
    border: 1px solid rgba(0, 200, 255, 0.2);
}

.fix-title {
    font-weight: 600;
    color: #38bdf8;
    margin-bottom: 4px;
}

.fix-desc {
    font-size: 13px;
    opacity: 0.8;
    margin-bottom: 6px;
}

.fix-code {
    background: #020617;
    padding: 8px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 12px;
    overflow-x: auto;
}

.fix-box.locked {
    opacity: 0.6;
    text-align: center;
    font-style: italic;
}

.summary-locked-hint {
    margin-top: 8px;
    font-size: 13px;
    opacity: 0.7;
    text-align: center;
}
.summary-cta {
    margin-top: 12px;
    padding: 14px;
    border-radius: 10px;
    background: rgba(0, 200, 255, 0.06);
    border: 1px solid rgba(0, 200, 255, 0.2);
    text-align: center;
}

.cta-text {
    font-size: 14px;
    margin-bottom: 10px;
    opacity: 0.9;
}

.cta-button {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s ease;
}

.cta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(56, 189, 248, 0.4);
}