feat: ship premium IT-focused vacancy radar

static/css/app.css

@@ -7,6 +7,7 @@
   --surface-low: #131b2e;
   --surface-high: #222a3d;
   --surface-bright: #2d3449;
+  --surface-soft: #111a2d;
   --text: #dae2fd;
   --text-soft: #b9caca;
   --muted: #849495;
@@ -16,6 +17,7 @@
   --primary-strong: #63f7ff;
   --primary-ink: #003739;
   --primary-soft: rgba(0, 245, 255, .1);
+  --accent: var(--primary);
   --positive: #4edea3;
   --positive-soft: rgba(78, 222, 163, .11);
   --warning: #ffca69;
@@ -39,6 +41,7 @@
   --surface-low: #f7f9fc;
   --surface-high: #edf2f7;
   --surface-bright: #e2e9f2;
+  --surface-soft: #f6f9fc;
   --text: #142033;
   --text-soft: #2c3c52;
   --muted: #617187;
@@ -62,7 +65,7 @@
 * { box-sizing: border-box; }
 html { min-height: 100%; scroll-behavior: smooth; }
 body {
-  min-width: 320px;
+  min-width: 0;
   min-height: 100vh;
   margin: 0;
   overflow-x: hidden;
@@ -72,7 +75,7 @@ body {
     var(--bg);
   background-size: 48px 48px;
   color: var(--text);
-  font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   -webkit-font-smoothing: antialiased;
 }
 a { color: var(--primary-strong); text-decoration: none; }
@@ -143,7 +146,7 @@ button.utility-link { width: auto; }
 :root[data-theme="light"] .theme-icon-dark { display: none; }
 :root[data-theme="light"] .theme-icon-light { display: block; }
 .nav-scrim { display: none; }
-.main-content { width: 100%; max-width: 1280px; margin: 0 auto; padding: 32px 24px 72px; }
+.main-content { width: 100%; max-width: 2240px; margin: 0 auto; padding: clamp(28px, 2.2vw, 48px) clamp(22px, 2.4vw, 54px) 80px; }
 
 .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; margin-bottom: 28px; }
 .page-header h1, .job-hero h1 { margin: 0; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -.035em; }
@@ -589,3 +592,92 @@ textarea { resize: vertical; }
   .result-body { padding: 17px; }
   .result-actions { padding: 0 17px 17px; }
 }
+
+/* VR-206: premium, title-led IT radar and genuinely adaptive widescreen composition. */
+.jobs-page-header { align-items: center; }
+.jobs-page-header .radar-status strong { color: var(--primary-strong); }
+.premium-filter-console {
+  grid-template-columns: minmax(220px, 1fr) repeat(5, minmax(112px, 145px)) auto;
+  gap: 12px;
+  padding: 18px;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--primary) 4%, transparent), transparent 45%),
+    var(--surface);
+  box-shadow: 0 16px 42px rgba(0, 0, 0, .1);
+}
+.premium-filter-console select,
+.premium-filter-console input { background: color-mix(in srgb, var(--surface-low) 94%, transparent); }
+.results-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
+.results-column { min-width: 0; }
+.jobs-insight-rail { display: none; }
+.result-card {
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--primary) 2%, transparent), transparent 48%),
+    var(--surface);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, .09);
+}
+.result-card:hover { box-shadow: 0 18px 42px rgba(0, 0, 0, .14); }
+.result-heading h2 { font-size: clamp(20px, 1.3vw, 25px); letter-spacing: -.025em; }
+.result-heading > div:first-child { min-width: 0; }
+.score-block strong { font-size: 32px; }
+.score-block small { max-width: 110px; text-align: right; line-height: 1.35; }
+.score-pending strong { color: var(--muted); }
+.pill-it { color: var(--primary-strong); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); background: var(--primary-soft); }
+.evidence-line { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.45; }
+.evidence-line .icon { width: 17px; height: 17px; margin-top: 1px; }
+.positive-evidence { border-left: 2px solid var(--positive); background: var(--positive-soft); color: var(--text-soft); }
+.positive-evidence .icon { color: var(--positive); }
+.concern-evidence { border-left: 2px solid var(--warning); background: var(--warning-soft); color: var(--text-soft); }
+.concern-evidence > span:first-child { color: var(--warning); font-weight: 900; }
+.result-actions { align-content: center; gap: 9px; }
+.result-actions form { margin: 0; }
+.result-actions .button { width: 100%; }
+.profile-signal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 16px 0; }
+.profile-signal-grid > div { display: grid; gap: 3px; padding: 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-low); }
+.profile-signal-grid span { color: var(--muted); font: 9px ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; }
+.profile-signal-grid strong { font-size: 18px; }
+.radar-steps { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: radar-step; }
+.radar-steps li { position: relative; display: grid; gap: 2px; padding: 12px 0 12px 34px; border-top: 1px solid var(--border); counter-increment: radar-step; }
+.radar-steps li::before { content: counter(radar-step); position: absolute; left: 0; top: 12px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 50%; color: var(--primary-strong); font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
+.radar-steps span { color: var(--muted); font-size: 12px; }
+.job-hero .title-row { margin-bottom: 12px; }
+.detail-main .panel { box-shadow: 0 12px 38px rgba(0, 0, 0, .08); }
+
+@media (min-width: 1350px) {
+  .results-layout { grid-template-columns: minmax(0, 1fr) 320px; }
+  .jobs-insight-rail { position: sticky; top: calc(var(--utility) + 20px); display: block; }
+}
+
+@media (min-width: 1850px) {
+  .utilitybar { padding-inline: clamp(30px, 2.5vw, 60px); }
+  .global-search { width: min(620px, 42vw); }
+  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 34px; }
+  .dashboard-grid .job-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
+  .dashboard-grid .section-heading { grid-column: 1 / -1; }
+  .results-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 34px; }
+  .results-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
+  .result-card { height: 100%; grid-template-columns: 4px minmax(0, 1fr); }
+  .result-actions { grid-column: 2; grid-template-columns: minmax(0, 1fr) auto; padding: 0 22px 20px; border: 0; background: transparent; }
+  .result-actions .button-ghost { width: auto; }
+  .detail-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 34px; }
+  .health-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .editor-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 34px; }
+}
+
+@media (max-width: 1180px) {
+  .premium-filter-console { grid-template-columns: minmax(0, 1fr) repeat(2, minmax(145px, .35fr)); }
+  .premium-filter-console .button { grid-column: 1 / -1; }
+}
+
+@media (max-width: 680px) {
+  body { font-size: 15px; }
+  .section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
+  .section-heading > .pill { align-self: flex-start; }
+  .jobs-page-header { align-items: stretch; }
+  .premium-filter-console { grid-template-columns: 1fr; padding: 14px; }
+  .premium-filter-console .button { grid-column: auto; }
+  .result-actions { gap: 8px; }
+  .result-actions form { width: 100%; }
+  .result-heading h2 { font-size: 20px; }
+  .score-block small { max-width: none; text-align: left; }
+}