/* Nurzun TechStack Scanner — shared design system (elite, MY-first, no external fonts).
   Brand: emerald + indigo. Severity: emerald=good, amber=warn, red=critical.
   Performance: system font stack only (no Google Fonts download). */
:root{
  --brand:#0f766e; --brand-700:#0f766e; --brand-600:#0d9488; --brand-50:#f0fdfa;
  --accent:#4f46e5; --accent-600:#4338ca;
  --ink:#0f172a; --body:#334155; --muted:#64748b; --line:#e2e8f0; --bg:#f8fafc;
  --good:#16a34a; --good-bg:#f0fdf4; --warn:#d97706; --warn-bg:#fffbeb;
  --bad:#dc2626; --bad-bg:#fef2f2;
  --radius:14px; --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--body);-webkit-text-size-adjust:100%;line-height:1.55}
h1,h2,h3{color:var(--ink);letter-spacing:-.02em}
a{color:var(--brand-700);text-decoration:none}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brand-700);color:#fff;font-weight:700;font-size:15px;height:48px;padding:0 22px;
  border-radius:12px;transition:background .15s,transform .1s;border:none;cursor:pointer}
.btn-primary:hover{background:var(--brand-600)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}
.btn-accent{background:var(--accent);color:#fff;font-weight:700;height:48px;padding:0 22px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s;border:none;cursor:pointer}
.btn-accent:hover{background:var(--accent-600)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 16px;
  border:1px solid var(--line);border-radius:12px;color:var(--ink);font-weight:600;font-size:14px;background:#fff;transition:border-color .15s}
.btn-ghost:hover{border-color:var(--brand-600);color:var(--brand-700)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.input{width:100%;height:52px;padding:0 16px;border:1px solid var(--line);border-radius:12px;
  background:#fff;font-size:15px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
.input:focus{border-color:var(--brand-600);box-shadow:0 0 0 4px rgba(13,148,136,.12)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:5px 11px;border-radius:999px;line-height:1}
.badge-good{background:var(--good-bg);color:var(--good)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-bad{background:var(--bad-bg);color:var(--bad)}
.badge-free{background:#eef2ff;color:var(--accent)}
.kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-600)}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}
/* nav */
.ns-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.ns-nav .inner{max-width:1120px;margin:0 auto;padding:0 16px;height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ns-brand{font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-.03em}
.ns-brand b{color:var(--brand-700)}
.ns-links{display:flex;gap:2px;flex-wrap:wrap;align-items:center}
.ns-links a{color:var(--muted);font-size:13.5px;font-weight:600;padding:8px 11px;border-radius:9px}
.ns-links a:hover{background:var(--bg);color:var(--ink)}
.ns-links a.cta{background:var(--brand-700);color:#fff;margin-left:4px}
.ns-links a.cta:hover{background:var(--brand-600)}
/* trust bar */
.trustbar{background:#062b27;color:#cfeee9;font-size:12.5px}
.trustbar .inner{max-width:1120px;margin:0 auto;padding:9px 16px;display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:center}
.trustbar span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
/* footer */
.ns-foot{border-top:1px solid var(--line);background:#fff;margin-top:56px;padding:34px 16px;color:var(--muted);font-size:13px}
.ns-foot .inner{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.ns-foot a{color:var(--brand-700);margin:0 4px}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .7s linear infinite}
.spinner-dark{border:2px solid var(--line);border-top-color:var(--brand-700)}
@keyframes spin{to{transform:rotate(360deg)}}
.kv{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.kv .row{display:flex;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:14px}
.kv .row:last-child{border-bottom:none}
.kv .k{color:var(--muted);flex:0 0 170px}
.kv .v{color:var(--ink);text-align:right;word-break:break-word}
.section-t{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.score-ring{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:92px;height:92px;border-radius:50%;font-weight:800}
@media(max-width:680px){.ns-links a{padding:7px 8px;font-size:12.5px}.kv .k{flex-basis:120px}.trustbar .inner{gap:10px}}
/* ===== Tailwind-compatible utility layer (local, no CDN) ===== */
.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}
.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.flex-wrap{flex-wrap:wrap}.gap-3{gap:12px}.gap-4{gap:16px}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mx-auto{margin-left:auto;margin-right:auto}.ml-auto{margin-left:auto}
.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}
.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}
.py-2{padding-top:8px;padding-bottom:8px}.py-10{padding-top:40px;padding-bottom:40px}.py-12{padding-top:48px;padding-bottom:48px}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-10{margin-top:40px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.space-y-4>*+*{margin-top:16px}
.w-full{width:100%}.w-48{width:12rem}.w-56{width:14rem}.w-80{width:20rem}
.h-10{height:40px}.h-11{height:44px}.h-12{height:48px}
.text-center{text-align:center}.text-left{text-align:left}
.text-xs{font-size:12px}.text-sm{font-size:14px}.text-lg{font-size:18px}.text-xl{font-size:20px}
.text-2xl{font-size:24px}.text-3xl{font-size:30px}.text-5xl{font-size:48px}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-black{font-weight:900}
.text-white{color:#fff}.text-slate-300{color:#cbd5e1}.text-slate-400{color:#94a3b8}.text-slate-500{color:#64748b}
.text-slate-600{color:#475569}.text-slate-700{color:#334155}.text-slate-800{color:#1e293b}.text-slate-900{color:#0f172a}
.text-blue-600{color:#2563eb}.text-emerald-600{color:#059669}.text-orange-500{color:#f97316}.text-red-500{color:#ef4444}
.bg-white{background:#fff}.bg-slate-50{background:#f8fafc}.bg-slate-100{background:#f1f5f9}
.bg-blue-600{background:#2563eb}.hover\:bg-blue-700:hover{background:#1d4ed8}
.border{border:1px solid var(--line)}.border-b{border-bottom:1px solid var(--line)}.border-t{border-top:1px solid var(--line)}
.border-slate-200{border-color:#e2e8f0}.border-slate-300{border-color:#cbd5e1}
.hover\:border-blue-400:hover{border-color:#60a5fa}
.rounded{border-radius:8px}.rounded-lg{border-radius:12px}.rounded-xl{border-radius:16px}.rounded-2xl{border-radius:20px}
@media(max-width:680px){.grid-cols-3{grid-template-columns:repeat(1,minmax(0,1fr))}}
/* ===== RESPONSIVE SAFETY NET (mobile-first) ===== */
.max-w-md,.max-w-xl,.max-w-3xl,.max-w-4xl,.max-w-5xl,.max-w-6xl{width:100%}
.w-48,.w-56,.w-80{max-width:100%}
html,body{max-width:100%;overflow-x:hidden}
@media(max-width:768px){
  .grid-cols-3{grid-template-columns:repeat(1,minmax(0,1fr))}
  .max-w-5xl,.max-w-6xl,.max-w-4xl{max-width:100%}
  .text-5xl{font-size:34px}.text-3xl{font-size:24px}.text-2xl{font-size:20px}
  .px-4{padding-left:14px;padding-right:14px}.py-12{padding-top:32px;padding-bottom:32px}.py-10{padding-top:28px;padding-bottom:28px}
  .mt-10{margin-top:28px}.mt-8{margin-top:24px}.mb-8{margin-bottom:24px}
  .h-12{height:44px}.h-11{height:42px}
}
@media(max-width:480px){
  .text-5xl{font-size:28px}.text-3xl{font-size:22px}
  .px-4{padding-left:12px;padding-right:12px}
  .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .w-48,.w-56,.w-80{width:100%}
}
/* Neutralize inline min-width/width that overflow phones (inline styles beat normal CSS, so !important) */
@media(max-width:768px){
  *[style*="min-width"]{min-width:0!important}
  *[style*="width:760px"]{width:100%!important}
  *[style*="width:620px"]{width:100%!important}
  *[style*="width:520px"]{width:100%!important}
  *[style*="width:320px"]{width:100%!important;max-width:100%!important}
}

/* Legal footer links */
.legal-footer{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.legal-footer a{font-size:12.5px;color:var(--muted);font-weight:600;text-decoration:none}
.legal-footer a:hover{color:var(--brand-700)}
