/* ============================================================================
   thedarkmonster — assessments / engine.css
   Κοινά στυλ για όλα τα διαγνωστικά. Καμία εξάρτηση.
   ========================================================================= */

:root{
  --as-bg:#121212;
  --as-panel:#171a1d;
  --as-panel-2:#1d2126;
  --as-text:#f5f5f5;
  --as-muted:#a9b2bd;
  --as-line:rgba(0,245,212,.22);
  --as-cyan:#00f5d4;
  --as-purple:#9b5de5;
  --as-blue:#00bbf9;
  --as-red:#ff0054;
  --as-amber:#f8b400;
  --as-green:#45d32f;
}

.as-wrap{max-width:880px;margin:0 auto;padding:0 20px}

/* ---------- κεφαλίδα σελίδας ---------- */
.as-head{padding:36px 0 6px}
.as-kicker{display:inline-flex;align-items:center;gap:8px;font-family:Orbitron,monospace;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--as-cyan);margin-bottom:14px}
.as-dot{width:7px;height:7px;border-radius:50%;background:var(--as-cyan);box-shadow:0 0 8px var(--as-cyan)}
.as-head h1{font-family:Orbitron,monospace;font-size:1.9rem;line-height:1.25;margin:0 0 12px}
.as-lede{color:var(--as-muted);max-width:68ch;margin:0}
.as-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.as-meta span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:5px 11px;border-radius:20px;background:rgba(0,245,212,.08);border:1px solid rgba(0,245,212,.28);color:#0d0d0d;color:var(--as-cyan)}

/* ---------- κάρτα ---------- */
.as-card{background:var(--as-panel);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:26px;margin:26px 0;position:relative;overflow:hidden}
.as-card::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(180deg,var(--as-cyan),var(--as-purple))}

/* ---------- εισαγωγή ---------- */
.as-intro h2{font-family:Orbitron,monospace;font-size:1.05rem;margin:0 0 12px}
.as-intro p{color:var(--as-muted);margin:0 0 14px}
.as-list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px}
.as-list li{position:relative;padding-left:24px;font-size:.9rem;color:var(--as-muted)}
.as-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--as-cyan);box-shadow:0 0 7px rgba(0,245,212,.6)}
.as-list li b{color:var(--as-text)}

/* ---------- κουμπιά ---------- */
.as-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:10px;font-family:Montserrat,sans-serif;font-size:.86rem;font-weight:700;cursor:pointer;text-decoration:none;border:1px solid rgba(0,245,212,.4);background:rgba(0,245,212,.1);color:var(--as-cyan);transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
.as-btn:hover{background:var(--as-cyan);color:#06231f;box-shadow:0 0 20px rgba(0,245,212,.45);transform:translateY(-1px)}
.as-btn:focus-visible{outline:2px solid var(--as-cyan);outline-offset:2px}
.as-btn--solid{background:var(--as-cyan);color:#06231f;border-color:var(--as-cyan)}
.as-btn--solid:hover{background:#5cffee}
.as-btn--ghost{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:var(--as-muted)}
.as-btn--ghost:hover{background:rgba(255,255,255,.1);color:var(--as-text);box-shadow:none}
.as-btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.as-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ---------- μπάρα προόδου ---------- */
.as-progress{margin:22px 0 8px}
.as-progress-bar{height:4px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.as-progress-fill{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--as-cyan),var(--as-blue),var(--as-purple));transition:width .25s ease}
.as-progress-text{display:flex;justify-content:space-between;font-size:.74rem;color:var(--as-muted);margin-top:8px;letter-spacing:.05em}

/* ---------- ερώτηση ---------- */
.as-q{border:none;margin:0;padding:0}
.as-q legend{font-family:Orbitron,monospace;font-size:1.02rem;line-height:1.4;padding:0;margin:0 0 6px;color:var(--as-text)}
.as-q .as-q-help{color:var(--as-muted);font-size:.83rem;margin:0 0 18px}
.as-q .as-q-dim{display:inline-block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--as-purple);border:1px solid rgba(155,93,229,.4);background:rgba(155,93,229,.1);padding:3px 9px;border-radius:20px;margin-bottom:12px}
.as-options{display:flex;flex-direction:column;gap:10px}
.as-opt{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:11px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.as-opt:hover{border-color:rgba(0,245,212,.45);background:rgba(0,245,212,.05)}
.as-opt input{position:absolute;opacity:0;width:0;height:0}
.as-opt .as-mark{flex-shrink:0;width:19px;height:19px;border-radius:50%;border:2px solid rgba(255,255,255,.28);margin-top:2px;position:relative;transition:border-color .18s ease}
.as-opt .as-mark::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--as-cyan);transform:scale(0);transition:transform .18s ease}
.as-opt .as-opt-text{font-size:.91rem;line-height:1.5;color:var(--as-text)}
.as-opt:has(input:checked){border-color:var(--as-cyan);background:rgba(0,245,212,.1);box-shadow:0 0 0 1px rgba(0,245,212,.35) inset}
.as-opt:has(input:checked) .as-mark{border-color:var(--as-cyan)}
.as-opt:has(input:checked) .as-mark::after{transform:scale(1)}
.as-opt:has(input:focus-visible){outline:2px solid var(--as-cyan);outline-offset:2px}
/* fallback για browsers χωρίς :has() — το JS προσθέτει .is-checked */
.as-opt.is-checked{border-color:var(--as-cyan);background:rgba(0,245,212,.1);box-shadow:0 0 0 1px rgba(0,245,212,.35) inset}
.as-opt.is-checked .as-mark{border-color:var(--as-cyan)}
.as-opt.is-checked .as-mark::after{transform:scale(1)}
.as-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px}

