:root {
  --bg: #eef2f7;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #d9dde3;
  --google-blue: #1a73e8;
  --linkedin-blue: #0a66c2;
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --warning: #b54708;
  --warning-bg: #fffaeb;
  --success: #027a48;
  --success-bg: #ecfdf3;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; }
a { color: var(--google-blue); text-decoration: none; }
.page { max-width: 1180px; margin: 0 auto; padding: 24px; }
.shell { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08); padding: 24px; margin-bottom: 20px; }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.row { display:flex; gap:16px; flex-wrap:wrap; }
.col { flex:1 1 280px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--muted); font-size:13px; }
.progress-track { width:100%; height:10px; border-radius:999px; background:#e5e7eb; overflow:hidden; margin-top:12px; }
.progress-fill { height:100%; background: linear-gradient(90deg, var(--google-blue), var(--success)); }
label { display:block; margin-bottom:6px; font-size:14px; color:#334155; font-weight:600; }
input, select, textarea { width:100%; padding:11px 12px; border:1px solid #cbd5e1; border-radius:10px; background:#fff; color:var(--text); font-size:14px; }
textarea { resize: vertical; }
button, .btn { border:none; border-radius:10px; padding:12px 16px; cursor:pointer; font-weight:700; font-size:14px; display:inline-block; }
.btn-primary { background: var(--google-blue); color:#fff; }
.btn-secondary { background:#fff; color:#0f172a; border:1px solid var(--border); }
.btn-good { background:#16a34a; color:#fff; }
.btn-bad { background:#dc2626; color:#fff; }
.alert { border-radius:12px; padding:14px 16px; margin-bottom:14px; border:1px solid transparent; }
.alert-standard { background: var(--warning-bg); border-color:#fedf89; color: var(--warning); }
.alert-enhanced-danger { background: var(--danger-bg); border-color:#fecdca; color: var(--danger); }
.alert-enhanced-safe { background: var(--success-bg); border-color:#abefc6; color: var(--success); }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:16px; }
.stat-card { background:#f8fafc; border:1px solid var(--border); border-radius:14px; padding:14px; }
.table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table { width:100%; border-collapse:collapse; margin-top:14px; font-size:14px; }
.table th, .table td { border-bottom:1px solid #e5e7eb; padding:10px; text-align:left; vertical-align:top; }
.export-toolbar { align-items:end; }
.export-form { min-width:min(100%, 420px); }
.export-controls { display:flex; gap:12px; align-items:end; flex-wrap:wrap; }
.export-controls select { min-width:260px; flex:1 1 260px; }
.export-controls .btn-primary { white-space:nowrap; }
.auth-frame { min-height: 680px; border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--border); }
.decision-bar { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.url-box { margin-top:12px; padding:10px 12px; border-radius:10px; background:#f8fafc; border:1px dashed #cbd5e1; font-size:13px; word-break:break-all; }
.url-danger { color:#b42318; font-weight:700; }
.url-safe { color:#027a48; font-weight:700; }
.hint-list { margin:10px 0 0; padding-left:18px; }
.auth-surface-center { display:flex; justify-content:center; align-items:flex-start; min-height:680px; padding:48px 24px; background:#fff; }
.google-stage { min-height:680px; background:#f0f4f9; padding:52px 30px 20px; }
.google-card { max-width:1020px; margin:0 auto; background:#fff; border-radius:28px; padding:42px 40px; display:grid; grid-template-columns:1fr 1.1fr; gap:32px; box-shadow:0 1px 2px rgba(15,23,42,.06); }
.google-card.phish-ui { border-radius:22px; box-shadow:0 1px 3px rgba(15,23,42,.1); }
.google-logo { font-size:32px; font-weight:700; letter-spacing:-0.5px; margin-bottom:20px; }
.g-blue { color:#4285f4; } .g-red { color:#db4437; } .g-yellow { color:#f4b400; } .g-green { color:#0f9d58; }
.google-title { font-size:42px; font-weight:400; line-height:1.1; margin-bottom:12px; }
.google-sub { font-size:16px; color:#1f2937; line-height:1.45; }
.google-input-wrap { margin-top:18px; }
.google-input { width:100%; border:1px solid #c4c7c5; border-radius:4px; padding:18px 14px 12px; font-size:16px; background:#fff; }
.google-input.phish-ui { border-color:#b8c0cc; border-radius:8px; padding-top:16px; }
.google-actions { display:flex; justify-content:space-between; align-items:center; margin-top:34px; }
.google-link { color: var(--google-blue); font-weight:600; font-size:14px; }
.google-btn { background: var(--google-blue); color:#fff; border:none; border-radius:999px; padding:10px 24px; font-weight:700; font-size:14px; }
.google-btn.phish-ui { background:#3467d6; border-radius:10px; }
.google-footer { max-width:1020px; margin:18px auto 0; display:flex; justify-content:space-between; color:#475467; font-size:12px; }
.linkedin-stage { min-height:680px; background: linear-gradient(180deg, #f4f2ee 0%, #f8fafc 100%); padding:28px 24px 40px; }
.linkedin-top { max-width:1120px; margin:0 auto 24px; display:flex; justify-content:space-between; align-items:center; }
.linkedin-wordmark { font-size:34px; font-weight:700; color:var(--linkedin-blue); letter-spacing:-1px; }
.linkedin-wordmark span { background:var(--linkedin-blue); color:#fff; border-radius:4px; padding:0 3px 1px; margin-left:1px; display:inline-block; line-height:.95; }
.linkedin-layout { max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1.1fr 420px; gap:28px; align-items:start; }
.linkedin-hero { padding:56px 24px 0 0; }
.linkedin-hero h2 { font-size:52px; line-height:1.12; font-weight:300; color:#526a6e; margin-bottom:20px; }
.linkedin-card { background:#fff; border-radius:12px; box-shadow:0 4px 12px rgba(15,23,42,.08); padding:28px 26px; }
.linkedin-card.phish-ui { border-radius:9px; box-shadow:0 4px 10px rgba(15,23,42,.12); }
.linkedin-title { font-size:32px; font-weight:600; margin-bottom:6px; }
.linkedin-sub { color:#526a6e; margin-bottom:20px; }
.linkedin-input { width:100%; border:1px solid #8f9193; border-radius:6px; padding:14px 12px; font-size:16px; margin-bottom:12px; }
.linkedin-input.phish-ui { border-radius:4px; border-color:#9aa3ab; }
.linkedin-btn { width:100%; border:none; border-radius:999px; background: var(--linkedin-blue); color:#fff; font-weight:700; padding:14px 18px; margin-top:10px; font-size:16px; }
.linkedin-btn.phish-ui { background:#0b5ab0; border-radius:12px; }
.linkedin-or { display:flex; align-items:center; gap:10px; color:#526a6e; font-size:13px; margin:18px 0; }
.linkedin-or::before,.linkedin-or::after { content:""; flex:1; height:1px; background:#d0d5dd; }
.linkedin-alt { border:1px solid #cbd5e1; border-radius:999px; padding:12px 16px; text-align:center; margin-bottom:10px; font-weight:700; }
.chart-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-top:16px; }
.chart-card { background:#f8fafc; border:1px solid var(--border); border-radius:14px; padding:16px; min-height:320px; }
.chart-card h3 { margin-top:0; margin-bottom:12px; }
.chart-wrap { position:relative; height:260px; }
.chart-card canvas { display:block; width:100% !important; height:100% !important; }
.chart-card-wide { grid-column:1 / -1; }
.chart-card-wide .chart-wrap { height:300px; }
.step-progress { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.step-pill { padding:10px 14px; border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--muted); font-size:13px; font-weight:700; }
.step-pill.active { background:var(--google-blue); color:#fff; border-color:var(--google-blue); }
.step-pill.completed { background:#ecfdf3; color:#027a48; border-color:#abefc6; }
.wizard-step { display:none; }
.wizard-step.active { display:block; }
.info-sheet h1 { font-size:28px; line-height:1.25; margin-top:12px; }
.info-section { margin-top:18px; padding-top:8px; border-top:1px solid #e5e7eb; }
.info-section h3 { margin-bottom:8px; }
.consent-box { background:#f8fafc; border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
.consent-list { display:grid; gap:10px; margin-top:14px; }
.consent-item { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; background:#f8fafc; border:1px solid var(--border); border-radius:12px; font-weight:400; }
.consent-item input { width:auto; margin-top:3px; }
.researcher-login-page { min-height:calc(100vh - 140px); display:flex; align-items:center; justify-content:center; padding:24px 16px 40px; }
.researcher-login-card { width:100%; max-width:500px; margin:0; padding:28px; }
.researcher-login-header { display:grid; gap:10px; margin-bottom:12px; }
.researcher-login-header h1 { margin:0; }
.researcher-login-form .row { margin-top:12px; }
.researcher-login-actions { justify-content:flex-end; }
.researcher-login-actions .btn-primary { min-width:140px; }
.hdd{
  display: none;
}

@media (max-width: 900px) {
  .page { max-width: 98vw; padding: 8px 1vw; }
  .shell { padding: 14px; margin-bottom: 12px; }
  .toolbar { align-items:flex-start; }
  .export-form { width:100%; min-width:0; }
  .export-controls { flex-direction:column; align-items:stretch; }
  .export-controls select, .export-controls .btn-primary { width:100%; }
  .chart-grid { grid-template-columns:1fr; }
  .google-card, .linkedin-layout { grid-template-columns:1fr; }
  .linkedin-hero { padding:0; }
  .auth-frame { min-height:auto; border-radius:10px; }
  .google-stage { padding: 10px 4px 8px; }
  .google-card { max-width: 98vw; padding: 18px 14px; gap: 18px; border-radius: 16px; }
  .google-title { font-size: 32px; }
  .google-footer { max-width: 98vw; padding: 0 6px; }
  .linkedin-stage { padding: 10px 4px 14px; }
  .linkedin-top { margin-bottom: 12px; }
  .linkedin-card { padding: 18px 14px; }
  .linkedin-hero h2 { font-size: 34px; }
}

@media (max-width: 520px) {
  .page { padding: 4px 1vw; }
  .shell { padding: 10px; }
  .google-stage, .linkedin-stage { padding: 6px 2px 10px; }
  .google-card, .linkedin-card { padding: 14px 10px; }
  .google-title, .linkedin-title { font-size: 26px; }
  .researcher-login-page { min-height:auto; padding:10px 4px 18px; }
  .researcher-login-card { max-width:100%; padding:16px 12px; border-radius:12px; }
  .researcher-login-actions { justify-content:stretch; }
  .researcher-login-actions .btn-primary { width:100%; }

  .table thead { display:none; }
  .table, .table tbody, .table tr, .table td { display:block; width:100%; }
  .table tbody { margin-top:10px; }
  .table tr { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:8px 10px; margin-bottom:12px; }
  .table td { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #f1f5f9; text-align:right; white-space:normal; word-break:break-word; }
  .table td:last-child { border-bottom:none; }
  .table td::before { content:attr(data-label); font-weight:700; color:#334155; text-align:left; padding-right:10px; }
}