:root { --c-line: #e7ebf0; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: #f1f4f8; color: #1e293b; }
#root { height: 100%; }

/* buttons */
.mr-btn { border: 1px solid var(--c-line); background: #fff; color: #0f172a; border-radius: 8px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.mr-btn:hover { background: #f8fafc; }
.mr-btn:disabled { opacity: .5; cursor: default; }

/* skeleton + empty/error */
.gw-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mr-skel { height: 46px; border-radius: 10px; background: linear-gradient(90deg, #eef2f6 25%, #e2e8f0 37%, #eef2f6 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.gw-empty-b { color: #64748b; font-size: 13px; }
.gw-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin: 10px 0; }
.mr-insights { display: flex; gap: 8px; flex-wrap: wrap; }
.mr-chip { background: #faf5ff; border: 1px solid #e9d5ff; color: #6b21a8; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }

/* report cards */
.mr-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 6px; }
.mr-doc-card { background: #fff; border: 1px solid var(--c-line); border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.mr-doc-card:hover { box-shadow: 0 6px 20px rgba(15,23,42,.08); transform: translateY(-1px); }
.mr-doc-title { font-weight: 700; color: #0f172a; font-size: 14.5px; }
.mr-doc-meta { color: #94a3b8; font-size: 12px; margin: 4px 0 8px; }
.mr-doc-blurb { color: #475569; font-size: 13px; line-height: 1.45; min-height: 38px; }
.mr-doc-actions { display: flex; gap: 8px; margin-top: 12px; }

/* report overlay */
.mr-doc-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; z-index: 80; padding: 28px; }
.mr-doc-frame { background: #fff; border-radius: 14px; width: min(1100px, 96vw); height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.mr-doc-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--c-line); background: #f8fafc; }
.mr-doc-bar-title { font-weight: 700; color: #0f172a; font-size: 14px; }
.mr-doc-iframe { flex: 1; width: 100%; border: none; background: #fff; }

/* login */
.qa-login-wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 600px at 30% -10%, #1e1b4b, #0f172a); }
.qa-login { background: #fff; border-radius: 16px; padding: 30px 30px 26px; width: 340px; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.qa-login .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: #0f172a; margin-bottom: 4px; }
.qa-login .brand .logo { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #7c3aed, #db2777); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.qa-login .sub { color: #64748b; font-size: 12.5px; margin-bottom: 18px; }
.qa-login label { font-size: 12px; font-weight: 600; color: #0f172a; display: block; margin-top: 12px; }
.qa-login input { width: 100%; border: 1px solid var(--c-line); border-radius: 9px; padding: 10px 12px; font-size: 14px; font-family: inherit; margin-top: 5px; }
.qa-login button { width: 100%; margin-top: 18px; border: none; background: #6d28d9; color: #fff; border-radius: 9px; padding: 11px; font-weight: 700; font-size: 14px; cursor: pointer; }
.qa-login button:disabled { opacity: .6; cursor: default; }
.qa-login .err { color: #b91c1c; font-size: 12.5px; margin-top: 12px; min-height: 16px; }
