:root { --fg:#0b1b2b; --muted:#5b6b7b; --card:#fff; --bg:#f6f8fa; --accent:#0a66c2; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica, Arial, sans-serif; }
.container { max-width:760px; margin:0 auto; padding:12px; }
:root { --border:#dfe5eb; }
header { position:sticky; top:0; background:var(--bg); padding:10px 12px; z-index:10; border-bottom:1px solid #e6eaee; }
.header-content { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
h1 { margin:0; font-size:18px; }
nav { display:flex; gap:14px; }
.nav-link { text-decoration:none; color:var(--accent); font-size:14px; font-weight:600; padding-bottom:2px; }
.nav-link.active { border-bottom:2px solid var(--accent); }
/* Control bar */
.control-bar { position:sticky; top:45px; background:var(--bg); z-index:9; padding:8px 0; display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid #e6eaee; }
.control-bar input[type=text], .control-bar input[type=number], .control-bar select {
  border:1px solid #d7dee5; border-radius:8px; padding:6px 8px; font-size:13px; background:#fff; color:var(--fg);
}
.control-bar input[type=text] { flex:1 1 160px; min-width:120px; }
.control-bar input[type=number] { width:80px; }
.dropdown { position:relative; }
.dropdown-btn { border:1px solid #d7dee5; border-radius:8px; padding:6px 10px; font-size:13px; background:#fff; color:var(--fg); cursor:pointer; }
.dropdown-panel {
  position:absolute; top:calc(100% + 4px); left:0; background:#fff; border:1px solid #d7dee5; border-radius:8px;
  padding:8px; box-shadow:0 4px 12px rgba(0,0,0,0.1); z-index:20; min-width:160px; max-height:260px; overflow:auto;
}
.dropdown-toggle-all { display:block; width:100%; margin-bottom:6px; padding:4px 8px; font-size:12px; font-weight:600; border:1px solid #d7dee5; border-radius:6px; background:#f4f6f8; color:var(--fg); cursor:pointer; }
.dropdown-toggle-all:hover { background:#e9edf1; }
.dropdown-panel label { display:flex; align-items:center; gap:6px; font-size:13px; padding:3px 0; cursor:pointer; }
mark.hl { background:#fff3a3; color:inherit; padding:0 1px; border-radius:2px; }
/* List */
.list { display:grid; gap:10px; margin-top:10px; }
.card-row { display:flex; gap:8px; align-items:flex-start; }
.card-row input[type=checkbox] { margin-top:16px; }
.card-row .card { flex:1 1 auto; min-width:0; }
.card {
  position:relative; display:grid; grid-template-columns:56px 1fr; gap:12px;
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px; align-items:start;
  box-shadow:0 1px 0 rgba(0,0,0,0.04); cursor:pointer;
}
.card.viewed { opacity:0.65; }
.card:hover { box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.card-badges { position:absolute; bottom:8px; right:10px; display:flex; gap:4px; }
.mini-badge { font-size:10px; padding:1px 6px; border-radius:5px; background:#eef1f5; color:var(--muted); font-weight:600; }
.mini-badge.applied { background:#e6f7ec; color:#1a7f37; }
.logo {
  width:48px; height:48px; border-radius:8px; overflow:hidden; background:#eef1f5;
  display:grid; place-items:center; font-weight:700; color:#8aa0b6; font-size:14px; flex-shrink:0;
}
.logo img { width:100%; height:100%; object-fit:cover; display:block; }
.card-content { min-width:0; }
.card-header { display:flex; justify-content:space-between; align-items:start; gap:8px; }
.card-title { font-weight:700; font-size:15px; line-height:1.25; color:var(--fg); }
.card-company { color:var(--fg); font-size:13px; margin-top:2px; }
.card-location { color:var(--muted); font-size:12px; }
.card-meta { display:flex; gap:6px; flex-wrap:wrap; color:var(--muted); font-size:12px; margin-top:4px; align-items:center; }
.score-badge { background:#e8f4fd; color:var(--accent); padding:2px 7px; border-radius:6px; font-size:11px; font-weight:700; }
.badge { background:#eef1f5; color:var(--muted); padding:2px 7px; border-radius:6px; font-size:11px; font-weight:600; }
.badge.remote { background:#e6f7ec; color:#1a7f37; }
.badge.source { background:#f3e8ff; color:#6b21a8; text-transform:lowercase; }
.source-logos { display:inline-flex; gap:4px; align-items:center; vertical-align:middle; }
.source-logo { width:18px; height:18px; border-radius:4px; display:inline-block; }
.source-link .source-logo, .linkedin-link .source-logo { width:16px; height:16px; margin-right:6px; vertical-align:-3px; }
.source-link { display:inline-block; background:#fff; color:var(--accent); border:1px solid var(--accent); text-decoration:none; padding:5px 12px; border-radius:8px; font-size:13px; font-weight:600; margin-left:6px; }
.source-link:hover { background:#eef4fb; }
.star-btn { background:none; border:none; font-size:20px; cursor:pointer; color:#fbbf24; padding:0; line-height:1; flex-shrink:0; }
.star-btn:hover { transform:scale(1.2); }
/* Detail view */
.detail-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px; flex-wrap:wrap; }
.detail-header-actions { display:flex; align-items:center; gap:12px; }
.back-btn { background:none; border:none; color:var(--accent); font-size:14px; cursor:pointer; padding:0; font-weight:600; }
.detail-card {
  display:grid; grid-template-columns:64px 1fr; gap:14px;
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; align-items:start;
  box-shadow:0 1px 0 rgba(0,0,0,0.04); margin-bottom:16px;
}
.detail-title { font-weight:700; font-size:18px; line-height:1.3; }
.detail-sub { color:var(--muted); font-size:13px; margin-top:4px; }
.desc-section { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px; }
.desc-section h2 { margin:0 0 10px; font-size:15px; }
.desc-content { font-size:14px; line-height:1.6; color:var(--fg); white-space:pre-wrap; word-break:break-word; }
.desc-content.md-view { white-space:normal; }
.desc-content.md-view p { margin:6px 0; }
.desc-content.md-view a { color:var(--accent); }
.linkedin-link { display:inline-block; background:var(--accent); color:#fff; text-decoration:none; padding:6px 14px; border-radius:8px; font-size:13px; font-weight:600; }
.linkedin-link:hover { background:#004fa3; }
/* Page header */
.page-header { display:flex; align-items:center; gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.page-header h2 { margin:0; font-size:18px; flex:1 1 100%; }
.page-header select { max-width:300px; }
.apply-bar { display:flex; align-items:center; gap:12px; padding:8px 0; flex-wrap:wrap; }
.apply-btn, .action-btn { background:var(--accent); color:#fff; border:none; border-radius:8px; padding:8px 18px; font-size:14px; font-weight:600; cursor:pointer; }
.apply-btn:disabled, .action-btn:disabled { opacity:0.5; cursor:not-allowed; }
.apply-btn:hover:not(:disabled), .action-btn:hover:not(:disabled) { background:#004fa3; }
.secondary-btn { background:#eef1f5; color:var(--fg); border:none; border-radius:8px; padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer; }
.selected-count { font-size:13px; color:var(--muted); }
input[type=checkbox] { width:16px; height:16px; cursor:pointer; accent-color:var(--accent); }
/* Applications page (master-detail) */
.apps-layout { display:flex; gap:16px; align-items:flex-start; }
.apps-list-col { flex:0 0 290px; display:flex; flex-direction:column; gap:8px; position:sticky; top:58px;
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px; }
.apps-toolbar { display:grid; grid-template-columns:1fr; gap:6px; }
.apps-toolbar input, .apps-toolbar select { width:100%; min-width:0; border:1px solid #d7dee5; border-radius:8px; padding:6px 8px; font-size:13px; background:#fff; color:var(--fg); }
.apps-toolbar-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.apps-toolbar-row label { display:flex; flex-direction:column; gap:2px; font-size:11px; color:var(--muted); min-width:0; }
.apps-list { max-height:calc(100vh - 230px); overflow:auto; display:flex; flex-direction:column; gap:4px; }
.apps-list-item { border-radius:8px; padding:8px 10px; cursor:pointer; border-left:3px solid transparent; }
.apps-list-item:hover { background:#eef1f5; }
.apps-list-item.active { background:#e8f4fd; border-left:3px solid var(--accent); }
.apps-list-item-title { font-weight:700; font-size:13px; }
.apps-list-item-sub { color:var(--muted); font-size:12px; margin-top:2px; }
.apps-list-item-date { color:var(--muted); font-size:11px; margin-top:2px; }
.apps-detail { flex:1 1 auto; min-width:0; }
@media (max-width:760px) {
  .apps-layout { flex-direction:column; }
  .apps-list-col { flex:none; width:100%; position:static; }
  .apps-list { max-height:220px; }
}
.app-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:12px; box-shadow:0 1px 0 rgba(0,0,0,0.04); }
.app-card-title { font-weight:700; font-size:14px; }
.app-card-id { color:var(--muted); font-size:12px; font-weight:400; margin-left:6px; }
.gen-block { margin-top:10px; }
.gen-name { font-weight:500; font-size:12px; margin-bottom:4px; color:var(--muted); }
.file-link { display:block; font-size:13px; color:var(--accent); text-decoration:none; padding:2px 0; cursor:pointer; }
.file-link:hover { text-decoration:underline; }
.doc-row { display:flex; align-items:baseline; gap:10px; }
.doc-row .file-link { display:inline; }
.file-alt { font-size:12px; color:var(--muted); }
.root-docs { margin-top:14px; padding-top:8px; border-top:1px solid var(--border); }
.file-muted { color:var(--muted); font-size:12px; }
.clickable-card { cursor:pointer; }
.clickable-card:hover { box-shadow:0 2px 8px rgba(0,0,0,0.08); }
/* Markdown document viewer overlay */
.md-overlay-backdrop { position:fixed; inset:0; background:rgba(11,27,43,0.45); display:grid; place-items:center; z-index:50; padding:20px; }
.md-overlay { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px; max-width:640px; width:100%; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 4px 24px rgba(0,0,0,0.2); }
.md-overlay.wide { max-width:820px; }
.md-overlay textarea { width:100%; min-height:50vh; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; padding:8px; border-radius:8px; border:1px solid #d7dee5; }
.md-overlay-body pre { white-space:pre-wrap; word-break:break-word; font-size:11px; background:#f6f8fa; padding:8px; border-radius:8px; }
.md-overlay-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:10px; }
.md-overlay-title { font-weight:700; font-size:15px; }
.md-overlay-close { background:none; border:none; font-size:16px; cursor:pointer; color:var(--muted); padding:0; }
.md-overlay-body { overflow:auto; font-size:14px; }
.md-overlay-actions { margin-top:12px; }
/* Profile page */
.profile-view h1, .profile-view h2, .profile-view h3 { margin:16px 0 8px; }
.profile-view h1 { font-size:20px; }
.profile-view h2 { font-size:17px; }
.profile-view h3 { font-size:15px; }
.profile-view p { font-size:14px; line-height:1.6; margin:6px 0; }
.profile-view ul { padding-left:20px; font-size:14px; line-height:1.6; }
.profile-panel { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 18px; }
#profile-textarea { width:100%; height:70vh; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; padding:10px; border-radius:8px; border:1px solid #d7dee5; }
.profile-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
/* Model selector (model + effort) */
.model-selector { display:inline-flex; gap:6px; flex-wrap:wrap; }
.model-selector select { border:1px solid #d7dee5; border-radius:8px; padding:6px 8px; font-size:13px; background:#fff; color:var(--fg); max-width:240px; }
/* Recommendations page */
.reco-section { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px 14px; margin-bottom:10px; box-shadow:0 1px 0 rgba(0,0,0,0.04); }
.reco-section > summary { cursor:pointer; font-weight:700; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; list-style:none; display:flex; align-items:center; gap:8px; }
.reco-section > summary::-webkit-details-marker { display:none; }
.reco-section > summary::before { content:"▸"; font-size:12px; }
.reco-section[open] > summary::before { content:"▾"; }
.reco-section-hint { font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); }
.reco-section-body { padding-top:10px; }
.reco-section .control-bar { position:static; padding:0 0 8px; border-bottom:none; flex-wrap:nowrap; overflow-x:auto; }
.reco-topn { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.reco-topn input { width:70px; }
.reco-run-bar { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; overflow-x:auto; }
.reco-run-bar .secondary-btn { margin-left:auto; }
.history-layout { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.cal { flex:0 0 250px; }
.cal-hdr { display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:13px; margin-bottom:6px; }
.cal-hdr button { background:none; border:none; color:var(--accent); cursor:pointer; font-size:14px; padding:0 4px; }
.cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; text-align:center; font-size:12px; }
.cal-dow { color:var(--muted); font-size:10px; font-weight:600; padding:2px 0; }
.cal-day { padding:5px 0; border-radius:6px; color:#b7c2cc; }
.cal-day.has { color:var(--fg); background:#e8f4fd; cursor:pointer; font-weight:600; }
.cal-day.has:hover { background:#d3e8f9; }
.cal-day.sel { background:var(--accent); color:#fff; }
.cal-day.today { outline:1px solid var(--accent); }
.history-runs { flex:1 1 260px; display:flex; flex-direction:column; gap:4px; }
.history-run { display:flex; gap:10px; align-items:center; padding:6px 10px; border-radius:8px; cursor:pointer; font-size:13px; border-left:3px solid transparent; }
.history-run:hover { background:#eef1f5; }
.history-run.active { background:#e8f4fd; border-left-color:var(--accent); }
.history-run-date { font-weight:700; flex:0 0 90px; }
.history-run-meta { color:var(--muted); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-run button { background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; padding:0 4px; }
.history-run button:hover { color:#b91c1c; }
.reco-stats { font-size:12px; color:var(--muted); margin:4px 0 10px; }
.reco-item { display:flex; gap:0; align-items:stretch; margin-bottom:10px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 1px 0 rgba(0,0,0,0.04); }
.reco-rank { flex:0 0 36px; display:grid; place-items:center; font-weight:700; font-size:16px; color:#fff; background:var(--accent); border-radius:12px 0 0 12px; }
.reco-body { flex:1 1 auto; min-width:0; }
.reco-item .card { box-shadow:none; border-radius:0; background:transparent; }
.reco-points { padding:0 14px 12px 14px; display:flex; flex-direction:column; gap:6px; }
.reco-points ul { margin:0; padding-left:18px; font-size:13px; line-height:1.5; }
.reco-points li { margin:2px 0; }
.reco-points li b { color:var(--muted); font-weight:600; }
.reco-just-hdr { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.badge.open { background:#e6f7ec; color:#1a7f37; }
.badge.closed { background:#fee2e2; color:#b91c1c; }
.badge.warn { background:#fff4e0; color:#b45309; }
/* Misc */
.empty { color:var(--muted); text-align:center; padding:40px 0; }
.error-box { background:#fee2e2; color:#b91c1c; border-radius:8px; padding:10px 14px; margin:10px 0; font-size:13px; }
.info-box { background:#e8f4fd; color:#0a66c2; border-radius:8px; padding:10px 14px; margin:10px 0; font-size:13px; }
.info-box a { color:var(--accent); }
.usage-box { background:var(--card,#fff); border:1px solid #e5e7eb; border-radius:8px; padding:12px 14px; margin:0 0 14px; font-size:13px; }
.usage-box b { font-weight:700; }
.loading { text-align:center; color:var(--muted); padding:20px 0; font-size:13px; }
.stats { background:#e8f4fd; border-radius:10px; padding:8px 12px; margin-bottom:8px; font-size:13px; color:var(--accent); }
.run-link { color:var(--accent); font-size:12px; text-decoration:none; }
.run-link:hover { text-decoration:underline; }
@media (min-width:760px) {
  .card { grid-template-columns:64px 1fr; padding:14px; }
  .card-title { font-size:16px; }
}
/* User chip */
.user-chip { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.user-chip button { background:none; border:none; color:var(--accent); font-size:12px; cursor:pointer; padding:0; text-decoration:underline; }
/* Login page */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login-card { background:var(--card); border-radius:14px; padding:28px; max-width:380px; width:100%; box-shadow:0 4px 20px rgba(0,0,0,0.08); }
.login-card h1 { margin:0 0 18px; font-size:20px; text-align:center; }
.login-users { display:grid; gap:8px; margin-bottom:18px; }
.login-user-btn { background:#eef1f5; border:2px solid transparent; border-radius:8px; padding:10px 14px; font-size:14px; font-weight:600; color:var(--fg); cursor:pointer; text-align:left; }
.login-user-btn:hover { background:#e0e6ec; }
.login-user-btn.last { border-color:var(--accent); }
.login-new { display:flex; gap:8px; }
.login-new input { flex:1; border:1px solid #d7dee5; border-radius:8px; padding:8px 10px; font-size:13px; }
.login-connect { display:block; text-align:center; text-decoration:none; padding:10px 18px; }
.login-note { margin:14px 0 0; font-size:12px; color:var(--muted); text-align:center; }
.login-note a { color:var(--accent); }
.account-field { display:block; margin:10px 0; font-size:13px; }
.account-field span { display:block; color:var(--muted); margin-bottom:4px; }
.account-field input { width:100%; max-width:360px; padding:7px 9px; border:1px solid #d1d5db; border-radius:6px; font:inherit; }
.account-box .login-note { text-align:left; }
.account-email { margin:16px 0 0; }
.ok-box { background:#dcfce7; color:#166534; border-radius:8px; padding:10px 14px; margin:10px 0; font-size:13px; }
.user-chip a.user-name { color:inherit; text-decoration:none; }
.user-chip a.user-name:hover { text-decoration:underline; }