*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f0f4ff;color:#1e293b;min-height:100vh}

/* HEADER */
.header{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#a855f7 100%);color:white;padding:56px 20px 90px;text-align:center;position:relative;overflow:hidden}
.header::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.badge{display:inline-block;background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.3);border-radius:20px;padding:5px 14px;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:18px}
.header h1{font-size:2.6rem;font-weight:900;margin-bottom:10px;letter-spacing:-0.02em}
.header p{font-size:1.05rem;opacity:0.82;max-width:480px;margin:0 auto}

/* SEARCH */
.search-wrap{max-width:700px;margin:-38px auto 0;padding:0 20px;position:relative;z-index:10}
.search-box{background:white;border-radius:18px;box-shadow:0 24px 64px rgba(79,70,229,0.2),0 4px 16px rgba(0,0,0,0.08);padding:8px;display:flex;gap:8px}
.search-box input{flex:1;border:none;outline:none;padding:14px 18px;font-size:1rem;border-radius:12px;background:#f8fafc;color:#1e293b;min-width:0}
.search-box input::placeholder{color:#94a3b8}
.search-box button{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:white;border:none;border-radius:12px;padding:14px 28px;font-size:1rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .2s}
.search-box button:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(79,70,229,0.45)}
.search-box button:active{transform:translateY(0)}
.search-box button:disabled{opacity:0.55;cursor:not-allowed;transform:none;box-shadow:none}

/* HISTORY */
.history-wrap{max-width:700px;margin:12px auto 0;padding:0 20px}
.history-panel{background:white;border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,0.06);overflow:hidden;display:none}
.history-panel.visible{display:block}
.history-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #f1f5f9}
.history-title{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:#94a3b8}
.history-clear{font-size:0.75rem;color:#94a3b8;background:none;border:none;cursor:pointer;padding:2px 6px;border-radius:6px}
.history-clear:hover{background:#fee2e2;color:#dc2626}
.history-list{list-style:none;padding:0;margin:0;max-height:220px;overflow-y:auto}
.history-item{display:flex;align-items:center;gap:10px;padding:10px 18px;cursor:pointer;transition:background .15s;border-bottom:1px solid #f8fafc}
.history-item:last-child{border-bottom:none}
.history-item:hover{background:#f8fafc}
.history-score{flex-shrink:0;font-size:0.75rem;font-weight:800;padding:3px 9px;border-radius:20px;min-width:44px;text-align:center}
.history-url{flex:1;font-size:0.85rem;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.history-time{flex-shrink:0;font-size:0.72rem;color:#94a3b8}
.history-del{flex-shrink:0;background:none;border:none;cursor:pointer;color:#cbd5e1;font-size:1rem;padding:2px 4px;border-radius:4px;line-height:1}
.history-del:hover{color:#ef4444;background:#fee2e2}

/* MAIN */
.main{max-width:980px;margin:48px auto 60px;padding:0 20px}

/* WELCOME */
.welcome{text-align:center;padding:64px 20px;color:#94a3b8}
.welcome-icon{font-size:4.5rem;margin-bottom:20px;display:block}
.welcome h2{color:#64748b;font-size:1.4rem;font-weight:700;margin-bottom:10px}
.welcome p{font-size:0.95rem;line-height:1.6}
.checks-preview{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:24px}
.check-pill{background:white;border:1px solid #e2e8f0;border-radius:20px;padding:6px 14px;font-size:0.8rem;color:#475569;font-weight:500}

/* LOADING */
.loading{text-align:center;padding:64px 20px;display:none}
.spinner{width:52px;height:52px;border:5px solid #e2e8f0;border-top-color:#4f46e5;border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 20px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{color:#475569;font-size:1rem;font-weight:500}
.loading-url{color:#4f46e5;font-size:0.88rem;margin-top:6px;font-weight:600}
.loading-steps{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.step{background:white;border:1px solid #e2e8f0;border-radius:20px;padding:5px 12px;font-size:0.78rem;color:#94a3b8}
.step.active{border-color:#4f46e5;color:#4f46e5;background:#eef2ff}

/* ERROR */
.error-box{background:#fef2f2;border:1.5px solid #fecaca;border-radius:14px;padding:20px 24px;color:#dc2626;text-align:center;display:none;font-weight:500}

/* SCORE CARD */
.score-card{background:white;border-radius:20px;padding:32px 36px;box-shadow:0 4px 24px rgba(0,0,0,0.07);margin-bottom:28px;display:none;flex-direction:row;align-items:center;gap:36px}
.score-ring{flex-shrink:0;position:relative;width:140px;height:140px}
.score-ring svg{transform:rotate(-90deg)}
.score-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.score-num{font-size:2.4rem;font-weight:900;line-height:1;color:#1e293b}
.score-sub{font-size:0.72rem;color:#94a3b8;font-weight:600}
.score-info{flex:1;min-width:0}
.score-grade{font-size:1.5rem;font-weight:800;margin-bottom:6px}
.score-url{font-size:0.82rem;color:#64748b;word-break:break-all;margin-bottom:16px}
.score-stats{display:flex;flex-wrap:wrap;gap:12px}
.stat{background:#f8fafc;border-radius:10px;padding:10px 16px;text-align:center;min-width:72px}
.stat-label{font-size:0.7rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.stat-value{font-size:1.15rem;font-weight:800;color:#1e293b;margin-top:2px}

/* SECTION TITLES */
.section-title{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin-bottom:14px;padding-left:4px}

/* CHECKS GRID */
.checks-grid{display:none;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){
  .checks-grid{grid-template-columns:1fr}
  .score-card{flex-direction:column;text-align:center}
  .score-stats{justify-content:center}
  .header h1{font-size:1.9rem}
}

/* CHECK CARD */
.check-card{background:white;border-radius:16px;padding:18px 20px;box-shadow:0 2px 8px rgba(0,0,0,0.05);border-left:5px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .2s;animation:fadeUp .4s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.check-card:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,0,0,0.1)}
.check-card.pass{border-left-color:#22c55e}
.check-card.warning{border-left-color:#f59e0b}
.check-card.fail{border-left-color:#ef4444}
.check-card.error{border-left-color:#94a3b8}
.card-cat{font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:#94a3b8;margin-bottom:8px}
.card-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.card-icon{font-size:1.25rem}
.card-name{font-weight:700;font-size:0.9rem;flex:1}
.card-badge{font-size:0.7rem;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}
.badge-pass{background:#dcfce7;color:#16a34a}
.badge-warning{background:#fef9c3;color:#a16207}
.badge-fail{background:#fee2e2;color:#dc2626}
.badge-error{background:#f1f5f9;color:#64748b}
.card-msg{font-size:0.82rem;color:#64748b;margin-bottom:11px;line-height:1.5}
.card-bar{height:6px;background:#f1f5f9;border-radius:3px;overflow:hidden;margin-bottom:4px}
.card-fill{height:100%;border-radius:3px;width:0%;transition:width .8s cubic-bezier(.34,1.56,.64,1)}
.fill-pass{background:linear-gradient(90deg,#4ade80,#22c55e)}
.fill-warning{background:linear-gradient(90deg,#fde047,#f59e0b)}
.fill-fail{background:linear-gradient(90deg,#fca5a5,#ef4444)}
.card-score{font-size:0.72rem;color:#94a3b8;text-align:right}
.card-details{display:none;margin-top:12px;padding-top:12px;border-top:1px dashed #e2e8f0}
.card-details.open{display:block}
.det-item{font-size:0.78rem;color:#64748b;margin-bottom:4px;word-break:break-word}
.det-key{font-weight:700;color:#475569}
.det-list{list-style:disc;margin:4px 0 0 18px;padding:0}
.det-list li{font-size:0.78rem;color:#64748b;margin-bottom:2px}
.toggle-hint{font-size:0.7rem;color:#c7d2fe;float:right;margin-top:2px}

/* FOOTER */
.footer{text-align:center;padding:32px 20px;color:#94a3b8;font-size:0.82rem}
.footer a{color:#a5b4fc;text-decoration:none}