@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.fd-app {
	--fd-bg: #F8FAFC;
	--fd-card: #FFFFFF;
	--fd-primary: #111827;
	--fd-success: #10B981;
	--fd-danger: #EF4444;
	--fd-warning: #F59E0B;
	--fd-blue: #3B82F6;
	--fd-border: #E5E7EB;
	--fd-muted: #6B7280;
	--fd-nav-hover: #F9FAFB;
	--fd-nav-active: #F3F4F6;
	display: flex;
	min-height: 100vh;
	background: var(--fd-bg);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--fd-primary);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.fd-app * { box-sizing: border-box; }

/* ---------------- Sidebar ---------------- */
.fd-sidebar {
	width: 280px;
	flex-shrink: 0;
	background: #ffffff;
	border-right: 1px solid var(--fd-border);
	display: flex;
	flex-direction: column;
	padding: 20px 14px;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}
.fd-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; }
.fd-brand-mark { width: 34px; height: 34px; background: var(--fd-primary); color: #fff; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.fd-brand-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.fd-brand-sub { font-size: 12px; color: var(--fd-muted); }

.fd-nav { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.fd-nav-group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #9CA3AF; font-weight: 600; margin: 16px 10px 6px; }
.fd-nav-group:first-child { margin-top: 4px; }
.fd-nav a {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 10px; border-radius: 8px;
	color: #4B5563; text-decoration: none; font-size: 13.5px; font-weight: 500;
	transition: background .12s ease, color .12s ease;
}
.fd-nav a .fd-icon { flex-shrink: 0; opacity: .85; }
.fd-nav a:hover { background: var(--fd-nav-hover); }
.fd-nav a.active { background: var(--fd-nav-active); color: var(--fd-primary); font-weight: 600; }
.fd-nav a.active .fd-icon { opacity: 1; }
.fd-nav a.fd-nav-external { justify-content: space-between; }
.fd-nav-left { display: flex; align-items: center; gap: 10px; }
.fd-nav-external .fd-icon:last-child { width: 14px; height: 14px; opacity: .45; }

.fd-user { display: flex; align-items: center; gap: 10px; padding: 14px 10px 10px; border-top: 1px solid var(--fd-border); margin-top: 10px; }
.fd-user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #E5E7EB; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #374151; flex-shrink: 0; }
.fd-user-name { font-size: 13px; font-weight: 600; }
.fd-user-role { font-size: 11.5px; color: var(--fd-muted); }
.fd-user-links { display: flex; justify-content: space-between; padding: 4px 10px 0; }
.fd-user-links a { display: flex; align-items: center; gap: 5px; color: var(--fd-muted); text-decoration: none; font-size: 12.5px; }
.fd-user-links a:hover { color: var(--fd-primary); }
.fd-user-links .fd-icon { width: 14px; height: 14px; }

/* ---------------- Main content ---------------- */
.fd-main { flex: 1; padding: 32px 40px 60px; min-width: 0; }
.fd-main h1 { font-size: 27px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.fd-sub { color: var(--fd-muted); margin: 0 0 22px; font-size: 14px; }
.fd-breadcrumb { color: var(--fd-muted); font-size: 13px; margin-bottom: 10px; }
.fd-breadcrumb span { margin: 0 4px; }
.fd-page-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.fd-actions { display: flex; gap: 8px; }

/* ---------------- Stat cards ---------------- */
.fd-cards { display: grid; gap: 16px; margin-bottom: 24px; }
.fd-cards-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .fd-cards-5 { grid-template-columns: repeat(2, 1fr); } }
.fd-cards-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .fd-cards-4 { grid-template-columns: repeat(2, 1fr); } }
.fd-badge.fd-csp-directive { color: var(--fd-blue); background: #3B82F61A; font-family: var(--fd-mono, monospace); }
.fd-card {
	background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: 12px; padding: 20px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.fd-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(17,24,39,.06); }
.fd-card-label { font-size: 13px; color: var(--fd-muted); margin-bottom: 10px; }
.fd-card-value { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.fd-card-value.fd-warn { color: var(--fd-warning); }
.fd-card-value.fd-danger { color: var(--fd-danger); }

/* ---------------- Panels ---------------- */
.fd-grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
@media (max-width: 900px) { .fd-grid-2 { grid-template-columns: 1fr; } }
.fd-panel {
	background: var(--fd-card); border: 1px solid var(--fd-border); border-radius: 12px; padding: 22px; margin-bottom: 16px;
	transition: box-shadow .15s ease;
}
.fd-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.fd-panel-head h3 { margin: 0; font-size: 15.5px; font-weight: 600; }
.fd-panel-head a { font-size: 13px; color: var(--fd-muted); text-decoration: none; }
.fd-panel-head a:hover { color: var(--fd-primary); }
.fd-link-card h3 { font-size: 16px; margin: 0 0 6px; font-weight: 600; }
.fd-link-card p { color: var(--fd-muted); font-size: 13.5px; margin: 0 0 14px; line-height: 1.6; }
.fd-link-card a { font-weight: 600; text-decoration: none; color: var(--fd-primary); font-size: 13.5px; }

/* ---------------- Tables ---------------- */
.fd-simple-table, .fd-datatable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fd-simple-table th, .fd-datatable th { text-align: left; padding: 11px 10px; color: var(--fd-muted); font-weight: 600; font-size: 12.5px; border-bottom: 1px solid var(--fd-border); white-space: nowrap; }
.fd-simple-table td, .fd-datatable td { padding: 12px 10px; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
.fd-simple-table tbody tr:hover, .fd-datatable tbody tr:hover { background: #FAFBFC; }
.fd-muted { color: #9CA3AF; font-size: 11.5px; }
.fd-status-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #F1F5F9; }
.fd-status-row:last-child { border-bottom: none; }

/* DataTables plugin overrides to keep its default chrome from clashing */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
	border: 1px solid var(--fd-border); border-radius: 8px; padding: 6px 10px; font-size: 13px; margin-left: 6px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
	border-radius: 6px !important; padding: 4px 10px !important; margin-left: 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--fd-primary) !important; color: #fff !important; border: none !important;
}
.dataTables_wrapper .dataTables_info { color: var(--fd-muted); font-size: 12.5px; }

/* ---------------- Badges ---------------- */
.fd-badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; }

/* ---------------- Buttons ---------------- */
.fd-btn { border: none; border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.fd-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(17,24,39,.12); }
.fd-btn-dark { background: var(--fd-primary); color: #fff; }
.fd-btn-dark:hover { background: #1F2937; }
.fd-btn-outline { background: #fff; border: 1px solid var(--fd-border); color: var(--fd-primary); }
.fd-btn-outline:hover { background: #F9FAFB; }
.fd-link-btn { background: none; border: none; color: var(--fd-danger); cursor: pointer; font-size: 12px; padding: 0; font-weight: 500; }
.fd-link-btn:hover { text-decoration: underline; }

/* ---------------- Filter chips ---------------- */
.fd-filters { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.fd-chip { border: 1px solid var(--fd-border); background: #fff; border-radius: 8px; padding: 7px 15px; font-size: 13px; font-weight: 500; cursor: pointer; color: #374151; transition: background .12s ease; }
.fd-chip:hover { background: #F9FAFB; }
.fd-chip.active { background: var(--fd-primary); color: #fff; border-color: var(--fd-primary); }

/* ---------------- Select ---------------- */
.fd-status-select { border: 1px solid var(--fd-border); border-radius: 6px; padding: 4px 6px; font-size: 12px; background: #fff; color: var(--fd-primary); }

/* ---------------- Modal ---------------- */
.fd-modal { display: none; position: fixed; inset: 0; background: rgba(17,24,39,.5); z-index: 9999; align-items: center; justify-content: center; }
.fd-modal.open { display: flex; }
.fd-modal-box { background: #fff; border-radius: 14px; padding: 26px; width: 440px; max-width: 92vw; max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(17,24,39,.2); }
.fd-modal-box h3 { margin: 0 0 18px; font-size: 17px; font-weight: 700; }
.fd-modal-box form label { display: block; font-size: 13px; margin-bottom: 14px; color: #374151; font-weight: 500; }
.fd-modal-box form input, .fd-modal-box form select { width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--fd-border); border-radius: 8px; font-size: 14px; font-family: inherit; }
.fd-modal-box form input:focus, .fd-modal-box form select:focus { outline: 2px solid #111827; outline-offset: -1px; }
.fd-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------------- Inline forms (Team) ---------------- */
.fd-inline-form { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: end; }
.fd-inline-form label { font-size: 12.5px; font-weight: 500; color: #374151; }
.fd-inline-form input, .fd-inline-form select { width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--fd-border); border-radius: 8px; font-family: inherit; font-size: 13.5px; }
@media (max-width: 1000px) { .fd-inline-form { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- Toast ---------------- */
.fd-toast { position: fixed; top: 20px; right: 20px; background: var(--fd-primary); color: #fff; padding: 12px 18px; border-radius: 10px; z-index: 10000; font-size: 13.5px; font-weight: 500; box-shadow: 0 10px 25px rgba(17,24,39,.25); }
.fd-toast.error { background: var(--fd-danger); }

.fd-login-wrap { padding: 80px 40px; text-align: center; font-size: 15px; }

/* ---------------- Standalone login page ---------------- */
.fd-login-shell { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 100vh; padding: 20px; }
.fd-login-card { background: #fff; border: 1px solid var(--fd-border); border-radius: 14px; padding: 36px; width: 380px; max-width: 100%; box-shadow: 0 10px 30px rgba(17,24,39,.06); }

/* ---------------- Permissions Lab ---------------- */
.fd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1000px) { .fd-grid-3 { grid-template-columns: 1fr; } }
.fd-perm-card .fd-panel-head h3 { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; margin: 0; }
.fd-perm-preview { background: #F3F4F6; border-radius: 10px; height: 210px; display: flex; align-items: center; justify-content: center; margin: 14px 0; overflow: hidden; }
.fd-perm-preview video { width: 100%; height: 100%; object-fit: cover; }
.fd-perm-meter { background: #F3F4F6; border-radius: 999px; height: 14px; margin: 30px 0; overflow: hidden; }
.fd-perm-meter-fill { height: 100%; width: 0%; background: var(--fd-success); transition: width .08s linear; }
.fd-perm-geo-box { background: #F3F4F6; border-radius: 8px; padding: 14px; font-size: 12.5px; color: var(--fd-muted); margin: 14px 0; min-height: 60px; line-height: 1.6; }
.fd-perm-btn { width: 100%; justify-content: center; }
.fd-pop-btn { width:100%; min-height:40px; justify-content:center; color:var(--fd-primary) !important; background:#fff !important; border:1px solid var(--fd-border) !important; appearance:none; -webkit-appearance:none; }
.fd-pop-btn:focus { outline:2px solid var(--fd-primary); outline-offset:2px; }
.fd-badge.fd-status-idle { color: var(--fd-muted); background: #6B72801A; }
.fd-badge.fd-status-requesting { color: var(--fd-warning); background: #F59E0B1A; }
.fd-badge.fd-status-granted { color: var(--fd-success); background: #10B9811A; }
.fd-badge.fd-status-denied { color: var(--fd-danger); background: #EF44441A; }

/* ---------------- Plain in-panel forms (Payments / KYC) ---------------- */
.fd-panel form label { display: block; font-size: 13px; margin-bottom: 10px; color: #374151; font-weight: 500; }
.fd-panel form input[type="text"], .fd-panel form input[type="number"] { width: 100%; margin-top: 5px; padding: 8px 10px; border: 1px solid var(--fd-border); border-radius: 8px; font-size: 14px; font-family: inherit; }
.fd-panel code { background: #F3F4F6; padding: 1px 6px; border-radius: 4px; font-size: 12px; }

/* ---------------- Mobile ---------------- */
@media (max-width: 820px) {
	.fd-app { flex-direction: column; }
	.fd-sidebar { position: relative; width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--fd-border); }
	.fd-main { padding: 24px 18px 50px; }
}

/* ---------------- Private Browser Test Lab ---------------- */
.fd-browser-info-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.fd-browser-info-grid > div { background:#F8FAFC; border:1px solid var(--fd-border); border-radius:10px; padding:12px; min-width:0; }
.fd-browser-info-grid span { display:block; color:var(--fd-muted); font-size:11px; margin-bottom:4px; }
.fd-browser-info-grid strong { display:block; font-size:12.5px; word-break:break-word; }
.fd-browser-manual-grid, .fd-browser-focused-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.fd-browser-manual-grid .fd-btn, .fd-browser-focused-grid .fd-btn { justify-content:center; width:100%; }
.fd-browser-output { margin-top:12px; padding:12px; border-radius:9px; background:#F8FAFC; border:1px solid var(--fd-border); font-size:12.5px; color:#374151; min-height:44px; word-break:break-word; }
.fd-browser-coverage { display:flex; gap:8px; flex-wrap:wrap; }
.fd-browser-coverage span { display:inline-flex; padding:7px 10px; border-radius:999px; background:#F3F4F6; color:#374151; font-size:12px; border:1px solid var(--fd-border); }
#fd-browser-results code { font-size:11px; background:#F3F4F6; padding:2px 5px; border-radius:4px; }
@media (max-width: 1000px) { .fd-browser-info-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 620px) { .fd-browser-info-grid, .fd-browser-manual-grid, .fd-browser-focused-grid { grid-template-columns:1fr; } }

/* ---------------- PDF / Document Viewer Lab ---------------- */
.fd-doc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.fd-doc-card { border:1px solid var(--fd-border); border-radius:10px; padding:16px; background:#fff; }
.fd-doc-card h3 { margin:0 0 6px; font-size:15px; }
.fd-doc-card p { margin:0 0 12px; color:var(--fd-muted); font-size:12.5px; line-height:1.5; }
.fd-doc-actions { display:flex; gap:7px; flex-wrap:wrap; }
.fd-doc-actions .fd-btn { flex:1; justify-content:center; min-width:82px; }
.fd-doc-toolbar { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.fd-doc-toolbar select, .fd-doc-toolbar input { border:1px solid var(--fd-border); border-radius:8px; padding:8px 10px; font:inherit; font-size:12.5px; }
.fd-doc-toolbar select { min-width:100px; }
.fd-doc-toolbar input { flex:1; min-width:180px; }
.fd-doc-frame-wrap { height:520px; overflow:auto; border:1px solid var(--fd-border); border-radius:10px; background:#f8fafc; }
.fd-doc-frame-wrap iframe { width:100%; height:100%; border:0; background:#fff; display:block; }
.fd-check-list { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.fd-check-list label { display:flex; align-items:center; gap:8px; font-size:13px; padding:8px; border:1px solid var(--fd-border); border-radius:8px; background:#fafafa; }
.fd-test-list { margin:0; padding-left:20px; color:#374151; font-size:13px; line-height:1.75; }

/* ---------------- Iframe / Frame Security Lab ---------------- */
.fd-frame-diagram { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:170px; background:#f8fafc; border:1px solid var(--fd-border); border-radius:10px; font-size:15px; font-weight:600; color:#374151; }
.fd-frame-diagram div:nth-child(even) { color:var(--fd-muted); font-size:18px; }
.fd-frame-buttons, .fd-security-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fd-frame-buttons .fd-btn, .fd-security-buttons .fd-btn { justify-content:center; }

/* ---------------- Browser Security Lab ---------------- */
.fd-security-header-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.fd-security-header-grid > div { border:1px solid var(--fd-border); border-radius:9px; background:#f8fafc; padding:11px; min-width:0; }
.fd-security-header-grid span { display:block; font-size:11px; color:var(--fd-muted); margin-bottom:4px; }
.fd-security-header-grid strong { display:block; font-size:12px; word-break:break-word; }
.fd-security-matrix { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fd-security-matrix > div { display:flex; flex-direction:column; gap:7px; }
.fd-security-matrix strong { font-size:14px; margin-bottom:3px; }
.fd-security-matrix span { border:1px solid var(--fd-border); border-radius:7px; padding:8px 10px; background:#fafafa; font-size:12.5px; }

@media (max-width: 1000px) {
  .fd-doc-grid { grid-template-columns:1fr 1fr; }
  .fd-security-header-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 620px) {
  .fd-doc-grid, .fd-check-list, .fd-frame-buttons, .fd-security-buttons, .fd-security-header-grid, .fd-security-matrix { grid-template-columns:1fr; }
  .fd-doc-frame-wrap { height:420px; }
}

/* ---------------- Browser testing enhancements v2.3 ---------------- */
.fd-doc-file-name { display:inline-block; margin:0 0 8px; padding:5px 8px; border-radius:6px; background:#F3F4F6; color:#374151; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px !important; }
.fd-frame-report-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.fd-frame-report-grid > div { border:1px solid var(--fd-border); border-radius:9px; background:#f8fafc; padding:11px; text-align:center; }
.fd-frame-report-grid span { display:block; color:var(--fd-muted); font-size:11px; margin-bottom:4px; }
.fd-frame-report-grid strong { display:block; font-size:18px; }


/* Iframe / Frame Security Lab - enhanced UI */
.fd-iframe-lab .fd-page-head { margin-bottom: 14px; }
.fd-frame-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:8px; }
.fd-frame-flow-card { min-height:72px; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:12px; border:1px solid var(--fd-border); border-radius:10px; background:#f8fafc; }
.fd-frame-flow-card strong { width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#111827; color:#fff; font-size:11px; }
.fd-frame-flow-card span { font-size:12px; color:#374151; }
.fd-frame-flow-arrow { color:var(--fd-muted); font-size:20px; text-align:center; }
.fd-frame-scenario-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.fd-frame-scenario { appearance:none; border:1px solid var(--fd-border); border-radius:10px; background:#fff; padding:12px; text-align:left; cursor:pointer; min-height:102px; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.fd-frame-scenario:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.06); border-color:#94a3b8; }
.fd-frame-scenario strong { display:block; font-size:11px; color:#64748b; margin-bottom:4px; }
.fd-frame-scenario span { display:block; font-size:13px; font-weight:700; color:#111827; margin-bottom:5px; }
.fd-frame-scenario small { display:block; font-size:11px; line-height:1.45; color:var(--fd-muted); }
.fd-frame-preview { min-height:270px; border:1px dashed #cbd5e1; border-radius:10px; background:#f8fafc; overflow:hidden; }
.fd-frame-preview iframe { width:100%; height:270px; display:block; border:0; background:#fff; }
.fd-frame-placeholder { min-height:270px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:20px; text-align:center; color:var(--fd-muted); }
.fd-frame-placeholder strong { color:#111827; font-size:14px; }
.fd-frame-placeholder span { font-size:12px; max-width:330px; line-height:1.5; }
.fd-frame-placeholder-icon { font-size:30px; line-height:1; color:#64748b; }
.fd-frame-live-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.fd-frame-report-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:10px 0 14px; }
.fd-frame-report-grid > div { border:1px solid var(--fd-border); border-radius:9px; background:#f8fafc; padding:12px; }
.fd-frame-report-grid span { display:block; font-size:11px; color:var(--fd-muted); margin-bottom:4px; }
.fd-frame-report-grid strong { display:block; font-size:20px; color:#111827; }
.fd-expectation-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.fd-expectation-grid > div { border:1px solid var(--fd-border); border-radius:9px; padding:11px; background:#fff; }
.fd-expectation-grid strong { display:block; font-size:12px; margin-bottom:4px; color:#111827; }
.fd-expectation-grid span { display:block; font-size:11px; line-height:1.5; color:var(--fd-muted); }
@media (max-width:900px) {
  .fd-frame-flow { grid-template-columns:1fr 1fr; }
  .fd-frame-flow-arrow { display:none; }
  .fd-expectation-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .fd-frame-scenario-grid, .fd-expectation-grid, .fd-frame-report-grid { grid-template-columns:1fr; }
}

/* Passkey / WebAuthn */
.fd-login-divider { display:flex; align-items:center; gap:10px; margin:16px 0; color:var(--fd-muted); font-size:12px; }
.fd-login-divider::before, .fd-login-divider::after { content:""; height:1px; background:var(--fd-border); flex:1; }
.fd-passkey-login-btn { font-weight:700; }
.fd-passkey-help { text-align:center; margin:10px 0 0; font-size:11px; line-height:1.5; }
.fd-passkey-panel { margin-top:16px; }
.fd-passkey-list { display:grid; gap:8px; }
.fd-passkey-item { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--fd-border); border-radius:9px; padding:11px 12px; background:#f8fafc; }
.fd-passkey-item strong { display:block; font-size:13px; color:#111827; }
.fd-passkey-item small { display:block; color:var(--fd-muted); margin-top:3px; font-size:11px; }
.fd-passkey-item button { flex:0 0 auto; }
@media (max-width:640px) { .fd-passkey-item { align-items:flex-start; flex-direction:column; } }