@font-face { font-family: 'Roboto Variable'; src: url('/assets/fonts/roboto-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Merriweather Sans Variable'; src: url('/assets/fonts/merriweather-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }

:root {
  --ms-pink: #ed2a7b; --ms-pink-subtle: #fce4ef; --ms-charcoal: #1a1a2e; --ms-charcoal-light: #232340;
  --ms-grey-50: #f8f8fb; --ms-grey-200: #e4e4ec; --ms-grey-300: #c8c8d8; --ms-grey-600: #5a5a72;
  --red: #d92d4a; --amber: #e8a317; --green: #1f9d6b; --info: #a5a5b8;
  --font-heading: 'Roboto Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Merriweather Sans Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-sm: 5px; --radius-md: 6px; --radius-lg: 16px;
  font-family: var(--font-body); font-weight: 300; color: #212529; background: var(--ms-grey-50);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--ms-grey-50); }
#root { min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.01em; color: var(--ms-charcoal); }
strong, b { font-weight: 700; }
button, th, label, nav a, .btn, .tab { font-family: var(--font-heading); font-weight: 500; }
a { color: var(--ms-charcoal); }
input, select, textarea { font: inherit; font-weight: 400; border: 1px solid var(--ms-grey-300); border-radius: var(--radius-sm); padding: .5rem .6rem; background: #fff; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ms-pink); box-shadow: 0 0 0 3px var(--ms-pink-subtle); }
textarea { min-height: 220px; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }

/* shell */
.topbar { background: var(--ms-charcoal); border-bottom: 2px solid var(--ms-pink); color: #fff; }
.topbar-in { max-width: 72rem; margin: 0 auto; padding: .7rem 1rem; display: flex; align-items: center; gap: 1.5rem; }
.lockup { display: flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-family: var(--font-heading); font-weight: 700; white-space: nowrap; }
.lockup svg { color: var(--ms-pink); }
.topbar nav { display: flex; gap: 1rem; flex: 1; }
.topbar nav a { color: rgba(255,255,255,.8); text-decoration: none; font-size: .9rem; }
.topbar nav a:hover, .topbar nav a.on { color: #fff; }
.who { font-size: .8rem; color: rgba(255,255,255,.7); white-space: nowrap; }
.who a { color: rgba(255,255,255,.7); margin-left: .6rem; }
main { max-width: 72rem; width: 100%; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; }
.head h1 { margin: 0 0 .25rem; font-size: 1.6rem; }
.muted { color: var(--ms-grey-600); font-size: .85rem; }
.card { background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(26,26,46,.06); border: 1px solid var(--ms-grey-200); }
.pad { padding: 1.25rem; }
.btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--ms-grey-300); background: #fff; color: var(--ms-charcoal); border-radius: var(--radius-md); padding: .5rem .9rem; cursor: pointer; text-decoration: none; font-size: .9rem; }
.btn-primary { background: var(--ms-charcoal); border-color: var(--ms-charcoal); color: #fff; }
.btn-primary:hover { background: var(--ms-charcoal-light); }
.btn:disabled { opacity: .5; cursor: default; }
.err { color: var(--red); font-size: .85rem; margin: .5rem 0 0; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th { text-align: left; font-size: .75rem; color: var(--ms-grey-600); padding: .6rem .75rem; border-bottom: 1px solid var(--ms-grey-200); white-space: nowrap; }
td { padding: .55rem .75rem; border-bottom: 1px solid var(--ms-grey-200); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; border-radius: 999px; padding: .1rem .5rem; font-size: .72rem; font-family: var(--font-heading); font-weight: 500; white-space: nowrap; background: var(--ms-grey-200); color: var(--ms-grey-600); }
.b-scanning { background: #dbeafe; color: #1d4ed8; } .b-done { background: #d1fae5; color: #047857; }
.b-host_challenge { background: #fef3c7; color: #b45309; } .b-unreachable { background: #ffedd5; color: #c2410c; } .b-error { background: #fee2e2; color: #b91c1c; }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; vertical-align: middle; flex-shrink: 0; }
.s-red { background: var(--red); } .s-amber { background: var(--amber); } .s-green { background: var(--green); } .s-info { background: var(--info); }
.red { color: var(--red); } .amber { color: #b7800f; }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--ms-grey-200); margin-bottom: 1rem; }
.tab { padding: .5rem .9rem; border: 0; background: none; cursor: pointer; color: var(--ms-grey-600); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.on { color: var(--ms-charcoal); border-bottom-color: var(--ms-pink); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.field label { font-size: .8rem; }
.check { display: flex; gap: .5rem; align-items: center; font-size: .85rem; }
.check input { width: auto; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.stats { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.stat { background: #fff; border: 1px solid var(--ms-grey-200); border-radius: 8px; padding: .5rem .8rem; font-size: .8rem; }
.stat b { font-family: var(--font-heading); font-size: 1.1rem; display: block; }

/* report */
.report section { margin-bottom: 1rem; }
.sec-head { display: flex; align-items: center; gap: .5rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--ms-grey-200); }
.sec-head h2 { margin: 0; font-size: 1.05rem; }
.item { display: flex; gap: .6rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--ms-grey-200); }
.item:last-child { border-bottom: 0; }
.item .dot { margin-top: .4rem; }
.item h3 { margin: 0 0 .2rem; font-size: .92rem; font-weight: 600; }
.item p { margin: 0; font-size: .85rem; line-height: 1.55; }
.wpg { padding: .7rem 1.25rem; background: var(--ms-grey-50); font-size: .8rem; color: var(--ms-grey-600); border-radius: 0 0 10px 10px; }
.intro { padding: 1rem 1.25rem; font-size: .9rem; }
details summary { cursor: pointer; font-family: var(--font-heading); font-size: .85rem; padding: .9rem 1.25rem; }
.log td { font-family: ui-monospace, Menlo, monospace; font-size: .75rem; }

/* login card (brand-mttr-app) */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: radial-gradient(ellipse 50% 45% at 82% 8%, rgba(237,42,123,.07), transparent 62%), radial-gradient(ellipse 55% 50% at 10% 96%, rgba(26,26,46,.07), transparent 62%), var(--ms-grey-50); }
.login-card { position: relative; width: min(360px, 90vw); background: #fff; border-radius: var(--radius-lg); padding: 2.25rem 2rem; overflow: hidden; box-shadow: 0 1px 2px rgba(26,26,46,.05), 0 12px 32px rgba(26,26,46,.09); }
.login-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ms-pink), var(--ms-charcoal)); }
.login-logo { display: block; height: 40px; width: auto; margin: 0 auto 1.1rem; }
.login-rule { height: 1px; background: var(--ms-grey-200); margin: 0 0 1.1rem; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: .65rem; color: var(--ms-charcoal); }
.login-brand svg { color: var(--ms-pink); flex-shrink: 0; }
.login-brand h1 { margin: 0; font-size: 1.35rem; }
.login-tagline { text-align: center; color: var(--ms-grey-600); font-size: .85rem; margin: .4rem 0 1.25rem; }
.login-foot { text-align: center; color: #8a8aa3; font-size: .72rem; margin: 1.1rem 0 0; }
.sso-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; border-radius: var(--radius-md); text-decoration: none; font-family: var(--font-heading); font-size: .9rem;
  background: var(--ms-charcoal); border: 1px solid var(--ms-charcoal); color: #fff; font-weight: 600; padding: .75rem; box-shadow: 0 6px 18px -10px rgba(26,26,46,.8); transition: background .15s ease, transform .15s ease; }
.sso-btn:hover { background: var(--ms-charcoal-light); transform: translateY(-1px); }
.sso-btn:focus-visible { outline: 2px solid var(--ms-pink); outline-offset: 2px; }
.sso-btn svg { color: var(--ms-pink); }
@media (prefers-reduced-motion: reduce) { .sso-btn { transition: none; } .sso-btn:hover { transform: none; } }

/* footer (brand-mttr-app) */
.foot { margin-top: auto; background: #13122E; }
.foot-in { max-width: 72rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: 1.5rem 1.25rem; }
.foot p { margin: 0; max-width: 36rem; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.6); }
.foot p strong { color: #fff; }
.foot img { height: 32px; width: auto; }
@media (max-width: 640px) { .topbar-in { flex-wrap: wrap; gap: .6rem 1rem; } .who { width: 100%; } }