/* Security Awareness Training - Frontend CSS v1.1.0
   Full Responsive: 320px ~ 2560px */

/* ===== RESET / BASE ===== */
.sat-wrap{max-width:960px;margin:0 auto;width:100%;overflow-x:hidden}
.sat-wrap *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--bg:#0a0e17;--bg2:#131a2b;--card:#1a2332;--txt:#e0e6ed;--txt2:#8899aa;--accent:#00d4aa;--accent2:#00f0c0;--danger:#ff4757;--warn:#ffa502;--ok:#2ed573;--border:#2a3a4a}

/* ===== HEADER ===== */
.sat-header{background:linear-gradient(135deg,#0d1321 0%,#1a2332 50%,#0d2137 100%);border-bottom:2px solid var(--accent);padding:clamp(1rem,4vw,2.5rem);text-align:center;border-radius:12px 12px 0 0;position:relative;overflow:hidden}
.sat-header::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,212,170,.08) 0%,transparent 70%);pointer-events:none}
.sat-header h1{font-size:clamp(1.1rem,4vw,1.8rem);color:var(--accent);display:flex;align-items:center;justify-content:center;gap:.4rem;position:relative;z-index:1;margin:0;flex-wrap:wrap}
.sat-header p{color:var(--txt2);margin-top:.4rem;position:relative;z-index:1;font-size:clamp(.75rem,2.5vw,.95rem);padding:0 .5rem}

/* ===== TABS ===== */
.sat-tabs{display:flex;background:var(--bg2);border-bottom:2px solid var(--border);position:sticky;top:0;z-index:100;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.sat-tabs::-webkit-scrollbar{display:none}
.sat-tab{flex:1 0 auto;padding:clamp(.6rem,2vw,1rem) clamp(.5rem,2vw,1.2rem);text-align:center;cursor:pointer;border:none;background:transparent;color:var(--txt2);font-size:clamp(.75rem,2.5vw,.95rem);font-weight:600;transition:all .3s;border-bottom:3px solid transparent;white-space:nowrap;font-family:inherit;min-width:0}
.sat-tab:hover{color:var(--txt);background:rgba(0,212,170,.05)}
.sat-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:rgba(0,212,170,.08)}
.sat-panel{display:none;padding:clamp(.8rem,3vw,2rem);background:var(--bg);color:var(--txt);line-height:1.7}
.sat-panel.active{display:block}

/* ===== AD SLOT ===== */
.sat-ad-slot{margin:1.5rem 0}
.sat-ad-live{text-align:center;overflow:hidden}

/* ===== INTRO BOX ===== */
.intro-box{background:var(--card);border-radius:clamp(10px,2vw,16px);padding:clamp(1rem,3vw,2rem);margin-bottom:1.5rem;border-left:4px solid var(--accent)}
.intro-box h2{color:var(--accent);margin:0 0 .4rem;font-size:clamp(1rem,3vw,1.2rem)}
.intro-box p{color:var(--txt2);font-size:clamp(.8rem,2.5vw,.9rem);margin:0}