/* ---------- αποτέλεσμα ---------- */
.as-result-score{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-bottom:6px}
.as-gauge{position:relative;width:132px;height:132px;flex-shrink:0}
.as-gauge svg{transform:rotate(-90deg);width:100%;height:100%}
.as-gauge .as-track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:9}
.as-gauge .as-val{fill:none;stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1)}
.as-gauge-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.as-gauge-num b{font-family:Orbitron,monospace;font-size:1.9rem;line-height:1}
.as-gauge-num span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--as-muted);margin-top:4px}
.as-band h2{font-family:Orbitron,monospace;font-size:1.35rem;margin:0 0 8px}
.as-band p{color:var(--as-muted);margin:0;max-width:52ch}

/* ---------- διαστάσεις ---------- */
.as-dims{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.as-dim-row{display:grid;grid-template-columns:1fr 46px;gap:10px;align-items:center}
.as-dim-top{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;margin-bottom:6px}
.as-dim-top span:last-child{color:var(--as-muted);font-family:monospace;font-size:.8rem}
.as-dim-track{height:7px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden}
.as-dim-fill{height:100%;border-radius:4px;transition:width .7s ease}

/* ---------- κενά / ενέργειες ---------- */
.as-gaps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.as-gap{padding:16px 18px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-left:3px solid var(--as-amber)}
.as-gap h3{margin:0 0 6px;font-size:.95rem;font-family:Montserrat,sans-serif;font-weight:700}
.as-gap p{margin:0 0 10px;font-size:.87rem;color:var(--as-muted)}
.as-gap .as-res{display:flex;flex-wrap:wrap;gap:8px}
.as-gap .as-res a{font-size:.8rem;color:var(--as-cyan);text-decoration:none;border-bottom:1px solid rgba(0,245,212,.3);padding-bottom:1px}
.as-gap .as-res a:hover{border-bottom-color:var(--as-cyan)}

.as-steps{list-style:none;margin:0;padding:0;counter-reset:as-step}
.as-steps li{counter-increment:as-step;position:relative;padding-left:34px;margin-bottom:11px;font-size:.89rem;color:var(--as-muted);line-height:1.55}
.as-steps li::before{content:counter(as-step);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:rgba(0,245,212,.12);border:1px solid rgba(0,245,212,.4);color:var(--as-cyan);font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:monospace}
.as-steps li b{color:var(--as-text)}

.as-section-title{font-family:Orbitron,monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--as-cyan);margin:0 0 14px}

.as-note{font-size:.8rem;color:var(--as-muted);margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}

.as-derived{background:rgba(0,187,249,.06);border:1px solid rgba(0,187,249,.3);border-radius:12px;padding:18px;margin-bottom:6px}
.as-derived h3{margin:0 0 10px;font-family:Orbitron,monospace;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--as-blue)}
.as-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:.87rem;margin:0}
.as-kv dt{color:var(--as-muted)}
.as-kv dd{margin:0;font-weight:700}

.as-hidden{display:none!important}

@media (max-width:640px){
  .as-head h1{font-size:1.45rem}
  .as-card{padding:20px}
  .as-result-score{gap:16px}
  .as-gauge{width:104px;height:104px}
  .as-gauge-num b{font-size:1.5rem}
  .as-nav{flex-direction:column-reverse}
  .as-nav .as-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .as-progress-fill,.as-dim-fill,.as-gauge .as-val{transition:none}
  .as-btn,.as-opt{transition:none}
}

@media print{
  header.site,.as-nav,.as-actions,.as-progress,footer.site .tags{display:none!important}
  html,body{background:#fff!important;color:#111!important}
  .as-card{border:1px solid #ccc;break-inside:avoid}
  .as-lede,.as-band p,.as-gap p,.as-steps li,.as-dim-top span:last-child,.as-note{color:#444!important}
  .as-gap{border-left:3px solid #999}
  .as-gauge .as-track{stroke:#ddd}
  .as-dim-track{background:#eee}
}