/* ---------- theme tokens (light/dark, see script.js applyTheme()) ---------- Dark is the site's original look and stays the default (no data-theme attribute, or an explicit data-theme="dark"). "Auto" means: no explicit choice saved anywhere, so the OS-level prefers-color-scheme decides — that's the plain :root block below, overridden by the media query only when the OS says light. An explicit user choice (account page or, for guests, localStorage) stamps data-theme="light"/"dark" on , which always wins over the OS setting. --tint-rgb is the one trick doing most of the work: nearly every card/ input border and hover tint in this file was written as rgba(255,255,255, some-alpha) — "a bit lighter than the dark page". Routing all of those through rgba(var(--tint-rgb), alpha) means a single variable flip (white → near-black) re-derives every one of those tints correctly for a light page ("a bit darker than the page") without re-tuning dozens of individual alpha values by hand. */ :root { --bg-page: #141516; --bg-sidebar: #0f1011; --bg-surface: #1a1b1d; --bg-surface-hover: #232527; --text-primary: #f2f0ee; --text-secondary: #dedcda; --text-muted: #9a999b; --text-faint: #68676a; --tint-rgb: 255,255,255; --modal-backdrop: rgba(10,10,11,0.72); --accent: #ff7a45; --accent-ink: #141516; --accent-link: #ff8659; --accent-link-hover: #ffa27a; --accent-light: #ff9d6e; color-scheme: dark; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --bg-page: #f6f5f3; --bg-sidebar: #ffffff; --bg-surface: #ffffff; --bg-surface-hover: #eeece9; --text-primary: #1c1b1a; --text-secondary: #474543; --text-muted: #716f6d; --text-faint: #98958f; --tint-rgb: 20,18,16; --modal-backdrop: rgba(40,38,36,0.4); color-scheme: light; } } :root[data-theme="light"] { --bg-page: #f6f5f3; --bg-sidebar: #ffffff; --bg-surface: #ffffff; --bg-surface-hover: #eeece9; --text-primary: #1c1b1a; --text-secondary: #474543; --text-muted: #716f6d; --text-faint: #98958f; --tint-rgb: 20,18,16; --modal-backdrop: rgba(40,38,36,0.4); color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: 'Manrope', system-ui, -apple-system, sans-serif; background: var(--bg-page); color: var(--text-primary); overflow: hidden; } /* The app (onboarding + chat) is a fixed-height, non-scrolling single view (see body{overflow:hidden} above) — but the SEO landing page is a normal, scrollable marketing page. This class (added/removed by the inline script in index.php) switches body back to normal document flow while the landing section is showing. */ body.landing-mode { overflow: auto; height: auto; min-height: 100%; } a { color: var(--accent-link); text-decoration: none; } a:hover { color: var(--accent-link-hover); } button { font-family: inherit; border: none; background: none; } /* ---------- shared bits ---------- */ .btn-ghost { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-primary); border: 1px solid rgba(var(--tint-rgb), 0.16); border-radius: 8px; padding: 8px 14px; cursor: pointer; transition: background .15s, border-color .15s; } .btn-ghost:hover { background: rgba(var(--tint-rgb), 0.07); border-color: rgba(var(--tint-rgb), 0.24); } .btn-ghost.sm { font-size: 12px; padding: 6px 11px; } .btn-accent { font-size: 13.5px; font-weight: 700; color: var(--accent-ink); background: var(--accent); border-radius: 9px; padding: 10px 18px; cursor: pointer; transition: filter .15s; } .btn-accent:hover { filter: brightness(1.08); } .btn-accent.sm { font-size: 12px; padding: 6px 12px; border-radius: 8px; } .btn-accent:disabled { opacity: .35; cursor: not-allowed; filter: none; } .icon-btn { width: 46px; height: 46px; border-radius: 11px; border: 1px solid rgba(var(--tint-rgb), 0.16); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .icon-btn:hover { background: rgba(var(--tint-rgb), 0.08); } .section-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 8px; } .row-gap8 { display: flex; gap: 8px; } .mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ---------- onboarding ---------- */ .onboarding { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 36px 24px; position: relative; overflow-y: auto; } .ob-logo { position: absolute; top: 36px; left: 40px; display: flex; align-items: center; gap: 10px; } .ob-name { font-weight: 800; font-size: 15px; letter-spacing: -0.02em; line-height: 1.2; } .ob-sub { font-size: 10px; color: var(--text-faint); line-height: 1.2; } .ob-wrap { width: 100%; max-width: 560px; margin-top: 88px; } .ob-progress { display: flex; gap: 6px; margin-bottom: 28px; } .ob-progress .seg { height: 4px; flex: 1; border-radius: 3px; background: rgba(var(--tint-rgb), 0.1); transition: background .2s; } .ob-progress .seg.active { background: var(--accent); } .ob-card { background: var(--bg-surface); border: 1px solid rgba(var(--tint-rgb), 0.1); border-radius: 20px; padding: 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); } .ob-step-label { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 10px; } .ob-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; } .ob-subtitle { font-size: 13.5px; color: var(--text-muted); margin-bottom: 26px; line-height: 1.5; } .ob-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .ob-stack { display: flex; flex-direction: column; gap: 12px; } .ob-row, .ob-role-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; border: 1px solid rgba(var(--tint-rgb), 0.12); border-radius: 11px; background: var(--bg-page); cursor: pointer; color: var(--text-muted); transition: border-color .15s; } .ob-row:hover, .ob-role-card:hover { border-color: rgba(var(--tint-rgb), 0.22); } .ob-row.selected, .ob-role-card.selected { border-color: var(--accent); background: rgba(255,122,69,0.1); color: var(--accent); } .ob-role-card { align-items: flex-start; gap: 13px; padding: 16px; } .ob-role-title { font-size: 14.5px; font-weight: 700; color: var(--text-primary); } .ob-role-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; } .ob-row-label { font-size: 14px; font-weight: 700; } .ob-row-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .ob-row-code { font-size: 11px; color: var(--text-faint); font-weight: 700; letter-spacing: .03em; } .ob-check-icon { display: none; } .ob-row.selected .ob-check-icon, .ob-role-card.selected .ob-check-icon { display: block; } .ob-search { display: flex; align-items: center; gap: 9px; border: 1px solid rgba(var(--tint-rgb), 0.14); border-radius: 10px; padding: 9px 13px; margin-bottom: 14px; color: var(--text-faint); font-size: 13.5px; } .ob-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; } .ob-dropzone { border: 1.5px dashed rgba(var(--tint-rgb), 0.2); border-radius: 12px; padding: 22px; text-align: center; margin-top: 2px; cursor: pointer; } .ob-dz-title { font-size: 13px; color: var(--text-muted); } .ob-dz-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; } .ob-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .ob-chip { font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 20px; border: 1px solid rgba(var(--tint-rgb), 0.14); color: var(--text-secondary); cursor: pointer; transition: border-color .15s; } .ob-chip:hover { border-color: rgba(var(--tint-rgb), 0.26); } .ob-chip.selected { border-color: var(--accent); background: rgba(255,122,69,0.14); color: var(--accent-light); } .ob-field-label { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; } .ob-input { width: 100%; border: 1px solid rgba(var(--tint-rgb), 0.14); border-radius: 10px; padding: 11px 13px; font-size: 13.5px; background: var(--bg-page); color: var(--text-primary); font-family: inherit; } .ob-input::placeholder { color: var(--text-faint); } .ob-center { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0 4px; } .ob-check { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,122,69,0.14); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .ob-finish-title { font-size: 20px; font-weight: 800; margin-bottom: 8px; } .ob-finish-sub { font-size: 13.5px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.5; } .ob-finish-btn { width: 100%; padding: 13px; border-radius: 11px; font-size: 14px; } .ob-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; } .ob-nav #obBack { visibility: hidden; } .ob-nav #obBack.show { visibility: visible; } .ob-login { text-align: center; font-size: 12.5px; color: var(--text-faint); margin-top: 22px; } .ob-login.hide { display: none; } /* ---------- plan cards (Pack 1 / Pack 2) ---------- */ .plan-card { position: relative; border: 1.5px solid rgba(var(--tint-rgb), 0.12); border-radius: 13px; background: var(--bg-page); padding: 16px 16px 16px 44px; cursor: pointer; transition: border-color .15s; } .plan-card:hover { border-color: rgba(var(--tint-rgb), 0.24); } .plan-card.selected { border-color: var(--accent); background: rgba(255,122,69,0.07); } .plan-check { position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(var(--tint-rgb), 0.22); display: flex; align-items: center; justify-content: center; } .plan-card.selected .plan-check { border-color: var(--accent); background: rgba(255,122,69,0.18); } .plan-check svg { display: none; } .plan-card.selected .plan-check svg { display: block; } .plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .plan-name { font-size: 14.5px; font-weight: 700; color: var(--text-primary); } .plan-price { font-size: 12px; font-weight: 700; color: var(--accent-light); white-space: nowrap; } .plan-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; margin-top: 4px; } .plan-expand { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(var(--tint-rgb), 0.12); cursor: default; } .plan-key-hint { font-size: 11.5px; color: var(--text-faint); line-height: 1.5; margin-top: 7px; } .paypal-slot { margin-top: 14px; min-height: 44px; } .plan-status { font-size: 12.5px; margin-top: 10px; line-height: 1.4; } .plan-status.ok { color: #4ade80; } .plan-status.err { color: #f87171; } /* ---------- sidebar plan banner (upgrade CTA) ---------- */ .plan-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(255,122,69,0.1); border: 1px solid rgba(255,122,69,0.25); border-radius: 10px; padding: 10px 12px; margin: 6px 0 2px; font-size: 12px; color: var(--accent-light); line-height: 1.4; } .plan-banner-btn { flex-shrink: 0; background: var(--accent); color: var(--accent-ink); border: none; border-radius: 7px; padding: 6px 11px; font-size: 12px; font-weight: 700; cursor: pointer; } .plan-banner-btn:hover { filter: brightness(1.08); } /* ---------- app shell ---------- */ /* Fixed to the viewport via inset (not height:100% inherited from html/body) so the app-shell can never be broken by a third-party script overriding its inline height. Google's AdSense "Auto ads" (anchor ads specifically, when enabled at the AdSense-account level, independent of this codebase's own 5 manual ad slots) has been observed injecting `style="height:auto !important"` directly onto #app plus a padding-bottom on to make room for an anchor ad it inserts — this app is a fixed single-screen SPA (body has overflow:hidden; see above) that manages its own internal scroll areas, so an ancestor losing its fixed height turns the whole thing into a normal flowing page instead, breaking every overlay/scroll region built on the assumption of a fixed viewport-height shell (found 2026-09-15, see the AdSense-compliance notes). With `position:fixed; inset:0`, even an injected `height:auto` resolves via the CSS auto-height-with-both- insets-set algorithm to exactly fill the viewport, so this survives that mutation regardless of what the ad script does to the height property. See also: consider disabling Auto ads/anchor ads specifically in the AdSense account if this is undesired at the product level, since the codebase already manages its own 5 ad placements deliberately. */ .app { display: flex; position: fixed; inset: 0; } .sidebar { /* 2026-09-17: widened from 272px so longer "Recent" chat titles have room to actually show instead of getting cut off after just a few words (.hist-item below still ellipsizes anything longer than this). */ width: 320px; flex-shrink: 0; background: var(--bg-sidebar); border-right: 1px solid rgba(var(--tint-rgb), 0.07); display: flex; flex-direction: column; padding: 18px 14px; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; } .brand-name { font-weight: 800; font-size: 16px; letter-spacing: -0.02em; line-height: 1.2; } .brand-sub { font-size: 10.5px; color: var(--text-faint); line-height: 1.2; } .new-chat { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid rgba(var(--tint-rgb), 0.14); border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-primary); transition: background .15s; } .new-chat:hover { background: rgba(var(--tint-rgb), 0.07); } .side-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text-faint); text-transform: uppercase; margin: 20px 8px 8px; } .nav-list { display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--text-muted); font-weight: 500; cursor: pointer; transition: opacity .15s; } .nav-item:hover { opacity: .85; } .nav-item.active { background: rgba(255,122,69,0.14); color: var(--accent-light); font-weight: 700; } .hist-list { display: flex; flex-direction: column; gap: 1px; } .hist-item { padding: 8px 12px; border-radius: 8px; font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .hist-item:hover { background: rgba(var(--tint-rgb), 0.05); } .hist-item.active { background: rgba(255,122,69,0.14); color: var(--accent-light); } .hist-note { font-size: 11.5px; color: var(--text-faint); padding: 2px 12px 8px; line-height: 1.4; } .side-spacer { flex: 1; } .profile-row { display: flex; align-items: center; gap: 10px; padding: 14px 8px 4px; border-radius: 10px; border-top: 1px solid rgba(var(--tint-rgb), 0.07); margin-top: 8px; } .profile-action { background: none; border: 1px solid rgba(var(--tint-rgb), 0.14); color: var(--text-muted); font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 7px; cursor: pointer; flex-shrink: 0; transition: opacity .15s; } .profile-action:hover { opacity: .8; color: var(--text-primary); } .auth-input { background: var(--bg-surface); border: 1px solid rgba(var(--tint-rgb), 0.12); color: var(--text-primary); font-size: 13.5px; padding: 11px 13px; border-radius: 9px; width: 100%; } .auth-input:focus { outline: none; border-color: var(--accent-link); } .auth-error { background: rgba(255,77,77,0.12); border: 1px solid rgba(255,77,77,0.3); color: #ff9d9d; font-size: 12.5px; padding: 9px 12px; border-radius: 8px; margin-top: 14px; line-height: 1.4; } .auth-switch { margin-top: 14px; font-size: 13px; color: var(--text-muted); } .link-btn { background: none; border: none; color: var(--accent-light); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; margin-left: 2px; } .link-btn:hover { text-decoration: underline; } .avatar { width: 28px; height: 28px; border-radius: 50%; background: #3a2c24; color: var(--accent-light); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .profile-info { flex: 1; min-width: 0; } .profile-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-plan { font-size: 11.5px; color: var(--text-faint); } .icon-btn.sm { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; } /* ---------- country switcher (sidebar, bottom) ---------- */ .country-row { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 4px; padding: 9px 8px; border-radius: 8px; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 12.5px; font-weight: 600; transition: background .15s; } .country-row:hover { background: rgba(var(--tint-rgb), 0.05); color: var(--text-primary); } .country-row-value { margin-left: auto; color: var(--text-faint); font-weight: 700; } /* ---------- account overlay ---------- */ /* 4 tabs don't fit a narrow phone's card width side by side (this WAS overflowing invisibly off the edge of the card with no way to reach the last tab, and tapping it via keyboard/programmatic focus dragged the whole overlay sideways to bring it into view — see the build notes, 2026-09-15). Scroll horizontally instead of wrapping: a tab strip that wraps to 2 lines looks broken, a scrollable one is a familiar pattern. overflow-x:hidden on .overlay-card above is a second safety net so this row is the only thing that can ever need its own scrollbar. */ .account-tabs { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid rgba(var(--tint-rgb), 0.08); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .account-tabs::-webkit-scrollbar { display: none; } .account-tab { background: none; border: none; padding: 9px 12px; font-size: 12.5px; font-weight: 700; color: var(--text-faint); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; white-space: nowrap; flex-shrink: 0; } .account-tab:hover { color: var(--text-primary); } .account-tab.active { color: var(--accent-light); border-bottom-color: var(--accent); } .account-panel { padding-top: 18px; display: flex; flex-direction: column; } .account-panel .ob-field-label { margin-bottom: 6px; } .theme-options { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .theme-opt { text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(var(--tint-rgb), 0.12); background: var(--bg-page); color: var(--text-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .15s; } .theme-opt:hover { border-color: rgba(var(--tint-rgb), 0.24); } .theme-opt.active { border-color: var(--accent); background: rgba(255,122,69,0.1); color: var(--accent-light); } .saved-jobs-list { display: flex; flex-direction: column; gap: 10px; } .saved-job-item { border: 1px solid rgba(var(--tint-rgb), 0.1); border-radius: 12px; padding: 13px; background: var(--bg-page); display: flex; align-items: center; gap: 12px; } .saved-job-info { flex: 1; min-width: 0; } .saved-job-info.clickable { cursor: pointer; } .saved-job-info.clickable:hover .saved-job-title { color: var(--accent-light); } .saved-job-info.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .saved-job-title { font-weight: 700; font-size: 13.5px; color: var(--text-primary); } .saved-job-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .empty-note { font-size: 13px; color: var(--text-faint); line-height: 1.5; padding: 6px 0; } .cv-file-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid rgba(var(--tint-rgb), 0.1); border-radius: 10px; padding: 11px 13px; background: var(--bg-page); margin-top: 6px; font-size: 13px; color: var(--text-primary); } .cv-upload-hint { font-size: 12px; color: var(--text-faint); line-height: 1.4; } .main { flex: 1; display: flex; flex-direction: column; height: 100%; min-width: 0; } .chatarea { position: relative; flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 44px 24px 24px; } .chatarea::-webkit-scrollbar { width: 8px; } .chatarea::-webkit-scrollbar-thumb { background: rgba(var(--tint-rgb), 0.12); border-radius: 4px; } .chat-inner { width: 100%; max-width: 760px; } .welcome { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 60px; } .welcome-mark { width: 52px; height: 52px; border-radius: 14px; background: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .welcome-title { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; } .welcome-sub { font-size: 14.5px; color: var(--text-muted); margin-bottom: 32px; max-width: 440px; line-height: 1.5; } .sugg-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; width: 100%; text-align: left; } .sugg-card { border: 1px solid rgba(var(--tint-rgb), 0.1); border-radius: 12px; padding: 16px; background: var(--bg-surface); cursor: pointer; transition: background .15s, border-color .15s; } .sugg-card:hover { background: var(--bg-surface-hover); border-color: rgba(var(--tint-rgb), 0.18); } .sugg-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; } .sugg-ex { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; } .thread { display: flex; flex-direction: column; gap: 16px; } .thread-empty { display: flex; gap: 10px; } .jd-source-note { margin-top: 14px; font-size: 12px; color: var(--text-faint); line-height: 1.5; } .msg-row { display: flex; gap: 10px; align-items: flex-start; } .msg-row.right { justify-content: flex-end; } .bubble.user { max-width: 72%; background: rgba(255,122,69,0.13); border: 1px solid rgba(255,122,69,0.25); border-radius: 16px 16px 4px 16px; padding: 11px 15px; font-size: 14px; line-height: 1.5; } .ai-avatar { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .bubble.ai { max-width: 82%; background: var(--bg-surface); border: 1px solid rgba(var(--tint-rgb), 0.08); border-radius: 16px 16px 16px 4px; padding: 14px 16px; font-size: 14px; line-height: 1.55; } .file-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--tint-rgb), 0.1); border-radius: 8px; padding: 5px 9px; margin-top: 8px; font-size: 12px; } /* "Bring your own Claude key" (2026-09-16c) — a subtle per-message badge confirming a reply was answered by the visitor's OWN Anthropic key, not the site's shared Groq key. Deliberately quiet (small, muted, no background) since it's a confirmation for a visitor who opted in, not a promotional element. */ .ai-provider-badge { margin-top: 9px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-faint); text-transform: uppercase; } .check-line { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 7px; } .check-line svg { flex-shrink: 0; margin-top: 2px; } .check-line span { font-size: 13.5px; } .rewrite-card { border: 1px solid rgba(var(--tint-rgb), 0.1); border-radius: 12px; padding: 13px; background: var(--bg-page); margin-top: 14px; } .q-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .q-card { border: 1px solid rgba(var(--tint-rgb), 0.1); border-radius: 12px; padding: 13px; background: var(--bg-page); display: flex; gap: 11px; } .q-num { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,122,69,0.16); color: var(--accent-light); font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .q-title { font-weight: 700; font-size: 13.5px; } .q-tip { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; } .interview-answer { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(var(--tint-rgb), 0.04); border: 1px solid rgba(var(--tint-rgb), 0.08); font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; } .cover-letter-card { border: 1px solid rgba(var(--tint-rgb), 0.1); border-radius: 12px; padding: 16px; background: var(--bg-page); margin-top: 14px; } .cover-letter-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .cover-letter-body { display: flex; flex-direction: column; gap: 12px; } .cover-letter-para { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); } .cover-letter-signoff { color: var(--text-primary); font-weight: 600; margin-top: 4px; } .letter-card { border: 1px solid rgba(var(--tint-rgb), 0.1); border-radius: 12px; padding: 16px; background: var(--bg-page); margin-top: 12px; font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); } .jobboard-thread { gap: 0; } .jobboard-search-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .jobboard-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(var(--tint-rgb), 0.14); border-radius: 10px; padding: 10px 13px; background: var(--bg-surface); } .jobboard-search input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13.5px; color: var(--text-primary); } .jobboard-search input::placeholder { color: var(--text-faint); } /* 2026-09-16b: the "Filters" toggle button that shows/hides #jbFiltersPanel — see the redesign note in app-shell.php. Kept visually consistent with .jobboard-search (same height/border/radius) so the two sit together as one control row rather than looking like mismatched widgets. */ .jobboard-filters-toggle { display: flex; align-items: center; gap: 6px; flex-shrink: 0; border: 1px solid rgba(var(--tint-rgb), 0.14); border-radius: 10px; padding: 10px 13px; background: var(--bg-surface); color: var(--text-secondary); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; } .jobboard-filters-toggle:hover { border-color: rgba(var(--tint-rgb), 0.26); } .jobboard-filters-toggle.active { border-color: var(--accent); color: var(--accent-light); } .jobboard-filters-badge { background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 800; border-radius: 999px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; } /* The grouped, labeled filter panel toggled by .jobboard-filters-toggle — replaces what used to be several always-visible chip rows stacked directly under the search box (cluttered/inconsistent wrapping on a real page, per user report). Each group only renders when it has something to show (see jbChipRow()'s group-hiding logic in script.js). */ .jobboard-filters-panel { border: 1px solid rgba(var(--tint-rgb), 0.1); border-radius: 12px; padding: 14px; margin-bottom: 14px; background: var(--bg-surface); display: flex; flex-direction: column; gap: 14px; } .jobboard-filter-group:last-child { margin-bottom: 0; } .jobboard-filter-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; } .jobboard-filters { display: flex; flex-wrap: wrap; gap: 8px; } .jobboard-filters .ob-chip { padding: 6px 12px; font-size: 12.5px; } .jobboard-toggle-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .jobboard-more { align-self: center; margin: 6px auto 0; } .jobboard-count { font-size: 12px; color: var(--text-muted); margin: 2px 0 12px; } .jobboard-section-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 4px 0 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(var(--tint-rgb), 0.1); } #jbExternalSection { margin-bottom: 18px; padding-bottom: 6px; border-bottom: 1px solid rgba(var(--tint-rgb), 0.08); } .jobboard-ext-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(var(--tint-rgb), 0.1); } .jobboard-ext-header .jobboard-section-title { margin: 0; padding: 0; border: none; } .jobboard-ext-filter { display: flex; align-items: center; gap: 7px; border: 1px solid rgba(var(--tint-rgb), 0.14); border-radius: 8px; padding: 6px 10px; background: var(--bg-surface); flex-shrink: 0; } .jobboard-ext-filter input { border: none; outline: none; background: transparent; font-family: inherit; font-size: 12.5px; color: var(--text-primary); width: 170px; max-width: 42vw; } .jobboard-ext-filter input::placeholder { color: var(--text-faint); } .jobboard-ext-empty { font-size: 12.5px; color: var(--text-muted); padding: 10px 2px; } /* "Page X of Y" + Previous/Next for the Jooble block (2026-09-18) — see renderJobBoardExternalPager() in script.js. */ .jobboard-ext-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 12px 0 2px; } .jobboard-ext-page-btn { font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-primary); border: 1px solid rgba(var(--tint-rgb), 0.16); border-radius: 8px; padding: 7px 14px; cursor: pointer; transition: background .15s, border-color .15s, opacity .15s; } .jobboard-ext-page-btn:hover:not(:disabled) { background: rgba(var(--tint-rgb), 0.07); border-color: rgba(var(--tint-rgb), 0.24); } .jobboard-ext-page-btn:disabled { opacity: .4; cursor: default; } .jobboard-ext-page-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; } /* 2026-09-16: lets a visitor browse another supported country's Jooble feed for just this section, without touching their own saved account country (api/set_country.php is untouched by this control — see api/browse_jobs.php's extCountry param). Styled to match .jobboard-ext-filter rather than a bare native