/* ==========================================
   QUIZ
========================================== */
.quiz-progress{background:var(--bg2);border-radius:20px;height:8px;margin-bottom:1.5rem;overflow:hidden}
.quiz-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:20px;transition:width .5s}
.quiz-status{display:flex;justify-content:space-between;margin-bottom:.8rem;color:var(--txt2);font-size:clamp(.8rem,2.5vw,.9rem);flex-wrap:wrap;gap:.3rem}
.quiz-card{background:var(--card);border:1px solid var(--border);border-radius:clamp(10px,2vw,16px);padding:clamp(1rem,3vw,2rem);margin-bottom:1.5rem}
.quiz-card .q-type{display:inline-block;padding:3px 10px;border-radius:20px;font-size:clamp(.65rem,2vw,.75rem);font-weight:700;margin-bottom:.8rem}
.q-type.email{background:rgba(0,212,170,.15);color:var(--accent)}
.q-type.sms{background:rgba(255,165,2,.15);color:var(--warn)}
.q-type.web{background:rgba(255,71,87,.15);color:var(--danger)}
.q-type.sns{background:rgba(46,213,115,.15);color:var(--ok)}
.q-type.phone{background:rgba(155,89,182,.15);color:#9b59b6}

.quiz-mock{background:#111;border-radius:10px;padding:clamp(.8rem,2.5vw,1.5rem);margin:1rem 0;font-size:clamp(.8rem,2.5vw,.9rem);border:1px solid #333;overflow-x:auto;word-break:break-word}
.quiz-mock .mock-from{color:var(--txt2);font-size:clamp(.7rem,2vw,.8rem);margin-bottom:.4rem;word-break:break-all}
.quiz-mock .mock-subject{font-weight:700;color:var(--txt);margin-bottom:.6rem;font-size:clamp(.85rem,2.5vw,1rem)}
.quiz-mock .mock-body{color:#ccc;line-height:1.8}
.quiz-mock .mock-url{color:var(--accent);font-size:clamp(.7rem,2vw,.85rem);word-break:break-all;display:inline-block;margin-top:.4rem;padding:4px 8px;background:rgba(0,212,170,.1);border-radius:6px;max-width:100%}
.quiz-mock .mock-url.suspicious{color:var(--danger);background:rgba(255,71,87,.1)}

.quiz-btns{display:flex;gap:.8rem;margin-top:1.2rem;flex-wrap:wrap}
.quiz-btn{flex:1 1 120px;padding:clamp(.7rem,2vw,.9rem);border:2px solid;border-radius:12px;font-size:clamp(.85rem,2.5vw,1rem);font-weight:700;cursor:pointer;transition:all .3s;background:transparent;font-family:inherit;min-width:0}
.quiz-btn.scam{border-color:var(--danger);color:var(--danger)}
.quiz-btn.scam:hover,.quiz-btn.scam:active{background:var(--danger);color:#fff}
.quiz-btn.safe{border-color:var(--ok);color:var(--ok)}
.quiz-btn.safe:hover,.quiz-btn.safe:active{background:var(--ok);color:#fff}
.quiz-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

.quiz-feedback{margin-top:1.2rem;padding:clamp(1rem,3vw,1.5rem);border-radius:12px;display:none;animation:satFadeIn .4s}
.quiz-feedback.correct{background:rgba(46,213,115,.1);border:1px solid rgba(46,213,115,.3)}
.quiz-feedback.wrong{background:rgba(255,71,87,.1);border:1px solid rgba(255,71,87,.3)}
.quiz-feedback h4{margin:0 0 .5rem;font-size:clamp(.9rem,2.5vw,1.05rem)}
.quiz-hints{margin-top:.8rem;padding-left:1.2rem}
.quiz-hints li{color:var(--txt2);font-size:clamp(.8rem,2.5vw,.9rem);margin-bottom:.3rem}
.quiz-next{margin-top:.8rem;padding:.6rem 1.5rem;background:var(--accent);color:var(--bg);border:none;border-radius:10px;font-weight:700;cursor:pointer;font-size:clamp(.85rem,2.5vw,.95rem);font-family:inherit;-webkit-appearance:none}

/* QUIZ RESULT */
.quiz-result{text-align:center;padding:clamp(1.5rem,4vw,3rem) 1rem}
.quiz-result .score-circle{width:clamp(130px,35vw,180px);height:clamp(130px,35vw,180px);border-radius:50%;margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;position:relative}
.quiz-result .score-circle::before{content:'';position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--accent) var(--pct),var(--border) var(--pct))}
.quiz-result .score-circle .inner{background:var(--card);border-radius:50%;width:calc(100% - 12px);height:calc(100% - 12px);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:1;font-size:clamp(1.8rem,6vw,2.5rem);font-weight:900}
.quiz-result .score-label{font-size:clamp(.7rem,2vw,.85rem);color:var(--txt2);font-weight:400}
.quiz-result .rank{font-size:clamp(1.1rem,3.5vw,1.5rem);margin-top:1rem;font-weight:700}
.quiz-result .rank-desc{color:var(--txt2);margin:.5rem auto 0;max-width:500px;font-size:clamp(.85rem,2.5vw,.95rem)}

/* ==========================================
   VIRUS SIM
========================================== */
.sim-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.8rem,2vw,1.5rem);margin-top:1.5rem}
.sim-card{background:var(--card);border:1px solid var(--border);border-radius:clamp(10px,2vw,16px);padding:clamp(1rem,3vw,1.8rem);cursor:pointer;transition:all .3s}
.sim-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,212,170,.15)}
.sim-card:active{transform:translateY(0)}
.sim-card .sim-icon{font-size:clamp(1.8rem,5vw,2.5rem);margin-bottom:.6rem}
.sim-card h3{font-size:clamp(.85rem,2.5vw,1.1rem);margin-bottom:.3rem}
.sim-card p{color:var(--txt2);font-size:clamp(.7rem,2vw,.85rem);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sim-card .sim-start{display:inline-block;margin-top:.6rem;padding:4px 14px;background:rgba(0,212,170,.15);color:var(--accent);border-radius:20px;font-size:clamp(.7rem,2vw,.8rem);font-weight:600}

/* OVERLAY */
.sim-overlay{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.9);backdrop-filter:blur(4px);padding:clamp(.5rem,2vw,1rem);overflow-y:auto;-webkit-overflow-scrolling:touch}
.sim-overlay.show{display:flex}
.sim-banner{position:fixed;top:0;left:0;right:0;background:var(--accent);color:var(--bg);text-align:center;padding:clamp(6px,1.5vw,10px);font-weight:900;z-index:100001;letter-spacing:1px;font-size:clamp(.65rem,2vw,.9rem)}
.sim-close{position:fixed;top:clamp(36px,8vw,50px);right:clamp(8px,2vw,20px);z-index:100001;padding:clamp(6px,1.5vw,10px) clamp(14px,3vw,24px);background:var(--accent);color:var(--bg);border:none;border-radius:10px;font-weight:700;cursor:pointer;font-size:clamp(.8rem,2.5vw,1rem);font-family:inherit;-webkit-appearance:none}
.sim-screen{width:100%;max-width:700px;max-height:calc(100vh - 80px);overflow-y:auto;border-radius:12px;margin-top:clamp(40px,8vw,60px)}

