/* ── Variables ─────────────────────────────────────────────────────────── */ :root { --bg: #070713; --bg-card: rgba(14, 17, 31, 0.78); --bg-hover: rgba(255, 255, 255, 0.1); --sidebar-bg: rgba(8, 11, 22, 0.95); --border: rgba(255, 255, 255, 0.08); --border-hi: rgba(96, 165, 250, 0.45); --cyan: #38BDF8; --cyan-dim: rgba(56, 189, 248, 0.18); --orange: #FBBF24; --orange-dim: rgba(251, 191, 36, 0.16); --teal: #34D399; --teal-dim: rgba(52, 211, 153, 0.16); --blue-neon: #60A5FA; --text: #E2E8F0; --text-muted: #94A3B8; --text-dim: #64748B; --sidebar-w: 240px; --radius: 18px; --radius-sm: 10px; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.6; } /* ── Light theme (toggle via data-theme="light" on ) ─────────────── */ [data-theme="light"] { --bg: #F6F7FB; --bg-card: rgba(15, 23, 42, 0.04); --bg-hover: rgba(15, 23, 42, 0.07); --sidebar-bg: #FFFFFF; --border: rgba(15, 23, 42, 0.10); --border-hi: rgba(147, 51, 234, 0.5); --cyan: #9333EA; --cyan-dim: rgba(147, 51, 234, 0.10); --orange: #D97706; --orange-dim: rgba(217, 119, 6, 0.12); --teal: #059669; --teal-dim: rgba(5, 150, 129, 0.12); --blue-neon: #0891B2; --text: #1E293B; /* Contrast on white, measured: #1E293B 14.6:1, #475569 7.6:1, #64748B 4.8:1 — * all clear WCAG AA (4.5:1). --text-dim used to be #94A3B8, which is 2.6:1 on * white and failed: it is the colour of every placeholder and hint, so on the * light theme those were guesswork. Shifted one step darker each, which keeps * text > muted > dim as a visible hierarchy. */ --text-muted: #475569; --text-dim: #64748B; } [data-theme="light"] body { background-image: radial-gradient(ellipse at 20% 0%, rgba(147,51,234,0.07) 0%, transparent 55%), radial-gradient(ellipse at 80% 100%, rgba(8,145,178,0.06) 0%, transparent 50%); } [data-theme="light"] .sidebar { box-shadow: 1px 0 0 var(--border); } [data-theme="light"] .auth-right { background: rgba(255, 255, 255, 0.72); } /* Inputs and dark hard-coded panels → light surfaces */ [data-theme="light"] .field { background: #FFFFFF; } [data-theme="light"] .field:focus { background: #FFFFFF; } [data-theme="light"] .add-job-menu { background: #FFFFFF; } [data-theme="light"] .jw-modal { background: #FFFFFF; } /* Theme toggle button (topbar) */ .theme-toggle { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; width: 38px; height: 38px; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.12s, background 0.15s, border-color 0.15s; } .theme-toggle:hover { transform: translateY(-1px); background: rgba(255,255,255,0.12); border-color: rgba(56,189,248,0.35); } .theme-toggle-auth { position: absolute; top: 18px; right: 18px; z-index: 120; width: 40px; height: 40px; font-size: 17px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; backdrop-filter: blur(8px); } /* ── Reset ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.08), transparent 24%), radial-gradient(circle at bottom right, rgba(251, 191, 36, 0.08), transparent 22%), var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; } button, select, input, textarea { font: inherit; color: inherit; } a { color: var(--cyan); } ul { list-style: none; } /* ── App shell ─────────────────────────────────────────────────────────── */ .app { display: flex; min-height: 100vh; } /* ── Sidebar ───────────────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: rgba(10, 14, 28, 0.92); border-right: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; padding: 24px 0 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; box-shadow: inset -1px 0 0 rgba(255,255,255,0.04); } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 16px 20px; border-bottom: 1px solid var(--border); } .brand-mark { width: 36px; height: 36px; min-width: 36px; border-radius: 9px; background: linear-gradient(135deg, #A855F7, #06B6D4); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #fff; box-shadow: 0 4px 14px rgba(168,85,247,0.35); } .brand-name { font-weight: 700; font-size: 15px; color: var(--text); } .brand-tagline { font-size: 10px; color: var(--text-muted); margin-top: 1px; } .sidebar-nav { flex: 1; padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; } .nav-section { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); padding: 14px 8px 4px; } .nav-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: rgba(255,255,255,0.02); border: none; border-left: 3px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-muted); cursor: pointer; text-align: left; font-size: 13px; font-weight: 600; transition: transform 0.15s, background 0.15s, color 0.15s; } .nav-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); transform: translateX(1px); } .nav-btn.active { background: rgba(56, 189, 248, 0.14); color: var(--cyan); border-left-color: var(--cyan); box-shadow: inset 4px 0 0 rgba(56,189,248,0.18); } .nav-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; } .nav-label { flex: 1; } .nav-badge { width: 22px; height: 20px; min-width: 22px; border-radius: 5px; border: 1px solid var(--border-hi); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--cyan); } .nav-badge.orange { border-color: rgba(255,107,53,0.45); color: var(--orange); } .status-dot { width: 6px; height: 6px; min-width: 6px; border-radius: 50%; background: var(--text-dim); transition: background 0.25s, box-shadow 0.25s; } .status-dot.running { background: var(--cyan); box-shadow: 0 0 5px var(--cyan); animation: blink 1.1s ease-in-out infinite; } .status-dot.done { background: var(--teal); } .status-dot.error { background: #ff4060; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.5} } .sidebar-user { padding: 12px 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; margin-top: auto; } .user-avatar-sm { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; background: var(--cyan-dim); border: 1px solid var(--border-hi); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--cyan); } .user-info-sm { min-width: 0; } .user-name-sm { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .link-btn { background: none; border: none; color: var(--cyan); cursor: pointer; font-size: 11px; padding: 0; display: block; } .link-btn:hover { text-decoration: underline; } /* ── Main content ──────────────────────────────────────────────────────── */ .main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ── Topbar ────────────────────────────────────────────────────────────── */ .topbar { height: 60px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: space-between; padding: 0 30px; background: rgba(10, 14, 28, 0.96); backdrop-filter: blur(20px); box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 30; flex-shrink: 0; } .topbar-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; } .topbar-right { display: flex; align-items: center; gap: 14px; } .topbar-pipeline { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; } .pipe-step { color: var(--text-dim); font-weight: 600; padding: 3px 8px; border-radius: 4px; transition: color 0.2s, background 0.2s; } .pipe-step.active { color: var(--cyan); background: var(--cyan-dim); } .pipe-step.orange { color: rgba(255,107,53,0.5); } .pipe-step.orange.active { color: var(--orange); background: var(--orange-dim); } .pipe-arrow { color: var(--text-dim); } .api-indicator { font-size: 11px; font-weight: 700; color: #ff4060; transition: color 0.2s; } .api-indicator.online { color: var(--teal); } /* ── Pages ─────────────────────────────────────────────────────────────── */ .page { display: none; padding: 28px; animation: fadein 0.2s ease; } .page.active { display: block; } @keyframes fadein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } .page-intro { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 28px; } .page-intro h1 { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .page-intro p { color: var(--text-muted); font-size: 13px; } .tracker-intro { flex-wrap: wrap; } .tracker-intro > .btn { margin-left: auto; align-self: center; } .page-badge { width: 36px; height: 36px; min-width: 36px; border-radius: 8px; border: 2px solid var(--border-hi); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: var(--cyan); margin-top: 4px; } .page-badge.orange { border-color: rgba(255,107,53,0.5); color: var(--orange); } .role-tag { display: inline-block; background: var(--cyan-dim); color: var(--cyan); font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 4px; vertical-align: middle; margin-left: 8px; letter-spacing: 0.02em; } .role-tag.orange { background: var(--orange-dim); color: var(--orange); } /* ── Dashboard pipeline grid ───────────────────────────────────────────── */ .pipeline-grid { display: flex; align-items: stretch; margin-bottom: 24px; overflow-x: auto; padding-bottom: 4px; gap: 0; } .flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 20px; padding: 0 10px; flex-shrink: 0; } .agent-card { flex: 1; min-width: 170px; background: var(--bg-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 16px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .agent-card:hover { border-color: var(--border-hi); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(168,85,247,0.12); } .agent-card.highlight-orange { border-color: rgba(255,107,53,0.28); } .agent-card.highlight-orange:hover { border-color: rgba(255,107,53,0.55); } .agent-num { font-size: 10px; font-weight: 800; color: var(--cyan); border: 1px solid var(--border-hi); border-radius: 5px; width: 26px; height: 18px; display: flex; align-items: center; justify-content: center; } .agent-num.orange { color: var(--orange); border-color: rgba(255,107,53,0.45); } .agent-icon-lg { font-size: 26px; } .agent-body { flex: 1; } .agent-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; } .agent-subtitle { display: inline-block; background: var(--cyan-dim); color: var(--cyan); font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 3px; margin-bottom: 10px; letter-spacing: 0.04em; } .writer-sub { background: var(--orange-dim); color: var(--orange); } .agent-features { display: flex; flex-direction: column; gap: 4px; } .agent-features li { font-size: 12px; color: var(--text-muted); padding-left: 12px; position: relative; } .agent-features li::before { content: '·'; position: absolute; left: 0; color: var(--text-dim); } .agent-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--border); } /* ── Status pills ──────────────────────────────────────────────────────── */ .status-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.07em; } .status-pill.idle { background: var(--bg); color: var(--text-dim); border: 1px solid var(--border); } .status-pill.running { background: var(--cyan-dim); color: var(--cyan); border: 1px solid var(--border-hi); animation: blink 1.1s ease-in-out infinite; } .status-pill.done { background: var(--teal-dim); color: var(--teal); border: 1px solid rgba(0,200,150,0.3); } .status-pill.error { background: rgba(255,60,80,0.1); color: #ff4060; border: 1px solid rgba(255,60,80,0.3); } .pill { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 4px; background: var(--cyan-dim); color: var(--cyan); letter-spacing: 0.04em; } /* ── Stats row ─────────────────────────────────────────────────────────── */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } .stat-box { background: var(--bg-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; transition: border-color 0.2s, box-shadow 0.2s; } .stat-box:hover { border-color: var(--border-hi); box-shadow: 0 4px 20px rgba(168,85,247,0.1); } .stat-val { font-size: 34px; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 5px; } .stat-val.cyan { color: var(--cyan); } .stat-val.orange { color: var(--orange); } .stat-lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } /* ── Tech chips ────────────────────────────────────────────────────────── */ .tech-row { display: flex; flex-wrap: wrap; gap: 8px; } .tech-chip { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; font-size: 11px; color: var(--text-muted); transition: border-color 0.15s, color 0.15s; } .tech-chip:hover { border-color: var(--border-hi); color: var(--text); } /* ── Cards ─────────────────────────────────────────────────────────────── */ .card { background: rgba(12, 16, 34, 0.95); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 22px; margin-bottom: 22px; box-shadow: 0 18px 50px rgba(0,0,0,0.18); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; } .card-header h2 { font-size: 16px; font-weight: 700; } /* ── Layouts ───────────────────────────────────────────────────────────── */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* ── Form elements ─────────────────────────────────────────────────────── */ .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.07em; } .field { width: 100%; background: rgba(0,0,0,0.28); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; color: var(--text); font-size: 13px; outline: none; transition: border-color 0.15s, background 0.15s; display: block; } .field:focus { border-color: var(--border-hi); background: rgba(0,0,0,0.4); } .field::placeholder { color: var(--text-dim); } select.field { appearance: none; cursor: pointer; } textarea.field { resize: vertical; min-height: 80px; } .cv-textarea { min-height: 120px; } .input-with-btn { display: flex; gap: 6px; } .input-with-btn .field { flex: 1; } .form-actions { display: flex; gap: 10px; margin-top: 16px; } .hint { font-size: 11px; color: var(--text-muted); margin-top: 5px; } /* ── Buttons ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 700; font-size: 13px; padding: 8px 16px; transition: opacity 0.15s, transform 0.1s; white-space: nowrap; } .btn:hover { opacity: 0.85; } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, #38BDF8 0%, #7C3AED 100%); color: #fff; font-weight: 800; box-shadow: 0 6px 18px rgba(56, 189, 248, 0.28); } .btn-primary:hover { box-shadow: 0 8px 26px rgba(56, 189, 248, 0.35); } .btn-ghost { background: rgba(255,255,255,0.05); color: var(--text); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--bg-hover); border-color: var(--border-hi); } .btn-full { width: 100%; justify-content: center; } .btn-sm { padding: 5px 12px; font-size: 12px; } .btn-xs { padding: 3px 8px; font-size: 11px; } /* ── Drop zone ─────────────────────────────────────────────────────────── */ .drop-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 28px 16px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; margin-bottom: 12px; } .drop-zone:hover, .drop-zone.drag-over { border-color: var(--border-hi); background: var(--cyan-dim); } .drop-icon { font-size: 30px; margin-bottom: 8px; } .drop-zone p { font-size: 13px; color: var(--text-muted); } .drop-hint { font-size: 11px; color: var(--text-dim); margin-top: 4px; display: block; } /* ── Analysis results ──────────────────────────────────────────────────── */ .analysis-banner { background: var(--cyan-dim); border: 1px solid var(--border-hi); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 13px; margin-bottom: 16px; } .col-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px; } /* ── Tag lists ─────────────────────────────────────────────────────────── */ .tag-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; } .tag-list li { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 3px 9px; font-size: 12px; color: var(--text-muted); } .tag-list.cyan li { border-color: rgba(0,210,255,0.22); color: var(--cyan); } .tag-list.orange li { border-color: rgba(255,107,53,0.22); color: var(--orange); } .role-list { padding: 0; display: flex; flex-direction: column; gap: 6px; } .role-list li { font-size: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; } /* ── Count badge ───────────────────────────────────────────────────────── */ .count-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--cyan-dim); color: var(--cyan); border-radius: 20px; min-width: 22px; height: 22px; padding: 0 7px; font-size: 11px; font-weight: 800; margin-left: 8px; } /* ── Jobs grid ─────────────────────────────────────────────────────────── */ .jobs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; max-height: 620px; overflow-y: auto; padding-right: 6px; } .job-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.12); border-radius: calc(var(--radius) + 4px); padding: 20px; display: flex; flex-direction: column; gap: 12px; min-height: 220px; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 12px 30px rgba(0,0,0,0.18); } .job-card:hover { border-color: rgba(56,189,248,0.35); transform: translateY(-3px); box-shadow: 0 18px 42px rgba(0,0,0,0.22); } .job-card-top { display: flex; flex-direction: column; gap: 8px; } .job-card-title { font-weight: 800; font-size: 15px; line-height: 1.3; color: var(--text); } .job-card-meta { font-size: 12px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .job-card-salary { font-size: 12px; color: var(--teal); font-weight: 700; } .job-card-desc { font-size: 13px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.55; } .job-card-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .chip { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 5px 10px; font-size: 11px; color: var(--text-muted); } .chip.platform { color: var(--cyan); border-color: rgba(56,189,248,0.18); } .chip.remote { color: var(--cyan); border-color: rgba(56,189,248,0.18); background: rgba(56,189,248,0.08); } .chip.date { color: var(--text-dim); } .chip.date.new { color: var(--teal); border-color: rgba(52,211,153,0.25); } .job-card-gaps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); } .gap-label { font-size: 10px; font-weight: 800; color: var(--orange); text-transform: uppercase; letter-spacing: 0.12em; } .gap-chip { background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); color: var(--orange); border-radius: 999px; padding: 4px 10px; font-size: 11px; } .gap-more { font-size: 11px; color: var(--text-dim); } .job-card-link { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; background: rgba(56,189,248,0.16); color: var(--cyan); border-radius: 999px; text-decoration: none; font-size: 12px; font-weight: 700; border: 1px solid transparent; transition: background 0.18s, transform 0.18s, border-color 0.18s; margin-top: 6px; } .job-card-link:hover { background: rgba(56,189,248,0.23); border-color: rgba(56,189,248,0.35); transform: translateY(-1px); } .job-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .new-badge { font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 4px; background: var(--teal-dim); color: var(--teal); border: 1px solid rgba(0,200,150,0.3); white-space: nowrap; flex-shrink: 0; } .job-card-salary { font-size: 12px; color: var(--teal); font-weight: 600; } .chip.remote { color: var(--cyan); border-color: rgba(0,210,255,0.22); } .chip.date { color: var(--text-dim); } .chip.date.new { color: var(--teal); border-color: rgba(0,200,150,0.25); } .track-btn { background: none; border: 1px solid rgba(0,200,150,0.3); color: var(--teal); border-radius: 5px; padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer; margin-top: 6px; transition: background 0.12s; } .track-btn:hover { background: var(--teal-dim); } /* ── Match grid ────────────────────────────────────────────────────────── */ .match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; max-height: 620px; overflow-y: auto; padding-right: 4px; } .match-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 9px; transition: border-color 0.15s; } .match-card.high { border-color: rgba(0,200,150,0.32); } .match-card.mid { border-color: rgba(0,210,255,0.22); } .match-card.low { border-color: var(--border); } .match-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .match-title { font-weight: 700; font-size: 13px; } .match-company { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .score-circle { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; border: 3px solid; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; } .score-circle.high { border-color: var(--teal); color: var(--teal); } .score-circle.mid { border-color: var(--cyan); color: var(--cyan); } .score-circle.low { border-color: var(--text-dim); color: var(--text-muted); } .score-bar-wrap { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; } .score-bar { height: 100%; border-radius: 2px; transition: width 0.7s ease; } .score-bar.high { background: var(--teal); } .score-bar.mid { background: var(--cyan); } .score-bar.low { background: var(--text-dim); } .match-skills { display: flex; flex-wrap: wrap; gap: 4px; } .match-skill { font-size: 10px; padding: 2px 7px; border-radius: 3px; background: var(--cyan-dim); color: var(--cyan); } .legend-row { display: flex; gap: 8px; } .legend { font-size: 10px; padding: 2px 8px; border-radius: 3px; font-weight: 700; } .legend.high { background: var(--teal-dim); color: var(--teal); } .legend.mid { background: var(--cyan-dim); color: var(--cyan); } .legend.low { background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid var(--border); } /* ── Output blocks ─────────────────────────────────────────────────────── */ .output-block { margin-top: 16px; border: 1px solid var(--border-hi); border-radius: var(--radius); overflow: hidden; } .output-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: var(--cyan-dim); font-size: 12px; font-weight: 700; color: var(--cyan); } .output-area { height: 260px; border: none !important; border-radius: 0 !important; font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace; font-size: 12px; line-height: 1.65; resize: vertical; background: rgba(0,0,0,0.35); color: var(--text); } /* ── Learning suggestions ──────────────────────────────────────────────── */ .suggestions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 8px; } .suggestion-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 12px; color: var(--text-muted); line-height: 1.55; transition: border-color 0.15s; } .suggestion-card:hover { border-color: var(--border-hi); } /* ── Kanban ────────────────────────────────────────────────────────────── */ .kanban { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; } .kanban-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-width: 0; } .kanban-col-header { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; } .col-dot { width: 8px; height: 8px; min-width: 8px; border-radius: 50%; } .col-dot.applied { background: #4a9eff; } .col-dot.review { background: #ffc940; } .col-dot.interview { background: var(--cyan); } .col-dot.offer { background: var(--teal); } .col-dot.rejected { background: #ff4060; } .col-count { margin-left: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; min-width: 20px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; padding: 0 6px; font-weight: 700; } .kanban-cards { padding: 10px; min-height: 380px; display: flex; flex-direction: column; gap: 8px; } .app-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; transition: border-color 0.15s; } .app-card:hover { border-color: var(--border-hi); } .app-card-title { font-weight: 700; font-size: 12px; } .app-card-company { font-size: 11px; color: var(--text-muted); } .app-card-deadline { font-size: 10px; color: var(--orange); margin-top: 2px; } .app-card-notes { font-size: 10px; color: var(--text-dim); margin-top: 2px; } .app-card-link { font-size: 10px; color: var(--cyan); text-decoration: none; } .app-card-link:hover { text-decoration: underline; } .app-card-actions { display: flex; gap: 4px; margin-top: 6px; } .move-btn { flex: 1; background: none; border: 1px solid var(--border); border-radius: 4px; padding: 3px 4px; font-size: 10px; color: var(--text-muted); cursor: pointer; text-align: center; font-weight: 600; transition: background 0.12s, color 0.12s; } .move-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-hi); } .delete-btn { background: none; border: 1px solid rgba(255,60,80,0.2); border-radius: 4px; padding: 3px 7px; font-size: 10px; color: rgba(255,60,80,0.45); cursor: pointer; transition: background 0.12s, color 0.12s; } .delete-btn:hover { background: rgba(255,60,80,0.1); color: #ff4060; border-color: rgba(255,60,80,0.45); } /* ── Empty state ───────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-icon { font-size: 48px; margin-bottom: 16px; } .empty-state h3 { font-size: 18px; margin-bottom: 8px; color: var(--text); } .empty-state p { font-size: 13px; margin-bottom: 20px; } /* ── Auth screen (split-screen) ────────────────────────────────────────── */ .auth-screen { position: fixed; inset: 0; display: flex; z-index: 100; background: var(--bg); } .auth-screen.hidden { display: none; } /* LEFT PANEL */ .auth-left { flex: 1 1 56%; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--sidebar-bg); } @media (max-width: 768px) { .auth-left { display: none; } } /* Grid background */ .auth-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,210,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,210,255,0.04) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; } /* Ambient glows */ .auth-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px); } .ag-1 { width: 360px; height: 360px; background: rgba(0,210,255,0.07); top: -80px; left: -60px; } .ag-2 { width: 280px; height: 280px; background: rgba(255,107,53,0.06); bottom: -40px; right: -40px; } /* Robot scene wrapper — centered using absolute positioning */ .robot-scene-wrap { position: relative; width: 320px; height: 320px; display: flex; align-items: center; justify-content: center; } /* Pulse rings */ .pulse-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(0,210,255,0.35); top: 50%; left: 50%; animation: authPulseRing 3s ease-out infinite; } .pring-1 { width: 240px; height: 240px; margin-top: -120px; margin-left: -120px; } .pring-2 { width: 240px; height: 240px; margin-top: -120px; margin-left: -120px; animation-delay: 1.5s; } /* Orbit rings */ .orbit-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(0,210,255,0.15); top: 50%; left: 50%; } .oring-cw { width: 280px; height: 280px; margin-top: -140px; margin-left: -140px; animation: authOrbitCw 22s linear infinite; } .oring-ccw { width: 210px; height: 210px; margin-top: -105px; margin-left: -105px; animation: authOrbitCcw 15s linear infinite; } /* Orbit dots */ .orbit-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; top: -4px; left: 50%; transform: translateX(-50%); } .od-cyan { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); } .od-orange { background: var(--orange); box-shadow: 0 0 8px var(--orange); } /* Robot float animation wrapper */ .robot-floating { position: relative; z-index: 2; animation: authRobotFloat 6s ease-in-out infinite; filter: drop-shadow(0 16px 40px rgba(0,210,255,0.15)); } /* Floating stat cards */ .auth-stat-card { position: absolute; background: var(--bg-card); border: 1px solid var(--border-hi); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); backdrop-filter: blur(8px); } .asc-val { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1; } .asc-lbl { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .asc-1 { top: 12%; left: 6%; animation: authStatFloat 5s ease-in-out infinite; } .asc-2 { top: 18%; right: 8%; animation: authStatFloat 7s ease-in-out infinite 1s; } .asc-3 { bottom: 22%; left: 8%; animation: authStatFloat 4s ease-in-out infinite 2s; } .asc-4 { bottom: 16%; right: 10%; animation: authStatFloat 6s ease-in-out infinite 0.5s; } /* Brand footer */ .auth-brand-footer { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; white-space: nowrap; } .auth-brand-name { font-size: 14px; font-weight: 700; color: var(--text); } .auth-brand-sub { font-size: 10px; color: var(--text-muted); } /* SVG robot keyframe animations */ .svg-antenna-glow { animation: svgAntennaGlow 2s ease-in-out infinite; } .svg-eye-left, .svg-eye-right { animation: svgEyeBlink 4s ease-in-out infinite; } .svg-pupil { animation: svgPupilLook 5s ease-in-out infinite; } .svg-eq-bar { animation: svgEqBar 0.6s ease-in-out infinite alternate; } .svg-scan-line { animation: svgScanLine 2.5s linear infinite; } .svg-led { animation: svgLedPulse 2s ease-in-out infinite; } .svg-arm-wave { animation: svgArmWave 3.6s ease-in-out infinite; } .svg-signal { animation: svgSignal 2.4s ease-out infinite; } .svg-signal.sig-2 { animation-delay: 1.2s; } /* Speech bubble — "Welcome", synced with the waving arm */ .speech-anchor { position: absolute; top: -2%; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none; } .robot-speech { position: relative; background: var(--bg-card); border: 1px solid var(--cyan); color: var(--text); font-size: 14px; font-weight: 700; white-space: nowrap; padding: 8px 14px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 16px rgba(0,210,255,0.25); backdrop-filter: blur(8px); transform-origin: bottom center; animation: speechPop 3.6s ease-in-out infinite; } .robot-speech::after { content: ""; position: absolute; bottom: -7px; left: 50%; margin-left: -6px; width: 12px; height: 12px; background: var(--bg-card); border-right: 1px solid var(--cyan); border-bottom: 1px solid var(--cyan); transform: rotate(45deg); } .speech-wave { display: inline-block; animation: speechHand 3.6s ease-in-out infinite; } /* Breathing ground shadow (synced with robot float) */ .robot-shadow { position: absolute; bottom: 30px; left: 50%; width: 130px; height: 20px; margin-left: -65px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,210,255,0.22), transparent 70%); filter: blur(5px); z-index: 1; animation: robotShadow 6s ease-in-out infinite; } /* Rising data particles */ .data-particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .particle { position: absolute; bottom: 18%; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); opacity: 0; animation: particleRise 6s linear infinite; } .particle.orange { background: var(--orange); box-shadow: 0 0 6px var(--orange); } .p1 { left: 22%; animation-delay: 0s; } .p2 { left: 40%; animation-delay: 1.4s; } .p3 { left: 56%; animation-delay: 2.6s; } .p4 { left: 70%; animation-delay: 0.8s; } .p5 { left: 33%; animation-delay: 3.5s; } .p6 { left: 63%; animation-delay: 4.6s; } /* RIGHT PANEL */ .auth-right { flex: 0 0 44%; display: flex; align-items: center; justify-content: center; padding: 38px 36px; background: linear-gradient(180deg, rgba(8, 15, 31, 0.96), rgba(11, 20, 42, 0.96)); border-left: 1px solid rgba(255,255,255,0.08); } @media (max-width: 768px) { .auth-right { flex: 1 1 100%; border-left: none; background: var(--bg); } } .auth-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 18px; background: rgba(9, 18, 34, 0.98); border: 1px solid rgba(255,255,255,0.12); border-radius: calc(var(--radius) + 4px); padding: 26px; box-shadow: 0 30px 80px rgba(0,0,0,0.28); } .modal-logo { display: flex; align-items: center; gap: 14px; } .modal-tabs { display: flex; gap: 4px; background: var(--bg); border-radius: var(--radius-sm); padding: 4px; } .modal-tab { flex: 1; background: none; border: none; color: var(--text-muted); padding: 8px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 700; transition: background 0.15s, color 0.15s; } .modal-tab.active { background: var(--cyan-dim); color: var(--cyan); } /* These panels are
elements — zero the UA margin. */ .modal-panel { display: none; flex-direction: column; gap: 12px; margin: 0; } .modal-panel.active { display: flex; } .form-msg { font-size: 12px; color: #ff4060; min-height: 16px; } /* ── Auth screen keyframes ──────────────────────────────────────────────── */ @keyframes authRobotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } @keyframes authOrbitCw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes authOrbitCcw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes authPulseRing { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.65); opacity: 0; } } @keyframes authStatFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes svgAntennaGlow { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } @keyframes svgEyeBlink { 0%, 82%, 100% { transform: scaleY(1); } 90% { transform: scaleY(0.07); } } @keyframes svgEqBar { 0% { transform: scaleY(0.2); } 100% { transform: scaleY(1); } } @keyframes svgScanLine { 0% { transform: translateY(0); opacity: 0.6; } 80% { transform: translateY(43px); opacity: 0.3; } 100% { transform: translateY(46px); opacity: 0; } } @keyframes svgLedPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } } @keyframes svgPupilLook { 0%, 18% { transform: translateX(-2.5px); } 40%, 60% { transform: translateX(2.5px); } 82%, 100% { transform: translateX(0); } } @keyframes svgArmWave { 0%, 55%, 100% { transform: rotate(0deg); } 63% { transform: rotate(-30deg); } 71% { transform: rotate(-16deg); } 79% { transform: rotate(-30deg); } 87% { transform: rotate(-16deg); } 95% { transform: rotate(-6deg); } } @keyframes svgSignal { 0% { transform: scale(0.4); opacity: 0.85; } 100% { transform: scale(3.2); opacity: 0; } } @keyframes speechPop { 0%, 38% { opacity: 0; transform: translateY(8px) scale(0.8); } 48%, 86% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-4px) scale(0.9); } } @keyframes speechHand { 0%, 55%, 100% { transform: rotate(0deg); } 63%, 79% { transform: rotate(18deg); } 71%, 87% { transform: rotate(-12deg); } } @keyframes robotShadow { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(0.78); opacity: 0.3; } } @keyframes particleRise { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 15% { opacity: 0.8; } 85% { opacity: 0.5; } 100% { transform: translateY(-190px) scale(1); opacity: 0; } } .form-msg.ok { color: var(--teal); } /* ── Domain selector optgroups ─────────────────────────────────────────── */ optgroup { color: var(--text-muted); font-size: 11px; font-weight: 700; } option { color: var(--text); background: var(--bg-card); } /* ── Keyword input highlight ───────────────────────────────────────────── */ #job-keyword-input:not(:placeholder-shown) { border-color: var(--border-hi); background: rgba(0, 210, 255, 0.04); } /* ── Scrape-All button ─────────────────────────────────────────────────── */ .btn-scrape-all { background: linear-gradient(135deg, #A855F7 0%, #F59E0B 100%); color: #fff; font-weight: 800; margin-top: 8px; width: 100%; justify-content: center; box-shadow: 0 4px 14px rgba(168,85,247,0.25); } .btn-scrape-all:hover { opacity: 0.88; } /* ── Scrape-All progress ───────────────────────────────────────────────── */ .scrape-progress { background: var(--bg-card); border: 1px solid rgba(123,0,255,0.35); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; } .scrape-progress-title { font-weight: 700; font-size: 14px; margin-bottom: 12px; color: var(--text); } .scrape-platforms-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; } .scrape-platform { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-muted); transition: color 0.3s; } .scrape-platform.done { color: var(--teal); } .scrape-platform.error { color: #ff4060; } .sp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; transition: background 0.3s; } .sp-dot.spinning { background: var(--cyan); animation: blink 0.8s ease-in-out infinite; } .sp-dot.done { background: var(--teal); animation: none; } .sp-dot.error { background: #ff4060; animation: none; } .scrape-hint { font-size: 11px; color: var(--text-dim); } /* ── Platform breakdown ────────────────────────────────────────────────── */ .platform-breakdown { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .pb-chip { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 16px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 110px; transition: border-color 0.2s; } .pb-chip:hover { border-color: var(--border-hi); } .pb-chip-count { font-size: 22px; font-weight: 800; color: var(--cyan); line-height: 1; } .pb-chip-name { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; } /* ── Toast notifications ───────────────────────────────────────────────── */ #toast-container { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 9998; pointer-events: none; } .toast { background: var(--bg-card); border: 1px solid var(--border-hi); border-radius: 10px; padding: 12px 18px; font-size: 13px; font-weight: 600; color: var(--text); box-shadow: 0 8px 28px rgba(0,0,0,0.4); opacity: 0; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s; max-width: 320px; pointer-events: auto; } .toast.show { opacity: 1; transform: translateY(0); } .toast-success { border-color: rgba(0,200,150,0.4); color: var(--teal); } .toast-error { border-color: rgba(255,60,80,0.4); color: #ff4060; } .toast-info { border-color: rgba(0,210,255,0.3); color: var(--cyan); } /* ── "Also on" chip (fuzzy cross-source dedup) ─────────────────────────── */ .chip.also-on { color: var(--teal); border-color: rgba(16,185,129,0.3); } /* ── Writer options row (compact 3-col) ────────────────────────────────── */ .writer-options { grid-template-columns: repeat(3, 1fr) !important; gap: 10px; margin-bottom: 12px; } .writer-options .form-group { margin-bottom: 0; } .writer-options label { font-size: 10px; } /* ── Job workspace: generated documents ────────────────────────────────── */ .jw-docs { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; } .jw-doc { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: rgba(255,255,255,0.02); } .jw-doc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; } .jw-doc textarea { font-family: 'Cascadia Code', Consolas, monospace; font-size: 12px; line-height: 1.5; } /* ── Tracker funnel / conversion stats ─────────────────────────────────── */ .funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .funnel-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; } .funnel-val { font-size: 26px; font-weight: 800; line-height: 1; } .funnel-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 5px; } /* ── Application status timeline + docs badge ──────────────────────────── */ .jw-timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--text-muted); } .tl-step { display: inline-flex; align-items: center; gap: 5px; } .tl-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--text-dim); } .tl-dot.applied { background: #4a9eff; } .tl-dot.review { background: var(--cyan); } .tl-dot.interview { background: var(--teal); } .tl-dot.offer { background: #ffc940; } .tl-dot.rejected { background: #ff4060; } .tl-date { color: var(--text-dim); } .tl-arrow { color: var(--text-dim); } .app-card-docs { font-size: 10px; color: var(--teal); margin-top: 2px; } /* ── Scrape log ────────────────────────────────────────────────────────── */ .scrape-log { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; font-family: 'Cascadia Code', Consolas, monospace; font-size: 12px; } .sl-head { font-weight: 700; margin-bottom: 8px; color: var(--text); font-family: var(--font, inherit); } .sl-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 3px 0; color: var(--text-muted); } .sl-row .sl-src { color: var(--teal); } .sl-row.err .sl-src { color: #ff4060; } .sl-row .sl-ms { color: var(--text-dim); min-width: 56px; text-align: right; } .sl-total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; color: var(--text); } .sl-total .sl-src { color: var(--orange); } /* ── Market report bars ────────────────────────────────────────────────── */ .mr-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; } .mr-label { width: 42%; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mr-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; } .mr-fill { display: block; height: 100%; border-radius: 4px; } .mr-count { width: 26px; text-align: right; color: var(--text-muted); } /* ── Role gap recommendations (missing X → learn Y) ────────────────────── */ .role-gap { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.45; } .role-gap.ok { color: var(--teal); } .role-gap strong { color: var(--orange); font-weight: 600; } .role-learn { color: var(--cyan); margin-top: 2px; } /* ── Notify toggle (email high-match jobs) ─────────────────────────────── */ .notify-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); margin: 4px 0 10px; cursor: pointer; } .notify-toggle input { accent-color: #A855F7; width: 15px; height: 15px; cursor: pointer; } /* ── Utility ───────────────────────────────────────────────────────────── */ .hidden { display: none !important; } /* ── Scrollbar ─────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(168,85,247,0.55); } /* ── Chatbot widget ─────────────────────────────────────────────────────── */ #chat-widget { position: fixed; bottom: 24px; right: 28px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; z-index: 800; } /* Hide the chat while the login / auth screen is showing */ #auth-modal:not(.hidden) ~ #chat-widget { display: none; } .chat-toggle-btn { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #A855F7, #06B6D4); border: none; font-size: 22px; cursor: pointer; box-shadow: 0 4px 24px rgba(168,85,247,0.45); transition: transform 0.2s, box-shadow 0.2s; display: flex; align-items: center; justify-content: center; color: #fff; } .chat-toggle-btn:hover { transform: scale(1.08); box-shadow: 0 6px 32px rgba(168,85,247,0.65); } .chat-toggle-btn .chat-badge { position: absolute; top: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%; background: #EF4444; border: 2px solid var(--bg); display: none; } .chat-toggle-btn.has-new .chat-badge { display: block; } .chat-panel { width: 360px; height: 540px; background: rgba(13, 11, 24, 0.92); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 1px solid rgba(168,85,247,0.2); border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(168,85,247,0.08); animation: chatIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes chatIn { from { opacity: 0; transform: translateY(16px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } .chat-header { padding: 14px 16px; background: linear-gradient(90deg, rgba(168,85,247,0.15) 0%, rgba(6,182,212,0.08) 100%); border-bottom: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .chat-header-left { display: flex; align-items: center; gap: 10px; } .chat-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #A855F7, #06B6D4); display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 2px 10px rgba(168,85,247,0.3); flex-shrink: 0; } .chat-name { font-size: 13px; font-weight: 700; color: var(--text); } .chat-status { font-size: 10px; color: var(--teal); margin-top: 1px; } .chat-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; padding: 4px 6px; border-radius: 6px; transition: background 0.15s, color 0.15s; line-height: 1; } .chat-close:hover { background: rgba(255,255,255,0.07); color: var(--text); } .chat-messages { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; } .chat-msg { display: flex; } .chat-msg.user { justify-content: flex-end; } .chat-bubble { max-width: 84%; padding: 9px 13px; border-radius: 14px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .chat-msg.bot .chat-bubble { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: var(--text); border-radius: 4px 14px 14px 14px; } .chat-msg.user .chat-bubble { background: linear-gradient(135deg, rgba(168,85,247,0.32), rgba(6,182,212,0.2)); border: 1px solid rgba(168,85,247,0.28); color: var(--text); border-radius: 14px 4px 14px 14px; } .chat-typing .chat-bubble { display: flex; align-items: center; gap: 4px; padding: 11px 14px; } .chat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: chatDot 1.4s ease-in-out infinite; } .chat-dot:nth-child(2) { animation-delay: 0.2s; } .chat-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes chatDot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } .chat-quick { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 12px 0; flex-shrink: 0; } .chat-quick button { background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.28); color: var(--text); border-radius: 16px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .chat-quick button:hover { background: rgba(168,85,247,0.2); border-color: rgba(168,85,247,0.5); } .chat-input-row { padding: 10px 12px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .chat-field { flex: 1; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 9px !important; padding: 8px 12px !important; font-size: 13px; color: var(--text) !important; } .chat-field:focus { border-color: rgba(168,85,247,0.4) !important; background: rgba(168,85,247,0.06) !important; outline: none; } .chat-send-btn { height: 36px; padding: 0 16px; border-radius: 9px; background: linear-gradient(135deg, #A855F7, #7C3AED); border: none; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.15s, transform 0.1s; box-shadow: 0 2px 10px rgba(168,85,247,0.3); } .chat-send-btn:hover { opacity: 0.85; } .chat-send-btn:active { transform: scale(0.93); } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .three-col { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { :root { --sidebar-w: 56px; } .sidebar { padding: 16px 0; } .sidebar-brand { justify-content: center; padding: 0 0 16px; } .brand-text, .user-info-sm, .nav-label, .nav-section { display: none; } .nav-btn { justify-content: center; padding: 10px; } .nav-badge { margin: 0; } .status-dot { display: none; } .two-col { grid-template-columns: 1fr; } .three-col { grid-template-columns: 1fr; } .stats-row { grid-template-columns: 1fr 1fr; } .form-row { grid-template-columns: 1fr; } .pipeline-grid { flex-direction: column; } .flow-arrow { transform: rotate(90deg); padding: 4px 0; } .kanban { grid-template-columns: repeat(3, minmax(160px, 1fr)); } } @media (max-width: 600px) { .page { padding: 16px; } .topbar { padding: 0 16px; } .topbar-title { font-size: 15px; } .kanban { grid-template-columns: repeat(2, 1fr); } .stats-row { grid-template-columns: 1fr 1fr; } } /* ════════════════════════════════════════════════════════════════════════ NEW APP STRUCTURE ════════════════════════════════════════════════════════════════════════ */ /* Sidebar nav icons */ .nav-ic { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; } .sidebar-foot { margin-top: auto; } /* Topbar */ .topbar { height: 60px; gap: 16px; } .topbar-title { font-size: 18px; font-weight: 800; color: var(--text); margin: 0; } .topbar-right { display: flex; align-items: center; gap: 14px; } .add-job-wrap { position: relative; } .add-job-menu { position: absolute; top: calc(100% + 6px); right: 0; background: #15121f; border: 1px solid var(--border); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 170px; box-shadow: 0 12px 32px rgba(0,0,0,0.45); z-index: 50; } .add-job-menu button { background: none; border: none; color: var(--text); text-align: left; padding: 9px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; } .add-job-menu button:hover { background: var(--bg-hover); } .topbar-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #10B981, #06B6D4); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: #fff; cursor: pointer; flex-shrink: 0; transition: transform 0.15s; } .topbar-avatar:hover { transform: scale(1.08); } /* Getting Started */ .gs-progress-track { height: 8px; background: rgba(255,255,255,0.07); border-radius: 5px; overflow: hidden; margin-bottom: 28px; } .gs-progress-fill { height: 100%; background: linear-gradient(90deg, #A855F7, #10B981); border-radius: 5px; transition: width 0.5s ease; } .gs-steps { display: flex; flex-direction: column; gap: 14px; } .gs-step { display: flex; gap: 16px; padding: 18px 20px; background: var(--bg-card); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.2s; } .gs-step.done { border-color: rgba(16,185,129,0.3); } .gs-check { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; border: 2px solid var(--border-hi); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--cyan); } .gs-step.done .gs-check { background: var(--teal); border-color: var(--teal); color: #fff; } .gs-step-body h3 { font-size: 15px; font-weight: 700; margin-bottom: 5px; } .gs-step-body p { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; } .gs-step.done .gs-step-body h3 { color: var(--teal); } /* Search layout */ .search-grid { display: block; } .search-grid .card { max-width: 560px; } #page-profile { flex-direction: column; gap: 24px; max-width: 1140px; margin: 0 auto; padding-bottom: 40px; } /* display lives on .active only — an ID here would beat `.page { display:none }` and leave the profile visible on every other page. */ #page-profile.active { display: flex; } #page-profile .page-intro { padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 12px; } #page-profile .page-intro h1 { font-size: 32px; margin-bottom: 10px; } #page-profile .page-intro p { max-width: 620px; color: var(--text-muted); font-size: 14px; } .profile-modes { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 6px; margin-bottom: 14px; } .profile-mode-btn { background: transparent; border: none; color: var(--text-muted); padding: 12px 22px; border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s; } .profile-mode-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); } ..profile-mode-btn.active { background: linear-gradient(135deg, #f59e0b, #9333ea); color: #fff; box-shadow: 0 16px 40px rgba(245,158,11,0.14); } .profile-summary-card { background: rgba(16, 20, 42, 0.94); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 24px 26px; } .profile-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; } .summary-card-item { padding: 18px 16px; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } .summary-card-label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px; } .summary-card-value { font-size: 22px; font-weight: 800; color: #fff; } .profile-completion-bar { width: 100%; height: 12px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; } #pf-completion-fill { width: 0; height: 100%; background: linear-gradient(90deg, #f59e0b, #ea580c); transition: width 0.35s ease; } #cv-progress-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: -8px; margin-bottom: 16px; } .progress-step { padding: 12px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: var(--text-muted); font-size: 12px; font-weight: 700; text-align: center; } @media (max-width: 900px) { .profile-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .profile-summary-grid { grid-template-columns: 1fr; } .profile-modes { flex-wrap: wrap; } #cv-progress-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .progress-step.active { background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; border-color: rgba(245,158,11,0.35); } .progress-step.completed { background: rgba(255,255,255,0.07); color: var(--text); } .danger-zone-card { border-color: rgba(255,102,96,0.18); } .danger-note { margin: 0 0 16px; color: var(--text-muted); font-size: 13px; line-height: 1.6; } #pf-reset { color: #ff7a5c; border-color: rgba(255,122,92,0.22); } #pf-reset:hover { background: rgba(255,122,92,0.12); } #page-profile .card { background: rgba(11, 14, 32, 0.92); border: 1px solid rgba(56,189,248,0.12); border-radius: 24px; padding: 28px; box-shadow: 0 24px 70px rgba(0,0,0,0.24); } #page-profile .card + .card { margin-top: 0; } #page-profile .card-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } #page-profile .card-header h2 { font-size: 20px; font-weight: 800; margin: 0; } #page-profile .card-header .hint { font-size: 13px; color: var(--text-muted); margin-top: 6px; } #page-profile .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 18px; } #page-profile .form-row .form-group { margin-bottom: 0; } #page-profile .form-group label { display: block; margin-bottom: 8px; font-size: 12px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.12em; } #page-profile .field { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); padding: 14px 16px; border-radius: 18px; color: var(--text); min-height: 46px; } #page-profile .field::placeholder { color: rgba(226,232,240,0.55); } #page-profile .field:focus { border-color: rgba(56,189,248,0.65); background: rgba(255,255,255,0.1); outline: none; } #page-profile .profile-mode-panel { display: grid; gap: 24px; } #page-profile .drop-zone { border: 2px dashed rgba(255,255,255,0.22); background: rgba(255,255,255,0.04); padding: 36px 20px; border-radius: 24px; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } #page-profile .drop-zone:hover, #page-profile .drop-zone.drag-over { border-color: rgba(56,189,248,0.85); background: rgba(56,189,248,0.16); } #page-profile .drop-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(56,189,248,0.16); color: var(--cyan); font-size: 28px; } #page-profile .drop-icon::before { content: "⬆"; } #page-profile .drop-zone p { font-size: 14px; color: var(--text); font-weight: 700; margin: 0; } #page-profile .drop-hint { display: block; font-size: 12px; color: var(--text-muted); } #page-profile .pf-warn { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .pf-warn-item { background: rgba(251,191,36,0.18); color: #fbbf24; border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 700; } .skill-input-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .skill-input-row .field { flex: 1; min-width: 200px; } .skill-tags { display: flex; flex-wrap: wrap; gap: 10px; } .skill-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(56,189,248,0.16); border: 1px solid rgba(56,189,248,0.25); color: var(--cyan); border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 700; } .repeat-list { display: flex; flex-direction: column; gap: 18px; } .repeat-item { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 22px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; } .repeat-item textarea { grid-column: 1 / -1; min-height: 110px; } .repeat-del { grid-column: 1 / -1; justify-self: start; background: rgba(255,60,80,0.12); border: 1px solid rgba(255,60,80,0.25); color: #ff9ab3; border-radius: 12px; padding: 8px 14px; font-size: 12px; } .repeat-del:hover { background: rgba(255,60,80,0.18); } .pf-photo-row { display: grid; grid-template-columns: 140px 1fr; gap: 24px; margin-bottom: 24px; align-items: start; } .pf-photo-preview { width: 140px; height: 140px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(180deg, rgba(56,189,248,0.16), rgba(124,58,237,0.18)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; font-weight: 800; overflow: hidden; } /* Without this the img keeps its natural size, overflows the 140px box and gets clipped by overflow:hidden — on a waist-up photo that cuts the head off. Bias the crop to the top so the face survives the square. */ .pf-photo-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .pf-photo-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .pf-photo-actions .btn { min-width: 150px; } #page-profile .form-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } #page-profile .btn-ghost { min-width: 170px; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: var(--text); } #page-profile .btn-ghost:hover { background: rgba(255,255,255,0.08); } #page-profile .btn-primary { min-width: 170px; padding: 14px 22px; } #page-profile .card-header { align-items: center; } #page-profile .card-header .pill { background: rgba(56,189,248,0.12); color: var(--cyan); } /* Profile photo + header */ /* Form message OK state already defined; reuse */ /* ── Kanban drag & drop ─────────────────────────────────────────────────── */ .app-card { cursor: grab; } .app-card:active { cursor: grabbing; } .app-card.dragging { opacity: 0.45; } .kanban-cards.drag-over { outline: 2px dashed var(--cyan); outline-offset: -4px; background: var(--cyan-dim); border-radius: 8px; } .kanban-cards { min-height: 70px; } /* ── Job Workspace modal ─────────────────────────────────────────────────── */ .jw-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .jw-overlay.hidden { display: none; } .jw-modal { background: #17132b; border: 1px solid var(--border); border-radius: var(--radius); max-width: 660px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 26px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .jw-modal h2 { margin: 0 30px 2px 0; font-size: 19px; } .jw-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; } /* LangGraph pipeline trace panel */ .jw-graph { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--blue-neon); border-radius: 10px; background: var(--bg-card); } .jw-graph-head { font-size: 13px; margin-bottom: 8px; } .jw-graph-trace { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; } .jw-graph-trace li { font-size: 12px; color: var(--text-muted); list-style: decimal; } .jw-graph-trace strong { color: var(--blue-neon); } .jw-close:hover { color: var(--text); } .jw-company { color: var(--text-muted); margin-bottom: 18px; font-size: 13px; } .jw-match { margin-bottom: 18px; } .jw-match-score { font-size: 30px; font-weight: 700; } .jw-bar { height: 8px; border-radius: 5px; background: var(--bg-hover); overflow: hidden; margin: 8px 0; } .jw-bar > div { height: 100%; border-radius: 5px; } .jw-section { margin-bottom: 20px; } .jw-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 10px; } .jw-gap { display: inline-block; padding: 3px 9px; margin: 0 6px 6px 0; border: 1px solid var(--orange-dim); background: var(--orange-dim); color: var(--orange); border-radius: 20px; font-size: 12px; } .jw-oracle-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .jw-orb { font-size: 30px; filter: drop-shadow(0 0 8px rgba(168,85,247,.6)); } .jw-oracle-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; font-size: 13px; line-height: 1.5; } .jw-oracle-item strong { color: var(--cyan); } .jw-oracle-item a { margin-right: 12px; } .jw-yt { color: #ff5d5d; } .jw-actions { display: flex; gap: 10px; margin: 18px 0 12px; flex-wrap: wrap; } /* ── Oracle "thinking" animation (during AI consultation) ─────────────────── */ .jw-thinking { display:inline-flex; animation: jwPulse 1.15s ease-in-out infinite; } @keyframes jwPulse { 0%,100% { opacity:.5; transform:scale(.94); } 50% { opacity:1; transform:scale(1.06); } } .jw-dots::after { content:''; display:inline-block; width:1.2em; text-align:left; animation: jwDots 1.4s steps(1,end) infinite; } @keyframes jwDots { 0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} } /* ═══ Career Pathway ═══════════════════════════════════════════════════════ */ /* Four columns of role nodes on a shared row grid, so neighbours line up and the connecting curves stay near-horizontal. Every transition is drawn; hovering a role previews its next steps, selecting one lifts its path out of the rest. Level is signalled by a coloured dot as well as by column, so the chart never relies on colour alone. */ .cp-controls-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cp-badge { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; white-space: nowrap; background: var(--cyan-dim); color: var(--cyan); border: 1px solid var(--border-hi); } .cp-badge.is-template { background: var(--orange-dim); color: var(--orange); border-color: var(--orange); } /* ── View switch: one ladder, or the map of all domains ── */ .cp-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; } .cp-tab { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-muted); padding: 8px 18px; border-radius: 999px; transition: background .14s ease, color .14s ease; } .cp-tab:hover { color: var(--text); } .cp-tab.is-on { background: var(--cyan); color: #fff; } .cp-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* ── Overview: every domain, and what leads into it ── */ .cp-overview { margin-bottom: 30px; } .cp-dom-group + .cp-dom-group { margin-top: 30px; } .cp-dom-group-title { font-size: 16px; font-weight: 600; color: var(--text); margin: 0 0 4px; } .cp-dom-group-note { font-size: 12.5px; color: var(--text-muted); margin: 0 0 16px; } /* Cards share a row height so "Leads to" always sits on the same line, which is what makes the domains comparable at a glance. */ .cp-dom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: stretch; } .cp-dom { display: flex; flex-direction: column; gap: 9px; text-align: left; width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 17px; cursor: pointer; color: var(--text); font: inherit; transition: border-color .14s ease, transform .14s ease, background .14s ease; } .cp-dom:hover { border-color: var(--border-hi); background: var(--bg-hover); transform: translateY(-1px); } .cp-dom:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .cp-dom-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cp-dom-name { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; } .cp-dom-flag { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; white-space: nowrap; background: var(--orange-dim); color: var(--orange); border: 1px solid var(--orange); } .cp-dom-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 12px; } .cp-dom-line:first-of-type { flex: 1; align-content: flex-start; } .cp-dom-key { color: var(--text-muted); min-width: 84px; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; } .cp-dom-chip { background: var(--bg-hover); border-radius: 6px; padding: 2px 7px; color: var(--text-muted); font-size: 11.5px; } .cp-dom-role { color: var(--text); font-weight: 500; } .cp-status { padding: 14px 16px; border-radius: 10px; margin-bottom: 16px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); font-size: 14px; } .cp-summary { max-width: 78ch; margin: 0 0 24px; color: var(--text-muted); font-size: 14.5px; line-height: 1.7; } /* ── Chart ── */ .cp-chart-card { padding: 26px 30px 34px; margin-bottom: 24px; } .cp-chart-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; } .cp-chart-hint { margin: 0; font-size: 12.5px; color: var(--text-muted); max-width: 62ch; line-height: 1.6; } .cp-legend { display: flex; gap: 14px; flex-wrap: wrap; } .cp-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); } .cp-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .cp-dot.lvl-start { background: var(--text); } .cp-dot.lvl-feeder { background: var(--text-muted); } .cp-dot.lvl-entry { background: var(--teal); } .cp-dot.lvl-mid { background: var(--cyan); } .cp-dot.lvl-adv { background: var(--orange); } .cp-chart { position: relative; overflow-x: auto; } .cp-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .cp-links path { fill: none; stroke: var(--text-muted); stroke-width: 1.25; opacity: .3; transition: opacity .15s ease; } .cp-links path.is-lit { stroke: var(--cyan); stroke-width: 2; opacity: 1; } .cp-chart.has-focus .cp-links path:not(.is-lit) { opacity: .09; } .cp-cols { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 40px; min-width: 1120px; } .cp-col { display: grid; grid-template-rows: auto var(--cp-rows, repeat(4, 112px)); align-content: start; } .cp-col-head { padding-bottom: 12px; border-bottom: 2px solid var(--text-muted); margin-bottom: 22px; } .cp-col-title { font-size: 15.5px; font-weight: 600; color: var(--text); letter-spacing: -.01em; } .cp-col-years { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; } .cp-col[data-level="entry"] .cp-col-head { border-bottom-color: var(--teal); } .cp-col[data-level="mid"] .cp-col-head { border-bottom-color: var(--cyan); } .cp-col[data-level="adv"] .cp-col-head { border-bottom-color: var(--orange); } /* ── Role node ── */ .cp-node { align-self: center; text-align: left; width: 100%; position: relative; display: flex; align-items: flex-start; gap: 9px; background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 9px 11px; cursor: pointer; color: var(--text); font: inherit; line-height: 1.35; transition: background .14s ease, border-color .14s ease, opacity .2s ease; } .cp-node:hover { background: var(--bg-hover); } .cp-node:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .cp-node .cp-dot { margin-top: 5px; flex: none; } .cp-node-body { min-width: 0; } .cp-node-title { font-size: 14px; font-weight: 500; } .cp-node-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; } .cp-node.is-active { background: var(--cyan-dim); border-color: var(--border-hi); } .cp-node.is-active .cp-node-title { font-weight: 600; } .cp-node.is-compared { border-color: var(--teal); } .cp-cols.has-focus .cp-node { opacity: .32; } .cp-cols.has-focus .cp-node.is-active, .cp-cols.has-focus .cp-node.is-next { opacity: 1; } /* Space is reserved for the quick action even while it is invisible, otherwise it lands on top of the role name the moment the pointer arrives. */ .cp-node.has-add .cp-node-body { padding-right: 74px; } /* Quick action, revealed on hover or keyboard focus of the node. */ .cp-node-add { position: absolute; top: 6px; right: 6px; opacity: 0; font-size: 10.5px; padding: 2px 7px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border-hi); color: var(--cyan); cursor: pointer; line-height: 1.6; } .cp-node:hover .cp-node-add, .cp-node:focus-within .cp-node-add, .cp-node-add:focus-visible { opacity: 1; } /* ── Compare ── */ .cp-compare-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); } .cp-compare-label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); } .cp-compare-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; } .cp-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: var(--teal-dim); color: var(--teal); border: 1px solid var(--teal); } .cp-chip button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; } .cp-compare { overflow-x: auto; margin-bottom: 24px; } .cp-matrix { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; } .cp-matrix th, .cp-matrix td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); } .cp-matrix thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; } .cp-matrix tbody th { font-weight: 400; color: var(--text); } .cp-mark { font-weight: 600; } .cp-mark.yes { color: var(--teal); } .cp-mark.no { color: var(--text-muted); } .cp-matrix tr.is-gap td.cp-gap { color: var(--orange); } /* ── Detail panel ── */ .cp-detail-head { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .cp-detail-title { font-size: 27px; font-weight: 700; color: var(--text); letter-spacing: -.02em; line-height: 1.15; } .cp-detail-sub { color: var(--text-muted); font-size: 13.5px; margin-top: 6px; } .cp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; align-items: start; } .cp-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px 20px; } .cp-panel h4 { font-size: 14.5px; font-weight: 600; color: var(--text); margin: 0 0 5px; } .cp-panel-note { font-size: 11.5px; color: var(--text-muted); line-height: 1.55; margin-bottom: 14px; } .cp-list { list-style: none; margin: 0; padding: 0; counter-reset: cp; } .cp-list li { counter-increment: cp; display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); } .cp-list li:last-child { border-bottom: 0; } .cp-list li::before { content: counter(cp); color: var(--text-muted); font-size: 11px; min-width: 12px; } .cp-list li.has { color: var(--teal); font-weight: 500; } /* A skill the profile already proves. The arrow points at the claim, and the wording says where it came from — not "you have this" but "your profile shows it". */ .cp-list li.has::after { content: '→ present in your profile'; margin-left: auto; font-size: 10.5px; white-space: nowrap; letter-spacing: .01em; } .cp-figure { font-size: 38px; font-weight: 700; color: var(--cyan); letter-spacing: -.03em; line-height: 1; } .cp-figure-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; } .cp-stat { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border); } .cp-salary { font-size: 19px; font-weight: 700; color: var(--teal); letter-spacing: -.01em; } /* ── Learning plan ── */ .cp-plan { grid-column: 1 / -1; } .cp-plan-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.7; color: var(--text); } .cp-plan-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } /* The plan as a workflow: a numbered rail, one step per skill, each carrying the places to actually go and do it. */ .cp-steps { list-style: none; margin: 18px 0 0; padding: 0; } .cp-step { display: flex; gap: 14px; position: relative; padding-bottom: 20px; } .cp-step:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--border); } .cp-step-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; background: var(--cyan-dim); color: var(--cyan); border: 1px solid var(--border-hi); position: relative; z-index: 1; } .cp-step-body { min-width: 0; padding-top: 2px; } .cp-step-skill { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .cp-step-hours { font-size: 11px; font-weight: 400; color: var(--text-muted); } .cp-step-how { font-size: 13px; color: var(--text); margin-top: 4px; } .cp-step-res { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; } .cp-step-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; } .cp-step-link { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; text-decoration: none; background: var(--bg-hover); color: var(--text); border: 1px solid var(--border); } .cp-step-link:hover { border-color: var(--border-hi); color: var(--cyan); } .cp-step-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .cp-req { margin-top: 16px; } .cp-jump { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .cp-jump .cp-step-link { border: 1px solid var(--border-hi); color: var(--cyan); cursor: pointer; font: inherit; font-size: 12px; } .cp-notes { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); } .cp-notes-head { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } @media (max-width: 820px) { .cp-chart-card { padding: 20px 16px 26px; } .cp-cols { gap: 32px; } .cp-detail-title { font-size: 23px; } } /* The node's text lives in spans (a button may not contain block elements). */ .cp-node-title, .cp-node-sub { display: block; } /* ── Identity providers on the auth screen ──────────────────────────────── */ .auth-providers { display: flex; flex-direction: column; gap: 10px; } .provider-btn { justify-content: center; padding: 12px 16px; font-weight: 700; border-color: rgba(255,255,255,0.18); } /* "or" divider: a rule either side of the word, drawn with flex, no extra markup. */ .auth-sep { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; } .auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.14); } /* ── My Account ─────────────────────────────────────────────────────────── */ #page-account { max-width: 900px; margin: 0 auto; } .account-grid { display: flex; flex-direction: column; gap: 20px; } /* One linked provider or one session. Wraps rather than overflowing on mobile. */ .ac-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .ac-row:last-child { border-bottom: none; } .ac-row .hint { margin-top: 3px; } .danger-card { border-color: rgba(255,64,96,0.35); } .pill.ok { background: rgba(16,185,129,0.16); color: var(--teal); } /* ── Admin table ────────────────────────────────────────────────────────── */ /* The table scrolls inside its own box so the page never scrolls sideways. */ .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; } .admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); white-space: nowrap; } .admin-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 700; } .admin-table tbody tr:hover { background: rgba(255,255,255,0.03); } /* ── Registration form ──────────────────────────────────────────────────── */ /* First/last name share a row; collapses to one column on narrow screens. */ .reg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 420px) { .reg-row { grid-template-columns: 1fr; } } .reg-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin: 2px 0 -6px; } .reg-hint { font-size: 11px; color: var(--text-muted); line-height: 1.5; } /* type="date" renders a light-on-light calendar glyph in dark mode. */ @media (prefers-color-scheme: dark) { input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.6); } } :root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.6); } /* ── Email confirmation status ──────────────────────────────────────────── */ .ac-email-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; min-height: 24px; } .pill.warn { background: rgba(255,107,53,0.16); color: var(--orange); } /* ── Light theme, part 2: surfaces that ignored it ─────────────────────────── * * The light theme at the top of this file works by redefining variables. That only * reaches components which actually consume them — and the main surfaces do not: * .sidebar, .topbar and .card each hard-code a dark background, so in light mode * they stayed dark while --text became #1E293B. Dark slate text on a dark navy * card is what made the Professional Profile page unreadable. * * Two reasons these rules live at the END of the file rather than next to the * other light rules: * - Cascade: several targets are only reachable at equal specificity, where the * later rule wins. Declared at the top, .card would beat them. * - #page-profile .field is an ID selector (1,1,0), which outranks * [data-theme="light"] .field (0,2,0) wherever it sits. It needs the ID in * the selector too, not just a later position. * * Dark mode is untouched on purpose: it is the default and it looks right. Every * rule below is scoped to [data-theme="light"]. */ /* Chrome: sidebar and topbar hard-code rgba(10,14,28,·) */ [data-theme="light"] .sidebar { background: var(--sidebar-bg); } [data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.96); } /* Cards. --bg-card is 4% dark on light, which reads as a barely-tinted panel — * the same relationship the dark theme has between its card and its background. */ [data-theme="light"] .card, [data-theme="light"] #page-profile .card, [data-theme="light"] .profile-summary-card { background: #FFFFFF; border-color: var(--border); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); } /* Floating surfaces that also hard-code dark. */ [data-theme="light"] .chat-panel { background: #FFFFFF; } /* The sign-in card: rgba(9,18,34,0.98) is almost opaque navy, so in light mode the * whole login screen was dark text on a dark card. */ [data-theme="light"] .auth-card { background: #FFFFFF; border-color: var(--border); box-shadow: 0 12px 40px rgba(15, 23, 42, 0.10); } /* Read-only output panels: 35% black is a mid grey that fights --text. */ [data-theme="light"] .output-area { background: #FFFFFF; border-color: var(--border); } /* Profile-page inputs. rgba(255,255,255,0.04) is invisible on a light card, and * the near-white placeholder was invisible too. ID in the selector so this * outranks #page-profile .field. */ [data-theme="light"] #page-profile .field { background: #FFFFFF; border: 1px solid var(--border); color: var(--text); } [data-theme="light"] #page-profile .field::placeholder { color: var(--text-dim); } [data-theme="light"] #page-profile .field:focus { background: #FFFFFF; border-color: var(--border-hi); } /* ── Extracted-CV viewer ─────────────────────────────────────────────────── */ .cv-extracted-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0 8px; } .cv-extracted-actions { display: flex; gap: 8px; align-items: center; } /* Preserves the parser's own line breaks and spacing — that layout IS the * diagnostic. wrap rather than scroll horizontally, and cap the height so a * four-page CV cannot push the rest of the page out of reach. */ .cv-extracted-text { margin: 0; max-height: 340px; overflow-y: auto; padding: 14px 16px; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } [data-theme="light"] .cv-extracted-text { background: #FFFFFF; color: var(--text); } /* ── Job workspace: language picker vs. actions ─────────────────────────────── * * "Auto (match job)" used to sit inside .jw-actions between two .btn-ghost buttons, * wearing class="field" plus inline styles. Same radius, same 1px border, same size — * so a dropdown read as a button. Two changes, because it was two problems: * the select moved to its own row, and the real buttons took an accent colour. */ .jw-lang-row { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; } .jw-lang-row label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); } /* Recessed rather than raised, and carrying a chevron: the two cues that say * "choose a value" instead of "press me". The chevron is inline SVG in a data URI — * no external request, which the strict-CSP pages also require. */ .jw-lang-select { appearance: none; -webkit-appearance: none; background-color: rgba(0, 0, 0, 0.28); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2394A3B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; font-size: 13px; padding: 6px 30px 6px 10px; transition: border-color 0.15s; } .jw-lang-select:hover, .jw-lang-select:focus { border-color: var(--border-hi); outline: none; } [data-theme="light"] .jw-lang-select { background-color: #FFFFFF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Secondary actions: tinted in the accent colour so they are unmistakably buttons. * Both custom properties are redefined by the light theme, so this follows it. */ .btn-action { background: var(--cyan-dim); color: var(--cyan); border: 1px solid var(--border-hi); } .btn-action:hover { background: var(--bg-hover); border-color: var(--cyan); } /* ── Interview prep tied to a job ─────────────────────────────────────────── */ .interview-context { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 14px; background: var(--cyan-dim); border: 1px solid var(--border-hi); border-radius: var(--radius-sm); } /* Full-width and under the stage buttons, so it never reads as one of them — * that confusion is exactly what "Interview →" caused. */ .prep-btn { width: 100%; margin-top: 8px; padding: 6px 10px; background: var(--cyan-dim); color: var(--cyan); border: 1px solid var(--border-hi); border-radius: var(--radius-sm); cursor: pointer; font-size: 11px; font-weight: 700; text-align: center; transition: background 0.15s, border-color 0.15s; } .prep-btn:hover { background: var(--bg-hover); border-color: var(--cyan); } /* ── Page hero: illustrated page header ─────────────────────────────────────── * * Reusable. The artwork is drawn in inline SVG rather than shipped as a bitmap: * self-authored, so there is no third-party image in the page, and inlined, so there * is no external request (a strict CSP would block one anyway). * * Per page, set --hero-art to the illustration. To use your own licensed bitmap on * top of it instead, set --hero-image to a url(...) — it paints above the SVG. * * Children are lifted above the scrim so headings stay readable and buttons stay * clickable whatever the artwork does behind them. */ .page-hero { position: relative; overflow: hidden; border-radius: var(--radius); padding: 22px 24px; margin-bottom: 14px; background-image: var(--hero-image, none), var(--hero-art, none); background-repeat: no-repeat, no-repeat; background-position: center right -20px, center right -20px; background-size: cover, 300px 210px; } .page-hero > * { position: relative; z-index: 1; } .page-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 42%, transparent 78%); pointer-events: none; } [data-theme="light"] .page-hero::after { background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 42%, transparent 78%); } .cp-hero-text { max-width: 62ch; } /* Career Pathway — a shield inside orbiting role nodes. */ .cp-hero { --hero-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 220'%3E%3Cg fill='none' stroke='%2338BDF8' stroke-width='1.4' opacity='.5'%3E%3Ccircle cx='160' cy='110' r='34'/%3E%3Ccircle cx='160' cy='110' r='66'/%3E%3Ccircle cx='160' cy='110' r='98'/%3E%3C/g%3E%3Cg fill='%237C3AED' opacity='.55'%3E%3Ccircle cx='160' cy='12' r='6'/%3E%3Ccircle cx='229' cy='41' r='6'/%3E%3Ccircle cx='258' cy='110' r='6'/%3E%3Ccircle cx='229' cy='179' r='6'/%3E%3Ccircle cx='160' cy='208' r='6'/%3E%3Ccircle cx='91' cy='179' r='6'/%3E%3Ccircle cx='62' cy='110' r='6'/%3E%3Ccircle cx='91' cy='41' r='6'/%3E%3C/g%3E%3Cpath d='M160 88l22 10v20c0 14-10 24-22 28-12-4-22-14-22-28V98z' fill='%2338BDF8' opacity='.5'/%3E%3C/svg%3E"); } /* Jobs — the pipeline itself: five stage columns, cards moving left to right. * Pushed further right and sized down so it sits clear of the "+ Add Job" button. */ .tracker-intro { --hero-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 180'%3E%3Cg opacity='.45'%3E%3Crect x='8' y='24' width='52' height='132' rx='8' fill='none' stroke='%2338BDF8' stroke-width='1.3'/%3E%3Crect x='70' y='24' width='52' height='132' rx='8' fill='none' stroke='%2338BDF8' stroke-width='1.3'/%3E%3Crect x='132' y='24' width='52' height='132' rx='8' fill='none' stroke='%2338BDF8' stroke-width='1.3'/%3E%3Crect x='194' y='24' width='52' height='132' rx='8' fill='none' stroke='%2338BDF8' stroke-width='1.3'/%3E%3Crect x='256' y='24' width='52' height='132' rx='8' fill='none' stroke='%2338BDF8' stroke-width='1.3'/%3E%3C/g%3E%3Cg opacity='.6'%3E%3Ccircle cx='34' cy='14' r='4' fill='%2338BDF8'/%3E%3Ccircle cx='96' cy='14' r='4' fill='%23FBBF24'/%3E%3Ccircle cx='158' cy='14' r='4' fill='%2360A5FA'/%3E%3Ccircle cx='220' cy='14' r='4' fill='%2334D399'/%3E%3Ccircle cx='282' cy='14' r='4' fill='%23FF4060'/%3E%3C/g%3E%3Cg fill='%237C3AED' opacity='.5'%3E%3Crect x='78' y='36' width='36' height='22' rx='5'/%3E%3Crect x='140' y='36' width='36' height='22' rx='5'/%3E%3Crect x='140' y='66' width='36' height='22' rx='5'/%3E%3Crect x='202' y='36' width='36' height='22' rx='5'/%3E%3C/g%3E%3Cg stroke='%2334D399' stroke-width='1.4' opacity='.55' fill='none'%3E%3Cpath d='M120 47h14'/%3E%3Cpath d='M182 47h14'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover, 340px 180px; } .cp-where { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .cp-where-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); } .cp-where-chip { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 12px; font-weight: 600; transition: border-color 0.15s, color 0.15s, background 0.15s; } .cp-where-chip:hover { border-color: var(--border-hi); color: var(--text); } .cp-where-chip.is-active { background: var(--cyan-dim); border-color: var(--cyan); color: var(--cyan); } /* The column the visitor was sent to, so the jump is not silent. */ .cp-col.is-focused .cp-col-head { border-bottom-color: var(--cyan); } .cp-col.is-focused .cp-col-title { color: var(--cyan); } /* ── Feedback ─────────────────────────────────────────────────────────────── */ .fb-rating { display: flex; gap: 8px; } .fb-star { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 14px; font-weight: 700; transition: border-color 0.15s, background 0.15s, color 0.15s; } .fb-star:hover { border-color: var(--border-hi); color: var(--text); } .fb-star.is-on { background: var(--cyan-dim); border-color: var(--cyan); color: var(--cyan); } .fb-entry { display: block; } .fb-liked, .fb-improve { margin: 6px 0; font-size: 13px; color: var(--text); } /* Free text from strangers: wrap it rather than let a 2000-character word without a * space stretch the page sideways. */ .fb-liked, .fb-improve { overflow-wrap: anywhere; } /* Free-text columns must wrap. The admin table sets white-space: nowrap so account rows stay on one line; a 2000-character feedback comment under that rule would stretch the table far past the viewport. */ .admin-table-prose td:nth-child(3), .admin-table-prose td:nth-child(4) { white-space: normal; max-width: 340px; line-height: 1.5; }