/* Fake Alert */
.fake-alert{background:#1a237e;color:#fff;padding:0;font-family:'Segoe UI',sans-serif}
.fake-alert .fa-bar{background:#0d47a1;padding:clamp(6px,1.5vw,8px) clamp(10px,2vw,16px);display:flex;align-items:center;gap:6px;font-size:clamp(.7rem,2vw,.85rem);flex-wrap:wrap}
.fake-alert .fa-body{padding:clamp(1rem,3vw,2rem);text-align:center}
.fake-alert .fa-icon{font-size:clamp(2.5rem,8vw,4rem);margin-bottom:.8rem}
.fake-alert h2{color:#ff5252;font-size:clamp(1rem,3.5vw,1.5rem);margin-bottom:.8rem}
.fake-alert .fa-msg{background:rgba(255,82,82,.1);border:1px solid #ff5252;border-radius:8px;padding:clamp(.7rem,2vw,1rem);margin:1rem 0;text-align:left;font-size:clamp(.75rem,2.2vw,.9rem);line-height:1.8;word-break:break-word}
.fake-alert .fa-phone{font-size:clamp(1.2rem,4vw,1.8rem);color:#ffeb3b;font-weight:900;margin:.8rem 0}
.fake-alert .fa-btn{display:inline-block;padding:clamp(8px,2vw,12px) clamp(20px,5vw,40px);background:#ff5252;color:#fff;border-radius:8px;font-weight:700;font-size:clamp(.85rem,2.5vw,1.1rem);cursor:default}
.fake-alert .fa-timer{color:#ffeb3b;font-size:clamp(.75rem,2vw,.9rem);margin-top:.8rem}

/* Ransomware */
.fake-ransom{background:#1a0000;color:#fff;padding:clamp(1rem,3vw,2rem);text-align:center;font-family:monospace}
.fake-ransom .fr-lock{font-size:clamp(3rem,10vw,5rem);margin-bottom:.8rem;animation:satPulse 2s infinite}
.fake-ransom h2{color:#ff1744;font-size:clamp(1rem,3.5vw,1.8rem);margin-bottom:.8rem;text-transform:uppercase;letter-spacing:clamp(1px,.5vw,3px)}
.fake-ransom .fr-msg{text-align:left;padding:clamp(.7rem,2vw,1rem);background:rgba(255,23,68,.05);border:1px solid #ff1744;border-radius:4px;margin:1rem 0;font-size:clamp(.75rem,2.2vw,.9rem);line-height:2;word-break:break-word}
.fake-ransom .fr-addr{background:#111;padding:clamp(8px,2vw,12px);border-radius:4px;font-size:clamp(.6rem,1.8vw,.85rem);color:#ffd600;word-break:break-all;margin:1rem 0}
.fake-ransom .fr-countdown{font-size:clamp(1.3rem,4vw,2rem);color:#ff1744;font-weight:900;margin:1rem 0}

/* Phishing */
.fake-phish{background:#f5f5f5;color:#333;padding:0;font-family:'Segoe UI',sans-serif}
.fake-phish .fp-url{background:#fff;padding:clamp(6px,1.5vw,8px) clamp(10px,2vw,16px);display:flex;align-items:center;gap:6px;font-size:clamp(.7rem,2vw,.85rem);border-bottom:1px solid #ddd;overflow:hidden}
.fake-phish .fp-url .url-text{background:#f0f0f0;padding:4px 10px;border-radius:20px;font-size:clamp(.65rem,1.8vw,.8rem);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fake-phish .fp-url .url-text .highlight{color:var(--danger);font-weight:700;text-decoration:underline}
.fake-phish .fp-form{max-width:320px;margin:0 auto;padding:0 clamp(1rem,3vw,2rem) clamp(1rem,3vw,2rem)}
.fake-phish .fp-form input{width:100%;padding:clamp(8px,2vw,12px);margin-bottom:10px;border:1px solid #ccc;border-radius:8px;font-size:clamp(.85rem,2.5vw,1rem);font-family:inherit}
.fake-phish .fp-form button{width:100%;padding:clamp(8px,2vw,12px);background:#0066cc;color:#fff;border:none;border-radius:8px;font-weight:700;font-size:clamp(.85rem,2.5vw,1rem);cursor:default}

/* Fake Update */
.fake-update{background:#0078d4;color:#fff;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,2rem);text-align:center;font-family:'Segoe UI',sans-serif}
.fake-update .fu-spinner{width:clamp(40px,10vw,60px);height:clamp(40px,10vw,60px);border:5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;margin:0 auto 1.2rem;animation:satSpin 1s linear infinite}
.fake-update h2{font-size:clamp(1rem,3vw,1.4rem);margin-bottom:.5rem}
.fake-update p{opacity:.8;margin-bottom:1rem;font-size:clamp(.8rem,2.5vw,.95rem)}
.fake-update .fu-progress{background:rgba(255,255,255,.2);border-radius:20px;height:8px;max-width:400px;margin:0 auto .8rem;overflow:hidden}
.fake-update .fu-progress-bar{height:100%;background:#fff;border-radius:20px;width:67%}
.fake-update .fu-pct{font-size:clamp(1.3rem,4vw,2rem);font-weight:700}
.fake-update .fu-btn{display:inline-block;margin-top:.8rem;padding:clamp(8px,2vw,10px) clamp(16px,4vw,30px);background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);border-radius:8px;color:#fff;font-weight:600;cursor:default;font-size:clamp(.8rem,2.2vw,.95rem);word-break:break-word}
.fake-update .fu-warn{margin-top:1rem;font-size:clamp(.7rem,2vw,.85rem);opacity:.7}

/* Sim Explanation */
.sim-explain{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:clamp(1rem,3vw,2rem);margin-top:1.5rem;display:none;animation:satFadeIn .5s}
.sim-explain h3{color:var(--accent);margin-bottom:1rem;font-size:clamp(.95rem,2.5vw,1.1rem)}
.sim-explain ul{padding-left:1.3rem;color:var(--txt2)}
.sim-explain ul li{margin-bottom:.5rem;line-height:1.7;font-size:clamp(.8rem,2.5vw,.9rem)}

/* ==========================================
   PASSWORD
========================================== */
.pw-container{max-width:640px;margin:0 auto}
.pw-input-wrap{position:relative;margin-bottom:1.2rem}
.pw-input-wrap input{width:100%;padding:clamp(.7rem,2vw,1rem) 3rem clamp(.7rem,2vw,1rem) clamp(.7rem,2vw,1rem);background:var(--bg2);border:2px solid var(--border);border-radius:12px;color:var(--txt);font-size:clamp(.9rem,2.5vw,1.1rem);font-family:monospace;transition:border-color .3s}
.pw-input-wrap input:focus{outline:none;border-color:var(--accent)}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--txt2);cursor:pointer;font-size:1.1rem;padding:4px}
.pw-meter{height:6px;background:var(--bg2);border-radius:20px;margin-bottom:.5rem;overflow:hidden}
.pw-meter-bar{height:100%;border-radius:20px;transition:all .5s;width:0}
.pw-strength-label{text-align:right;font-size:clamp(.8rem,2.2vw,.85rem);font-weight:700;margin-bottom:1.2rem}
.pw-criteria{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:1.5rem}
.pw-criteria .crit{display:flex;align-items:center;gap:.4rem;padding:clamp(.4rem,1.5vw,.6rem) clamp(.5rem,1.5vw,.8rem);background:var(--bg2);border-radius:8px;font-size:clamp(.75rem,2vw,.85rem);transition:all .3s}
.pw-criteria .crit.pass{background:rgba(46,213,115,.1);color:var(--ok)}
.pw-criteria .crit.fail{color:var(--txt2)}

.pw-section-title{color:var(--accent);margin-bottom:1rem;font-size:clamp(.95rem,2.5vw,1.1rem)}
.pw-crack-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.5rem}
.pw-crack-table{width:100%;border-collapse:collapse;min-width:360px}
.pw-crack-table th,.pw-crack-table td{padding:clamp(.5rem,1.5vw,.8rem) clamp(.4rem,1.5vw,1rem);text-align:left;border-bottom:1px solid var(--border);font-size:clamp(.75rem,2vw,.9rem);white-space:nowrap}
.pw-crack-table th{color:var(--accent);font-weight:600;background:var(--bg2)}
.pw-crack-table td:last-child{font-weight:700;text-align:right}

.pw-crack-sim{background:var(--card);border:1px solid var(--border);border-radius:clamp(10px,2vw,16px);padding:clamp(1rem,3vw,2rem);margin-top:1.5rem}
.pw-crack-sim h3{margin-bottom:.8rem;color:var(--accent);font-size:clamp(.95rem,2.5vw,1.1rem)}
.pw-crack-display{font-family:monospace;font-size:clamp(1.2rem,4vw,1.8rem);text-align:center;padding:clamp(.8rem,2vw,1.5rem);background:#111;border-radius:10px;margin-bottom:1rem;letter-spacing:clamp(1px,.5vw,4px);min-height:50px;display:flex;align-items:center;justify-content:center;color:var(--accent);word-break:break-all;overflow-wrap:break-word}
.pw-crack-btn{display:block;width:100%;padding:clamp(.7rem,2vw,.9rem);background:var(--danger);color:#fff;border:none;border-radius:10px;font-weight:700;font-size:clamp(.85rem,2.5vw,1rem);cursor:pointer;font-family:inherit;transition:all .3s;-webkit-appearance:none}
.pw-crack-btn:hover{opacity:.9}
.pw-crack-btn:disabled{opacity:.5;cursor:not-allowed}
.pw-crack-info{display:flex;justify-content:space-between;margin-top:.8rem;font-size:clamp(.75rem,2vw,.85rem);color:var(--txt2);flex-wrap:wrap;gap:.3rem}

.pw-tips{background:rgba(0,212,170,.05);border:1px solid rgba(0,212,170,.2);border-radius:clamp(10px,2vw,16px);padding:clamp(1rem,3vw,2rem);margin-top:1.5rem}
.pw-tips h3{color:var(--accent);margin-bottom:.8rem;font-size:clamp(.95rem,2.5vw,1.1rem)}
.pw-tips ul{padding-left:1.3rem}
.pw-tips ul li{margin-bottom:.4rem;color:var(--txt2);line-height:1.7;font-size:clamp(.8rem,2.2vw,.9rem)}

/* ===== ANIMATIONS ===== */
@keyframes satFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes satPulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes satSpin{to{transform:rotate(360deg)}}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* ── Small phones (≤ 374px) ── */
@media(max-width:374px){
 .sat-panel{padding:.6rem}
 .quiz-btns{flex-direction:column}
 .quiz-btn{flex:1 1 100%}
 .pw-criteria{grid-template-columns:1fr}
 .sim-grid{grid-template-columns:1fr}
 .sim-card{padding:.8rem}
 .sat-tab{padding:.6rem .4rem;font-size:.7rem}
 .quiz-mock{padding:.6rem}
 .intro-box{padding:.8rem}
}

/* ── Phones (375px – 480px) ── */
@media(min-width:375px) and (max-width:480px){
 .quiz-btns{flex-direction:column}
 .quiz-btn{flex:1 1 100%}
 .pw-criteria{grid-template-columns:1fr}
 .sim-grid{grid-template-columns:1fr}
}

/* ── Large phones / Small tablets (481px – 640px) ── */
@media(min-width:481px) and (max-width:640px){
 .sim-grid{grid-template-columns:repeat(2,1fr)}
 .pw-criteria{grid-template-columns:1fr 1fr}
}

/* ── Tablets (641px – 960px) ── */
@media(min-width:641px) and (max-width:960px){
 .sim-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── Desktop (> 960px) ── */
@media(min-width:961px){
 .sim-grid{grid-template-columns:repeat(4,1fr)}
}

/* ── Touch device helpers ── */
@media(hover:none){
 .sim-card:hover{transform:none;box-shadow:none}
 .quiz-btn:hover{background:transparent}
 .quiz-btn.scam:hover{background:transparent;color:var(--danger)}
 .quiz-btn.safe:hover{background:transparent;color:var(--ok)}
 .quiz-btn.scam:active{background:var(--danger);color:#fff}
 .quiz-btn.safe:active{background:var(--ok);color:#fff}
 .sim-card:active{border-color:var(--accent);transform:translateY(-1px)}
}

/* ── Landscape phone fix ── */
@media(max-height:500px) and (orientation:landscape){
 .sim-screen{max-height:calc(100vh - 60px)}
 .sim-banner{padding:5px;font-size:.7rem}
 .sim-close{top:30px;right:10px;padding:6px 14px;font-size:.8rem}
}