:root {
    --color-blue: #1967D2;
    --color-blue-secondary: #176BFB;
    --color-red: #ED4141;
    --color-green: #3CA455;
    --color-orange: #E67337;
    --color-black: #110F24;
    --color-gray-medium: #CCCED0;
    --color-gray-light: #ECECEE;
    --color-gray-lighter: #F6F6F9;
    --color-blue-rgb: 25,103,210;
    --color-red-rgb: 237,65,65;
    --color-green-rgb: 60,164,85;
    --color-orange-rgb: 230,115,55;

}

body { font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 16px; line-height: 24px; color: var(--color-black); font-size-adjust: 0.5;
    /* Sticky-footer flex column: <main> grows to fill the viewport on short pages so the footer
       always sits at the bottom edge instead of leaving a gap of white space below it. */
    display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
.footer-container { flex-shrink: 0; }
h1, h2, h3, h4, h5, h6, .hero-heading { font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; font-weight: 700; font-size-adjust: 0.536; }

h1, .hero-heading { font-size: 2.5rem; line-height: 1.4em;}
h2 { font-size: 2rem; line-height: 1.4em; }
h3 { font-size: 1.7rem; line-height: 1.4em;}
h4 { font-size: 1.25rem; line-height: 1.4em; }
h5 { font-size: 1.125rem; line-height: 1.4em; }

@media (max-width: 992px) {
    h1, .hero-heading { font-size: 2rem; line-height: 1.4em;}
    h2 { font-size: 1.7rem; line-height: 1.4em; }
    h3 { font-size: 1.5rem; line-height: 1.4em;}
    h4 { font-size: 1.25rem; line-height: 1.4em; }
    h5 { font-size: 1.125rem; line-height: 1.4em; }
}

a { color: var(--color-blue); }
a:link, a:visited { text-decoration: none; }
a:hover, a:active { text-decoration: underline; }

blockquote { margin: 1em 0 1em 1.5em ;}
.flex-break { flex-basis: 100%; height: 0; }
.flex-break-column { flex-basis: 100%; width: 0; }

/*********************/
/* Components        */
/*********************/

/* Top Nav Bar */
@media (min-width: 992px) { .navbar { height: 5rem } }
.navbar { background-color: var(--color-gray-lighter); }
.navbar .nav-item a { text-decoration: none; }
.navbar a.h1 { color: var(--color-blue); text-decoration: none; }
.navbar .navbar-brand { white-space: normal; line-height: 1.5em; }

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu{ display: none; }
    .navbar .nav-item:hover .dropdown-menu{ display: block; }
    .navbar .nav-item .dropdown-menu{ margin-top:0; }
}

/* Hero */
@media (min-width: 992px) and (max-width: 2000px) {
    .section-hero, .section-tool-hero { background-image: url('/images/v3/hero_bg_star.svg'); background-position: right top; background-repeat: no-repeat; background-size: 500px auto; }
    .section-hero.no-bg { background-image: none; }
}
.section-hero h1 .highlight { color: var(--color-blue); }
.section-hero .action input { padding: 0.75em 1.5em; border: 0; background-color: var(--color-blue); color: #FFF; border-radius: 0.375rem; box-sizing:content-box; font-size:1.125rem; cursor: pointer; font-weight: 700; }
.section-hero .action input:hover { background-color: var(--color-blue-secondary); }
.section-hero .hero-heading { margin-bottom: .5rem; }

/* Footer */
.footer-container { background-color: var(--color-gray-lighter); line-height: 1.6em; font-size: 0.9em; border-top: 1px solid #e5e7eb; margin-top: 4rem; }
.footer-container .footer-columns h3 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #555; margin-bottom: 0.75rem; }
.footer-container .footer-columns ul { list-style: none; padding-left: 0; margin: 0; }
.footer-container .footer-columns ul li { padding: 0.2rem 0; }
.footer-container .footer-columns a { color: #333; text-decoration: none; }
.footer-container .footer-columns a:hover { color: var(--color-blue); text-decoration: underline; }
.footer-container .footer-bottom { border-top: 1px solid #d8dce1; color: #666; }
.footer-container .footer-bottom a { color: #666; }
.footer-container.footer-minimal { background-color: var(--color-gray-lighter); border-top: 1px solid #e5e7eb; color: #666; font-size: 0.85em; }
.footer-container.footer-minimal a { color: #666; text-decoration: none; }
.footer-container.footer-minimal a:hover { color: var(--color-blue); text-decoration: underline; }

/* Green check list */
.green-check-list { list-style-type: none; }
.green-check-list li { padding: 0.25em 0.25em 0.25em 2rem; background-image: url('/images/v3/icon_greencheck.svg'); background-position: left center; background-repeat: no-repeat; font-weight: 500}

/* Buttons */
.primary-btn { padding: 0.75em 1.5em; border: 0; background-color: var(--color-blue); color: #FFF; border-radius: 0.375rem; box-sizing:content-box; font-size:1rem; cursor: pointer; font-weight: 500; text-decoration: none; display: inline-block; }
.primary-btn:hover { background-color: var(--color-blue-secondary); color: #FFF; text-decoration: none; }

.primary-btn-sm { padding: 0.5em 1.5em; border: 0; background-color: var(--color-blue); color: #FFF; border-radius: 0.375rem; box-sizing:content-box; font-size:1rem; cursor: pointer; font-weight: 500; text-decoration: none; display: inline-block; }
.primary-btn-sm:hover { background-color: var(--color-blue-secondary); color: #FFF; text-decoration: none; }

/* Scroll to Top */
#btnToTop {display: none; width: auto; position: fixed; bottom: 1.5rem; right: 2rem; background-color: #ddd; opacity: 0.5; border-radius: 0.25rem; width: 2.5rem; height: 2.5rem; background-image: url(/images/Icons/icon_top_dark.png); background-position: center center; background-repeat: no-repeat; background-size: 1.25rem 1.25rem;}

/*********************/
/* Homepage          */
/*********************/
.homepage h2 { font-size: 2.5rem; }
@media (max-width: 992px) { .homepage h2 { font-size: 1.7rem; } }

.section-steps .steps-bg { background-color: var(--color-gray-lighter); border-radius: 1.25rem; background-image: url('/images/v3/bg_circles.svg'); background-position:center bottom -2rem; background-repeat: no-repeat; background-size: contain; }
.section-steps .step { color: #fff; border-radius: 1.25em; padding: .75em .75em .75em 3em; background-position:left 1em center; background-repeat: no-repeat; }
.section-steps .step1 { background-color: var(--color-blue); background-image: url('/images/v3/icon_lightbulb.svg')}
.section-steps .step2 { background-color: var(--color-orange); background-image: url('/images/v3/icon_clipboard.svg')}
.section-steps .step3 { background-color: var(--color-green); background-image: url('/images/v3/icon_download.svg')}

.section-video-tutorial { background-color: var(--color-gray-lighter); }
.section-video-tutorial .video { background-color: #fff; border-radius: 1rem; padding: 2rem; }

.section-more-reasons { background-color: var(--color-blue); background-image: url('/images/v3/bg_plus.png'), url('/images/v3/bg_plus.png'), url('/images/v3/bg_dot.png'), url('/images/v3/bg_dot.png'); background-position: top 3rem left 2rem, bottom -3rem right 2rem, top 3rem right -2rem, bottom -3rem left 2rem; background-repeat: no-repeat; background-size: 20%; }
.section-more-reasons h2 { color: #fff;}
.section-more-reasons .reason { background-color: #fff; border-radius: 1.25rem; padding: 1rem 1rem 1rem 5rem; background-position:left 1em center; background-repeat: no-repeat; background-size: 3rem 3rem; }
.section-more-reasons .reason h3 { font-size: 1rem; }
.section-more-reasons .reason1 { background-image: url('/images/v3/icon_reason_1.png') }
.section-more-reasons .reason2 { background-image: url('/images/v3/icon_reason_2.png') }
.section-more-reasons .reason3 { background-image: url('/images/v3/icon_reason_3.png') }
.section-more-reasons .reason4 { background-image: url('/images/v3/icon_reason_4.png') }
.section-more-reasons .reason5 { background-image: url('/images/v3/icon_reason_5.png') }
.section-more-reasons .reason6 { background-image: url('/images/v3/icon_reason_6.png') }

.section-templates { background-color: var(--color-gray-lighter); }
.section-templates .carousel-item img { margin-left: auto; margin-right: auto; max-width: 20rem; }
.section-templates .carousel-caption { position: relative; left: auto; right: auto; bottom: auto; font-weight: 700; }
.section-templates .carousel-caption.d-none { display: block!important }

.section-resources { background-color: var(--color-blue);  background-image: url('/images/v3/bg_dot.png'), url('/images/v3/bg_dot.png'), url('/images/v3/bg_plus.png'), url('/images/v3/bg_plus.png'); background-position: top 3rem left 2rem, bottom -3rem right 2rem, top 3rem right -2rem, bottom -3rem left 2rem; background-repeat: no-repeat; background-size: 20%;}
.section-resources h2 { color: #fff;}
.section-resources .resource { background-color: #fff; border-radius: 1.25rem; padding: 1.5rem 1.5rem 1.5rem 6rem; background-position:left 1.5em center; background-repeat: no-repeat; background-size: 3rem 3rem; }
.section-resources .resource a { font-weight: 700 }
.section-resources .resource h3 { font-size: 1.25rem; }
.section-resources .resource1 { background-image: url('/images/v3/icon_resource_1.png') }
.section-resources .resource2 { background-image: url('/images/v3/icon_resource_2.png') }
.section-resources .resource3 { background-image: url('/images/v3/icon_resource_3.png') }
.section-resources .resource4 { background-image: url('/images/v3/icon_resource_4.png') }

.section-apps { background-color: var(--color-gray-lighter); }

/***********************/
/* Tool landing pages  */
/* /ats-resume-checker, /cover-letter-generator, /resume-keyword-scanner, /job-application-tracker */
/***********************/
.section-tool-hero { padding-top: 3rem; padding-bottom: 3rem; }
.section-tool-hero .row { row-gap: 2rem; }
.section-tool-hero h1 { font-size: 2.5rem; line-height: 1.16; margin-bottom: 0.75rem; }
.section-tool-hero h1 .highlight { color: var(--color-blue); }
.section-tool-hero .tool-sub { font-size: 1.08rem; color: #555; max-width: 42rem; }
.section-tool-hero .tool-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.5rem; }
.section-tool-hero .tool-hero-art img { max-width: 34rem; }
@media (max-width: 992px) {
    .section-tool-hero { padding-top: 2.25rem; padding-bottom: 2.25rem; text-align: center; }
    .section-tool-hero h1 { font-size: 2rem; }
    .section-tool-hero .tool-sub { margin-left: auto; margin-right: auto; }
    .section-tool-hero .tool-hero-actions { justify-content: center; }
    .section-tool-hero .tool-hero-art img { max-width: min(28rem, 90vw); }
}

.section-tool-form { background-color: var(--color-gray-lighter); padding-top: 2.5rem; padding-bottom: 2.5rem; }
.section-tool-form .tool-form-card { background-color: #fff; border: 1px solid #d8dde5; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 1px 2px 0 rgba(60,66,87,0.08), 0 1px 3px 0 rgba(60,66,87,0.04); }
.section-tool-form .tool-form-card label { font-weight: 600; }
.section-tool-form .tool-form-card textarea { resize: vertical; min-height: 9rem; }
.section-tool-form .tool-form-card .form-control { border-color: #d8dde5; border-radius: 0.5rem; }
.section-tool-form .tool-form-card .form-control:focus { border-color: rgba(var(--color-blue-rgb), 0.55); box-shadow: 0 0 0 0.2rem rgba(var(--color-blue-rgb), 0.12); }
.section-tool-form .tool-form-card .btn-outline-secondary { border-color: #d8dde5; color: #404752; font-weight: 600; }
.section-tool-form .tool-form-card .btn-check:checked + .btn-outline-secondary { background-color: rgba(var(--color-blue-rgb), 0.1); border-color: var(--color-blue); color: var(--color-blue); }
.section-tool-form .tool-form-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.section-tool-form .tool-form-actions .btn-primary { background-color: var(--color-blue); border-color: var(--color-blue); padding: 0.625rem 1.5rem; font-weight: 600; }
.section-tool-form .tool-form-actions .btn-primary:hover { background-color: var(--color-blue-secondary); border-color: var(--color-blue-secondary); }
.section-tool-form .tool-upload-link { color: var(--color-blue); cursor: pointer; text-decoration: underline; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.35rem; }
.section-tool-form .tool-upload-link svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Inline icon used in tool result headings + feature card titles + buttons. Sizes with surrounding text via 1em. */
.tool-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; margin-right: 0.4em; }
.tool-icon-trailing { margin-left: 0.4em; margin-right: 0; }
.tool-icon-success { color: #1f5d33; }
.tool-icon-danger { color: #8c2828; }
.tool-icon-feature { color: var(--color-blue); }
.section-tool-form .tool-error { color: #b02a2a; margin-top: 0.75rem; font-size: 0.9rem; }
.section-tool-form .tool-clear-link { color: #888; cursor: pointer; text-decoration: underline; font-size: 0.85rem; }
.section-tool-form .tool-clear-link:hover { color: #b02a2a; }

.section-tool-result { background-color: var(--color-gray-lighter); padding-top: 0; padding-bottom: 2.5rem; }
.section-tool-result .tool-result-card { background-color: #fff; border: 1px solid #d8dde5; border-radius: 1rem; padding: 2rem; box-shadow: 0 8px 24px rgba(17,15,36,0.08); }
/* Standalone import-status page (no result-card wrapper) — same chrome on a centered single card. */
.tool-import-status .tool-import-card { background-color: #fff; border: 1px solid #d8dde5; border-radius: 1rem; padding: 3rem 2rem; box-shadow: 0 1px 2px 0 rgba(60,66,87,0.08), 0 1px 3px 0 rgba(60,66,87,0.04); }
.tool-import-status .tool-import-spinner { width: 3rem; height: 3rem; animation-duration: 1.4s; }
.section-tool-result .tool-score-row { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.section-tool-result .tool-score-big { font-size: 3.5rem; font-weight: 800; line-height: 1; color: var(--color-blue); }
.section-tool-result .tool-score-suffix { color: #888; font-size: 1.25rem; }
.section-tool-result .tool-score-label { font-size: 1.1rem; font-weight: 600; }
.section-tool-result .tool-score-poor { color: #c75a00; }
.section-tool-result .tool-score-fair { color: #d39600; }
.section-tool-result .tool-score-good { color: #1f9a4a; }
.section-tool-result .tool-letter-preview { background-color: #fafafa; border: 1px solid #e2e6eb; border-radius: 0.75rem; padding: 1.5rem; line-height: 1.6; }
.section-tool-result .tool-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.section-tool-result .tool-result-actions .tool-result-secondary { color: #444; font-weight: 600; }
.section-tool-result .tool-pill { display: inline-block; padding: 0.3em 0.7em; border-radius: 999px; font-size: 0.85rem; font-weight: 500; line-height: 1.2; margin: 0.2em 0.3em 0.2em 0; }
.section-tool-result .tool-pill-matched { background-color: #e3f5e8; color: #1f5d33; }
.section-tool-result .tool-pill-missing { background-color: #fde7e7; color: #8c2828; }

.section-tool-upsell { background-color: var(--color-blue); color: #fff; padding-top: 3rem; padding-bottom: 3rem; background-image: url('/images/v3/bg_dot.png'), url('/images/v3/bg_plus.png'); background-position: top 2.5rem right -2rem, bottom -3rem left 2rem; background-repeat: no-repeat; background-size: 18%; }
.section-tool-upsell h2 { color: #fff; }
.section-tool-upsell .tool-upsell-card { background-color: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 1rem; padding: 2rem; backdrop-filter: blur(2px); }
.section-tool-upsell .tool-upsell-list { list-style: none; padding-left: 0; margin: 1rem 0 1.5rem; }
.section-tool-upsell .tool-upsell-list li { padding: 0.4rem 0 0.4rem 1.75rem; background-image: url('/images/v3/icon_check_white.svg'); background-repeat: no-repeat; background-position: 0 0.6rem; background-size: 1.1rem 1.1rem; }
.section-tool-upsell .tool-upsell-list li:not([style])::before { content: "\2713"; display: inline-block; width: 1.25rem; margin-left: -1.5rem; font-weight: 700; }
.section-tool-upsell .btn-upsell { background-color: #fff; color: var(--color-blue); padding: 0.75rem 2rem; border-radius: 0.5rem; font-weight: 700; font-size: 1.05rem; border: 0; cursor: pointer; text-decoration: none; display: inline-block; }
/* Dynamic upsell CTA — when the page has a visible result section above this upsell, swap the
   generic "Create free account" pitch for the action-driven "Save to my account" CTA so the
   button text matches what the user actually has to save. The :has() and sibling-selector pair
   covers both layouts: result section as a direct sibling vs nested elsewhere. */
.section-tool-upsell .upsell-cta-save { display: none; }
.section-tool-result:not(.d-none) ~ .section-tool-upsell .upsell-cta-save { display: inline-block; }
.section-tool-result:not(.d-none) ~ .section-tool-upsell .upsell-cta-join { display: none; }
.section-tool-upsell .btn-upsell:hover { background-color: var(--color-gray-lighter); color: var(--color-blue); }

.section-home-faq .faq-item { border-bottom: 1px solid #e6e8ef; padding-bottom: 1.25rem; }
.section-home-faq .faq-item h3 { color: #202636; }

.section-tool-related { background-color: #fff; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.section-tool-related .tool-related-card { background-color: var(--color-gray-lighter); border: 1px solid transparent; border-radius: 1rem; padding: 1.5rem; height: 100%; transition: background-color 0.15s, border-color 0.15s, transform 0.15s; }
.section-tool-related .tool-related-card:hover { background-color: #fff; border-color: rgba(var(--color-blue-rgb), 0.18); transform: translateY(-2px); }
.section-tool-related .tool-related-card h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.section-tool-related .tool-related-card a { font-weight: 600; color: var(--color-blue); text-decoration: none; }
.section-tool-related .tool-related-card a:hover { text-decoration: underline; }

.tool-tracker-preview { background-color: #fff; border: 1px solid #d8dde5; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 12px 28px rgba(17,15,36,0.08); }
.tool-tracker-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-bottom: 1px solid #edf0f5; padding: 0.7rem 0; }
.tool-tracker-row:last-child { border-bottom: 0; }
.tool-tracker-role { color: #666; font-size: 0.92rem; }
.tool-status-pill { display: inline-block; white-space: nowrap; padding: 0.3em 0.7em; border-radius: 999px; font-size: 0.78rem; font-weight: 700; line-height: 1.2; }
.tool-status-onsite, .tool-status-offer { background-color: #dff5e3; color: #0e6b30; }
.tool-status-screen, .tool-status-applied { background-color: #e6f0fc; color: #1f4d99; }
.tool-status-ghosted { background-color: #fde7e7; color: #8c2828; }
@media (max-width: 576px) {
    .tool-tracker-row { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
}

.tool-blur { filter: blur(5px); user-select: none; pointer-events: none; }
.tool-blur-wrap { position: relative; }
.tool-blur-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 2rem; }

/*********************/
/* Login Page        */
/*********************/
.socialLoginContainer .buttonContainer { width: 250px; }
.socialLoginContainer a { display: block; font-size: 0.94rem; width: 250px; padding: 0.5em 0.5em 0.5em 2em; margin: 0 auto; font-weight: 500; color: #333; text-decoration: none; background-repeat: no-repeat; background-position: center left 0.6em; background-size: 24px 24px; text-align: center}
.socialLoginContainer a:hover {background-color: #f8faff}
.socialLoginContainer a:active {background-color: #ecf3fe}
.socialLoginContainer a.google { background-image: url(/images/icons/icon_google.svg); }
.socialLoginContainer a.facebook { background-image: url(/images/icons/icon_facebook.svg); }

/*********************/
/*Resume Builder     */
/*********************/
a.link-button { display: inline-block; position:relative; width:24px; height:24px; top: 3px; -moz-border-radius:12px; -webkit-border-radius: 12px; border-radius: 12px; }
a.link-button:hover, a.link-button:active, a.link-button.active { background-color:var(--color-blue); }

a.link-add::after { content: ""; position: absolute; top: 0px; left:0px; width: 24px; height: 24px; background-repeat: no-repeat; background-size: 24px 24px; background-position: center; }
a.link-edit::after, a.link-delete::after, a.link-settings::after, a.link-import::after, a.link-search::after, a.link-up::after, a.link-down::after,
a.link-check::after, a.link-copy::after, a.link-close::after { content: ""; position: absolute; top: 3px; left:3px; width: 18px; height: 18px; background-repeat: no-repeat; background-size: 18px 18px; background-position: center; }

a.link-add::after { background-image: url('/images/Icons/icon_add_dark.png'); }
a.link-add:hover::after, a.link-add:active::after, a.link-add.active::after { background-image: url('/images/Icons/icon_add_light.png'); }
a.link-edit::after { background-image: url('/images/Icons/icon_edit_dark.png'); }
a.link-edit:hover::after, a.link-edit:active::after { background-image: url('/images/Icons/icon_edit_light.png'); }
a.link-delete::after { background-image: url('/images/Icons/icon_delete_dark.png'); }
a.link-delete:hover::after, a.link-delete:active::after { background-image: url('/images/Icons/icon_delete_light.png'); }
a.link-settings::after { background-image: url('/images/Icons/icon_settings_dark.png'); }
a.link-settings:hover::after, a.link-settings:active::after { background-image: url('/images/Icons/icon_settings_light.png'); }
a.link-import::after { background-image: url('/images/Icons/icon_import_dark.png'); }
a.link-import:hover::after, a.link-import:active::after { background-image: url('/images/Icons/icon_import_light.png'); }
a.link-check::after { background-image: url('/images/Icons/icon_check_dark.png'); }
a.link-check:hover::after, a.link-check:active::after { background-image: url('/images/Icons/icon_check_light.png'); }
a.link-copy::after { background-image: url('/images/Icons/icon_copy_dark.png'); }
a.link-copy:hover::after, a.link-copy:active::after { background-image: url('/images/Icons/icon_copy_light.png'); }
a.link-close::after { background-image: url('/images/Icons/icon_close_dark.png'); }
a.link-close:hover::after, a.link-close:active::after { background-image: url('/images/Icons/icon_close_light.png'); }
a.link-search::after { background-image: url('/images/Icons/icon_search_dark.png'); }
a.link-search:hover::after, a.link-search:active::after { background-image: url('/images/Icons/icon_search_light.png'); }
a.link-up::after { background-image: url('/images/Icons/icon_up_dark.png'); }
a.link-up:hover::after, a.link-up:active::after { background-image: url('/images/Icons/icon_up_light.png'); }
a.link-down::after { background-image: url('/images/Icons/icon_down_dark.png'); }
a.link-down:hover::after, a.link-down:active::after { background-image: url('/images/Icons/icon_down_light.png'); }

a.linkButton, a.linkButtonPremium { color:#333; text-decoration:none; padding:0 5px; -moz-border-radius:3px; -webkit-border-radius: 3px; border-radius: 3px; display:inline-block; text-align: center; }
a.linkButton:link, a.linkButton:visited { border:1px solid #999; background-color:#eee; }
a.linkButton:hover, a.linkButton:active { border:1px solid #333; background-color:#eee; }
a.linkButtonPremium:link, a.linkButtonPremium:visited { border:1px solid #999; background-color:#FFFADD; }
a.linkButtonPremium:hover, a.linkButtonPremium:active { border: 1px solid #333; background-color:#FFFADD; }

/* Validation helpers */
.field-validation-error { color: #ff0000;  text-align: left;}
.field-validation-valid { display: none; }
.validation-summary-errors { color: #ff0000; text-align: left; }
.validation-summary-valid { display: none; }

.form-control-inline { border: 1px solid #ced4da; border-radius: 0.25rem; }
.errmsg { color: red;}

/*********************/
/*Resume Builder Nav*/
/*********************/
/* Resume Builder document toolbar — unified flex container holding the resume selector,
   icon buttons, and Content/Download tabs as one design unit (Notion/Linear pattern).
   Subtle gray-lighter bg matches the navbar + footer for site-wide chrome cohesion. */
#builderNav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; background-color: #DCE8F6; border: 1px solid rgba(var(--color-blue-rgb), 0.18); border-radius: 0.5rem; padding: 0.5rem 0.75rem; }
/* min-width: 0 propagates the shrink opportunity to the inner select.
   Without it, the container's default min-width: auto (= intrinsic
   content size) keeps it at full content width even with flex-shrink: 1,
   so on narrow viewports the icon buttons overflow past the right edge
   of #builderNav. */
#builderNav #resumeSelectorContainer { flex: 1 1 auto; min-width: 0; }
#builderNav #resumeTabs { border-bottom: none; gap: 0.25rem; padding: 0; flex-wrap: nowrap; }
#builderNav .nav-link, #builderNav .nav-link:hover, #builderNav .nav-link:active { text-decoration: none; }
#builderNav .nav-link { padding: 0.35rem 0.875rem; background-color: transparent; color: #555; border: 1px solid transparent; border-radius: 0.375rem; font-weight: 500; transition: background-color 0.15s, color 0.15s; margin-bottom: 0; }
#builderNav .nav-link:hover { background-color: rgba(var(--color-blue-rgb), 0.08); color: var(--color-blue); }
/* Active tab — stronger affordance: white pill on tinted bg, blue text/border, semibold,
   plus a small blue inset accent on the bottom edge for an unmistakable selected state. */
#builderNav .nav-link.active, #builderNav .nav-link.active:hover { background-color: #fff; color: #1f2329; border-color: rgba(0, 0, 0, 0.04); font-weight: 600; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08), 0 1px 1px 0 rgba(0, 0, 0, 0.05); }
#builderNav #resumeSelectorForm { min-width: 0; flex-shrink: 1; }
/* Resume selector — content-sized button-style dropdown (Notion/Linear/Stripe pattern).
   Border matches the new card chrome (#d8dde5) so the selector reads as part of the page system.
   min-width: 0 lets the dropdown shrink to fit available row width on narrow
   viewports — a fixed floor would push the manage/import icon buttons onto a
   second line under ~360px. The selected option text truncates natively in
   the browser-rendered select once the box is narrower than the content. */
#builderNav #resumeSelector { width: auto; max-width: 22rem; min-width: 0; flex-shrink: 1; background-color: #fff; border: 1px solid #d8dde5; padding: 0.375rem 2rem 0.375rem 0.75rem; font-size: 0.95rem; }
#builderNav #resumeSelector:focus { border-color: var(--color-blue); box-shadow: 0 0 0 0.15rem rgba(var(--color-blue-rgb), 0.15); }
/* Icon buttons in BuilderNav: scoped override to make them slightly larger and square-rounded
   to better visually pair with the dropdown. Hover state inherits the global blue full-fill
   (the light-variant icon swap relies on it), so we only modify size/shape here. The ::after
   override re-centers the inner icon since the global rule positions it at top:0/3px which
   leaves it in the corner of a larger 32x32 button. */
#builderNav a.link-button { width: 32px; height: 32px; border-radius: 50%; top: 0; align-self: center; flex-shrink: 0; }
#builderNav a.link-button::after { top: 50%; left: 50%; transform: translate(-50%, -50%); }
#tblManageResume tr:nth-child(odd) { background: #efefef; }
#tblManageSection tr:nth-child(odd) { background: #efefef; }
#tblManageLetter tr:nth-child(odd) { background: #efefef; }

/*********************/
/* Content Page      */
/*********************/
/* Header matches site chrome (navbar + footer use the same --color-gray-lighter so the whole
   site shares one tone). Header's bottom border matches the outer card border so the seam
   reads as one piece, not two stacked elements. Radius matches the .boxContainer's 0.5rem. */
.contentContainer .contentSectionHeader, .letterContentContainer .contentSectionHeader { background-color: #DCE8F6; border: none; border-bottom: 1px solid rgba(var(--color-blue-rgb), 0.18); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; color: #2a2f3a; padding: 0.125rem 1rem; }
.contentSectionHeader .sectionHeaderButton { white-space: nowrap; }
.contentSectionBodyTable .tableRow>td { vertical-align: top; border-bottom: 1px solid #f0f0f0; line-height: 170% }
.contentSectionBody { background-color: #fff; padding: 0.75rem 1rem; border: none; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
/* Bootstrap col children inside cards inherit 0.75rem L/R padding, on top of card body
   padding — that's an extra 12px indent we don't want. Zero it here and let card padding
   alone define edges. Adjacent cols (e.g., the two contactSectionColumns) keep a small
   gap via the inner :not(:last-child) margin so text doesn't touch. */
.contentSectionHeader > [class*="col"], .contentSectionBody > [class*="col"] { padding-left: 0; padding-right: 0; }
.contentSectionBody > .contactSectionColumn:not(:last-child) { margin-right: 0.75rem; }
.contentSectionBody ul { margin: 0 0 0 1rem; padding: 0;}
.contentSectionBody li { margin:0 0 0 0; padding: 0;}
.contentSectionBody .letter-container { max-height: 15em; overflow-y: scroll; }
.contentSectionBody .description { cursor:text!important; }
.contentSectionBody .description td { padding-left: 0.75rem; }
.dragHandle { min-width: 20px; }
.showDragHandle { background-image: url(/images/updown.png); background-repeat: no-repeat; background-position: center left; cursor: move; }

.inline-help { font-size: 0.875rem; border:1px solid #A8CBF7; margin: 0.5rem 0.5rem 0 0.5rem; padding: 0.25rem; height:10rem; overflow:auto; background-color:#E8EEFA; border-radius: 0.25rem}
.inline-help-tab, .intelli-sample-tab, .ai-assistant-tab { font-size: 0.875rem; line-height: 1.5em; border-left:1px solid #A8CBF7;border-right:1px solid #A8CBF7;border-bottom:1px solid #A8CBF7; margin: 0; padding: 0.25rem; overflow:auto; background-color:#E8EEFA; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem}
.intelli-sample-tab input, .ai-assistant-tab input {font-size: 1rem}

#intelliSample .sample-nav-container { }
#intelliSample .sample-nav-button { display: inline-block; border: 1px solid #ccc; color: #3A6AAD; width: 2em; height: 2em; line-height: 2em; margin:0 0.5em 0.5em 0; border-radius: 0.25em; text-align: center; vertical-align: middle; background-color: #fff }
#intelliSample .sample-nav-button.sample-nav-active { font-weight: 500; /*color: #FF6D06;*/ }
#intelliSample .sample-item .ctrl-add-sample { margin-top: 5px; }
#intelliSample .sample-item .link-button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
#intelliSample .sample-item-container { background-color: #fff; border-radius: 5px; border: 1px solid #A8CBF7; }
#intelliSample .highlight-text { background-color: yellow; }
#intelliSample .sample-item-container ul { padding-left: 0.25em}
#intelliSample .sample-item-container li { list-style-position: inside; }
#intelliSample .sample-description-container { background-color: #fff; border-radius: 5px; border: 1px solid #A8CBF7; margin-bottom: 8px; position: relative; }
#intelliSample .sample-description-container .sample-item { display: block; padding: 5px 30px 5px 8px; position: relative; }
#intelliSample .sample-description-container .linkButton { padding-top: 0; padding-bottom: 0; margin-top: 1px; }

.resume-help .nav-tabs {border-bottom-color: #A8CBF7}
.resume-help .nav-link { font-size: 0.875rem; line-height: 1em; color:#3a6aad }
.resume-help .nav-link.active { font-weight: 500; background-color: #E8EEFA; border-color: #A8CBF7; border-bottom-color: #E8EEFA }

#editContactForm label { font-size: 0.85em; line-height: 1em; opacity: 0.75;}

#formContainer select {background-color: #fff}
#formContainer .dropdown-menu .dropdown-item { overflow: hidden; }
.ai-tools-dropdown .dropdown-item { text-decoration: none; }
.ai-tools-dropdown .dropdown-item:hover, .ai-tools-dropdown .dropdown-item:focus { background-color: rgba(var(--color-blue-rgb), 0.1); text-decoration: none; }
/* Modern card chrome (Stripe / GitHub / Tailwind UI pattern). Border is the primary
   definition; layered shadow adds subtle elevation. 8px radius matches current SaaS trends. */
.boxContainer { background-color: #fff; border: 1px solid #d8dde5; border-radius: 0.5rem; box-shadow: 0 1px 2px 0 rgba(60, 66, 87, 0.08), 0 1px 3px 0 rgba(60, 66, 87, 0.04); }

#ddlTemplate { max-width: 75% !important; }

/***********************/
/* Design Page         */
/***********************/
#designContainer .form-select { box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.08); }
#progressContainer { height: 2rem; background: #ddd; text-align: center; position: relative; border-radius: 4px; }
#progress { background-color: #5cb85c;  height: 2rem; width: 0; border-radius: 4px; }
#progressText { position: absolute; top: 45%; left: 10px; transform: translate(0, -50%); font-weight: 500; color: #333; }

#partnerRequestContainer input[type=submit], #partnerRequestContainer input[type=button], #oneClickAiContainer input[type=button] {height: 40px; width: 75%; max-width: 250px; border: 0; background-color: #FF6D06; color: #FFFFFF; border-radius: 4px; box-sizing: content-box; cursor: pointer;}

#previewContainer { min-height: 300px; margin: 15px 0px 0px 0px; background: #ccc; text-align: center; }
#previewContainer img { max-width: 100%; height: auto; max-height: 1056px; border: 15px solid #ccc; }
#designContainer .download-container { min-height: calc(3.5rem + 2px); padding: 0.625rem 0.625rem 0.25rem 0.625rem; border: 1px solid #ced4da; border-radius: .375rem; background: #fff; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08) }
#designContainer .download-container label {opacity: .65; transform: scale(.85); position: relative; top: -0.4rem; left: -0.2rem; }
#designContainer .download-container a.file-icon img { height: 2.4rem; }
#publishResumeContainer { padding: 1rem; }
#publishResumeContainer fieldset { min-width: 0; margin-bottom: 1.25rem; padding: 0; border: 0; }
#publishResumeContainer .publish-panel { margin-bottom: 1.25rem; padding: 0; border: 0; background: transparent; box-shadow: none; }
#publishResumeContainer .publish-panel:last-child { margin-bottom: 0; }
#publishResumeContainer .form-label { margin-bottom: 0.5rem; color: var(--color-black); font-size: 0.95rem; font-weight: 700; }
#publishResumeContainer .publish-option-list { border-radius: 0.5rem; overflow: hidden; }
#publishResumeContainer .publish-option { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.65rem; align-items: center; padding: 0.55rem 0.85rem; }
#publishResumeContainer .publish-option .form-check-input { margin: 0; }
#publishResumeContainer .publish-option label { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin: 0; cursor: pointer; line-height: 1.3; }
#publishResumeContainer .publish-option-title { font-weight: 700; }
#publishResumeContainer .publish-option-description { color: #5f6368; font-size: 0.92rem; }
#publishResumeContainer .publish-option-description::before { content: "—"; margin-right: 0.4rem; color: #c0c2c4; }
#publishResumeContainer .publish-password-settings { grid-column: 2; margin-top: 0.5rem; max-width: 20rem; }
#publishResumeContainer .publish-password-settings .form-label { margin-bottom: 0.25rem; font-size: 0.875rem; }
#publishResumeContainer .publish-alias-group .input-group-text { max-width: 52%; overflow: hidden; color: #5f6368; text-overflow: ellipsis; background: #f8f9fa; }
#publishResumeContainer .field-validation-error:empty { display: none; }
#publishResumeContainer .publish-url-panel { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
#publishResumeContainer .publish-url-content { min-width: 0; }
#publishResumeContainer .publish-url-row { min-height: 1.5rem; overflow-wrap: anywhere; }
#publishResumeContainer .publish-url-actions { display: flex; align-items: center; gap: 0.5rem; }
@media (max-width: 576px) {
    #publishResumeContainer .publish-option label { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
    #publishResumeContainer .publish-option-description::before { content: none; }
    #publishResumeContainer .publish-url-panel { display: block; }
    #publishResumeContainer .publish-url-actions { margin-top: 0.5rem; }
    #publishResumeContainer .publish-alias-group .input-group-text { max-width: 100%; flex-basis: 100%; border-radius: 0.375rem 0.375rem 0 0; }
    #publishResumeContainer .publish-alias-group .form-control { border-top-left-radius: 0; }
}
#templatePopupContent img { width: 100%; height: auto;}
#fontFacePopupContent img { width: 200px; height: auto; }
#fontFacePopupContent a { opacity: 0.75; border: 1px solid #fff; }
#fontFacePopupContent a:active, #fontFacePopupContent a:hover { opacity: 1; border: 1px solid #ccc; }
.dropdownOverlay { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }

#thumbContainer { overflow: hidden; }
#thumbContainer img { width:100%; height:auto; }
#thumbContainer .carousel-control-next, #thumbContainer .carousel-control-prev { width: 6%; }


/********************/
/* Tutorial Popover */
/********************/
.webui-popover {font-size: 0.9rem}
.webui-popover-title {font-size: 0.9rem; font-weight: 500}
.webui-popover b { font-weight: 500 }
.popover-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; filter: alpha(opacity=20); -moz-opacity: 0.2; -khtml-opacity: 0.2; opacity: 0.2; z-index: 100; }
.popover-highlight{ position: relative; z-index: 101; }
.popover-highlight-overlay{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 102; }
.popover-content { font-size: 0.9rem; }
.popover-button { font-weight: 500; text-align: right; margin-top: 0.5rem; margin-right: 1rem }

/********************/
/* Popover Dialog   */
/********************/
.modal-header { padding: 0.5rem 1rem; background-color: #3a6aad}
.modal-title { color: #fff; font-size: 1rem; font-weight: 600; }
@keyframes rbRowFocusFlash { 0% { background-color: #FFE066; } 100% { background-color: #FFF8E1; } }
#tblManageSection tr.focus-row, #tblManageLetter tr.focus-row { background-color: #FFF8E1; animation: rbRowFocusFlash 1.2s ease-out; }
.contentSectionBodyTable td.row-toggle { cursor: pointer; }
.contentSectionBodyTable tr.tableRow:hover td.row-toggle { background-color: rgba(81, 132, 210, 0.06); }
.modal-content { border: none;}
.modal-body { padding: 0; overflow-x: hidden; /*overflow-y: hidden!important;*/}
.modal-footer {padding: 0.2rem 1rem}
.modal-footer button {  padding: 0.25rem 1rem }

/********************/
/* Tutorial & FAQ   */
/********************/
.section-faq { background-color: var(--color-gray-lighter); }
.section-faq .faq-content { border-radius: 1.75rem; background: #FFF; box-shadow: 0px 12px 28px -2px rgba(0, 0, 0, 0.10); }
.section-faq .faq-related ul { padding-left: 1.25em; line-height: 1.2em; }
.section-faq .faq-related ul li { padding-top: .5em; }
.section-faq .faq-related .back { padding-left: 1.3em; background-image: url('/images/Icons/icon_arrowback_dark.png'); background-position: left center; background-repeat: no-repeat; background-size: 1.25em 1.25em; }
.section-faq .faq-content h1 { font-size: 2rem }
.section-faq .faq-content h2 { font-size: 1.7rem }

.section-tutorial { background-color: var(--color-gray-lighter); }
.section-tutorial .tutorial-content { border-radius: 1.75rem; background: #FFF; box-shadow: 0px 12px 28px -2px rgba(0, 0, 0, 0.10); }
.section-tutorial .tutorial-related ul { padding-left: 1.25em; line-height: 1.2em; }
.section-tutorial .tutorial-related ul li { padding-top: .5em; }
.section-tutorial .tutorial-content h1 { font-size: 2rem }
.section-tutorial .tutorial-content h2 { font-size: 1.7rem }

/********************/
/* Sample Resumes   */
/********************/
h1.sample-resume { font-size: 2rem; line-height: 1.4em; }
.section-sample-list { background-color: var(--color-gray-lighter); }
.section-sample-list .category-container-outer { border-radius: 1.75rem; box-shadow: 0px 12px 28px -2px rgba(0, 0, 0, 0.10); }
.section-sample-list .category-container-top {border-top-left-radius: 1.75rem; border-top-right-radius: 1.75rem; }
.section-sample-list .category-container-bottom {height: 1.75rem; border-bottom-left-radius: 1.75rem; border-bottom-right-radius: 1.75rem; background-color: #fff; }
.section-sample-list .category-container-resume { background: #FFF; line-height: 2em; }
.section-sample-list .category-1 { background-color: rgba(var(--color-blue-rgb),0.25); }
.section-sample-list .category-2 { background-color: rgba(var(--color-orange-rgb),0.25); }
.section-sample-list .category-3 { background-color: rgba(var(--color-green-rgb),0.25); }
.section-sample-list .category-4 { background-color: rgba(var(--color-red-rgb),0.25); }
.section-sample-list .category-5 { background-color: rgba(23, 107, 251, 0.25) }
.section-sample-list h3 { font-size: 1.5rem; }
.section-sample-list .category-image { max-height: 10rem; max-width: 15rem; }
.section-sample-list .category_nav_item a {color: var(--color-black); padding: 10px 16px 10px 30px; background-repeat: no-repeat; background-size: 50px 84px; background-position: top -38px left -15px; border-bottom: 1px solid var(--color-gray-medium); display: block; }
.section-sample-list .category_nav_item a.active { background-position: top -5px left -15px!important; font-weight: 700; }

/********************/
/* Editor Page      */
/********************/
.editor-image-small { max-width: 3rem; height: auto; border-radius: 50%; background-color: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); margin-right: 0.5rem;}
.editor-image-large { max-width: 5rem; height: auto; border-radius: 50%; background-color: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); margin-right: 0.5rem;}

/********************/
/* AI Chat Widget   */
/********************/
.ai-chat-toggle { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background-color: var(--color-blue); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1050; transition: background-color 0.2s; border: none; }
.ai-chat-toggle:hover { background-color: var(--color-blue-secondary); }
.ai-chat-toggle-icon { font-size: 1.5rem; line-height: 1; }
.ai-chat-badge { position: absolute; top: -4px; right: -4px; background: #dc3545; color: #fff; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; }

.ai-chat-widget { position: fixed; bottom: 90px; right: 24px; width: 380px; max-height: 620px; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); background: #fff; z-index: 1050; display: flex; flex-direction: column; overflow: hidden; }
.ai-chat-header { background-color: var(--color-blue); color: #fff; padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.ai-chat-title { font-weight: 600; font-size: 1rem; }
/* :not(.btn-close) excludes Bootstrap's close-button — that one needs to keep
   its own background-image (the X SVG) and its own padding/sizing to render
   the standard popup-style X. The expand and new-conversation buttons (which
   carry an SVG child) get the transparent-button treatment as before. */
.ai-chat-header-actions button:not(.btn-close) { background: none; border: none; color: #fff; cursor: pointer; padding: 4px 8px; opacity: 0.8; font-size: 1.2rem; }
.ai-chat-header-actions button:not(.btn-close):hover { opacity: 1; }

.ai-chat-messages { flex: 1; overflow-y: auto; padding: 16px; min-height: 200px; max-height: 450px; }
.ai-chat-msg { margin-bottom: 12px; display: flex; flex-direction: column; }
.ai-chat-msg.user { align-items: flex-end; }
.ai-chat-msg.assistant { align-items: flex-start; }
.ai-chat-msg .msg-bubble { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; line-height: 1.5; word-wrap: break-word; }
.ai-chat-msg.user .msg-bubble { background-color: var(--color-blue); color: #fff; border-bottom-right-radius: 4px; }
.ai-chat-msg.assistant .msg-bubble { background-color: var(--color-gray-light); color: var(--color-black); border-bottom-left-radius: 4px; }

.ai-chat-typing { padding: 8px 16px; }
.typing-indicator span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-gray-medium); margin: 0 2px; animation: ai-typing 1.2s infinite; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

.ai-chat-action-btn { display: block; margin-top: 10px; padding: 6px 14px; background: transparent; color: var(--color-blue); border: 1px solid var(--color-blue); border-radius: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 500; }
.ai-chat-action-btn:hover { background: var(--color-blue); color: #fff; }

.ai-chat-confirm { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: var(--color-gray-lighter); border-top: 1px solid var(--color-gray-light); flex-shrink: 0; font-size: 0.85rem; }
.ai-chat-confirm-actions { display: flex; gap: 6px; }
.ai-chat-confirm .btn-confirm-yes { background: var(--color-blue); color: #fff; border: none; border-radius: 5px; padding: 4px 14px; cursor: pointer; font-size: 0.8rem; }
.ai-chat-confirm .btn-confirm-yes:hover { background: var(--color-blue-secondary); }
.ai-chat-confirm .btn-confirm-no { background: transparent; color: var(--color-gray-dark); border: 1px solid var(--color-gray-medium); border-radius: 5px; padding: 4px 14px; cursor: pointer; font-size: 0.8rem; }
.ai-chat-confirm .btn-confirm-no:hover { background: var(--color-gray-light); }

.ai-chat-input { border-top: 1px solid var(--color-gray-light); padding: 8px 12px; display: flex; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.ai-chat-input textarea { flex: 1; border: 1px solid var(--color-gray-medium); border-radius: 8px; padding: 8px 12px; resize: none; font-family: inherit; font-size: 0.9rem; max-height: 80px; overflow-y: auto; }
.ai-chat-input textarea:focus { outline: none; border-color: var(--color-blue); }
.ai-chat-input button { background: var(--color-blue); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; cursor: pointer; font-weight: 500; white-space: nowrap; }
.ai-chat-input button:hover { background: var(--color-blue-secondary); }

.ai-chat-widget.expanded { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: 80vw; max-width: 900px; height: 85vh; max-height: 800px; }
.ai-chat-widget.expanded .ai-chat-messages { max-height: none; }
.ai-chat-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.45); z-index: 1045; }

@media (max-width: 768px) {
    .ai-chat-widget,
    .ai-chat-widget.expanded { top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100vh; max-width: none; max-height: none; border-radius: 0; transform: none; }
    .ai-chat-messages { max-height: none; }
    #aiChatExpand { display: none; }
}
.ai-chat-input button:disabled { opacity: 0.5; cursor: not-allowed; }


.ai-chat-jd-card { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 10px; margin: 10px 8px; overflow: hidden; }
.ai-chat-jd-card-header { font-weight: 600; font-size: 14px; padding: 10px 14px 0; }
.ai-chat-jd-card-body { padding: 6px 14px; }
.ai-chat-jd-card-body p { font-size: 13px; color: #6c757d; margin-bottom: 8px; }
.ai-chat-jd-card-body textarea { font-size: 13px; resize: vertical; }
.ai-chat-jd-card-actions { padding: 8px 14px; display: flex; gap: 8px; align-items: center; }

@media (max-width: 576px) {
    .ai-chat-widget { right: 0; bottom: 0; width: 100%; max-height: 100vh; border-radius: 0; }
    .ai-chat-toggle { bottom: 16px; right: 16px; }
}

.paypal-button-group { max-width: 260px; }
.paypal-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; padding: 0 24px; border: none; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1; }
.paypal-button:disabled { opacity: 0.65; cursor: not-allowed; }
.paypal-button-color-primary { background-color: var(--color-blue); color: #fff; }
.paypal-button-color-primary:hover:not(:disabled) { background-color: var(--color-blue-secondary); }
.paypal-button-color-black { background-color: #2c2e2f; color: #fff; }
.paypal-button-color-black:hover:not(:disabled) { background-color: #1a1b1c; }
.paypal-button-label-container { display: inline-flex; align-items: center; gap: 8px; }
.paypal-button-text { color: #fff; white-space: nowrap; }
.paypal-logo { height: 20px; width: auto; }
.paypal-logo-card { height: 18px; width: auto; }

/****************************************/
/* Tailoring Hub (Hero banner + JD hub)  */
/****************************************/
.tailor-hero { background: linear-gradient(135deg, #EEF4FF 0%, #F6EAFE 100%); border: 1px solid #DCE6FB; border-radius: 0.75rem; padding: 1.25rem 1.5rem; margin: 1rem 0 0.5rem 0; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.04); transition: opacity 0.25s ease; }
.tailor-hero.tailor-hero-fading { opacity: 0; }
.tailor-hero-inner { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: stretch; }
.tailor-hero-copy { flex: 1 1 280px; min-width: 240px; }
.tailor-hero-eyebrow { font-size: 0.85rem; font-weight: 600; color: var(--color-blue); letter-spacing: 0.02em; }
.tailor-hero-headline { font-size: 1.35rem; font-weight: 700; color: var(--color-black); margin: 0.25rem 0 0.35rem; line-height: 1.25; }
.tailor-hero-sub { font-size: 0.95rem; color: #555; line-height: 1.4; }
.tailor-hero-input { flex: 1 1 360px; min-width: 280px; display: flex; flex-direction: column; gap: 0.5rem; }
.tailor-hero-input textarea { resize: vertical; min-height: 80px; border: 1px solid #C9D6F2; border-radius: 0.5rem; }
.tailor-hero-input textarea:focus { border-color: var(--color-blue); box-shadow: 0 0 0 0.15rem rgba(25,103,210,0.18); }
.tailor-hero-actions { display: flex; align-items: center; gap: 0.75rem; }
.tailor-hero-actions .btn-primary { padding: 0.4rem 1rem; font-weight: 600; }
.tailor-hero-actions .btn-primary:disabled { opacity: 0.55; }
.tailor-hero-skip { text-decoration: none; }
.tailor-hero-skip:hover { text-decoration: underline; }
.tailor-hero-error { margin-top: 0.25rem; }
.tailor-hero-progress { margin-top: 0.25rem; display: flex; align-items: center; }

/* Hub uses the same gradient as .tailor-hero — same feature, different state (post-JD).
   Visual continuity tells users they're still in the AI tailoring zone. White cards inside
   pop against the tint, like the homepage Resources section. */
.tailor-hub { background: linear-gradient(135deg, #EEF4FF 0%, #F6EAFE 100%); border: 1px solid #DCE6FB; border-radius: 0.75rem; padding: 1rem 1.25rem; margin: 1rem 0 0.5rem 0; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.06); transition: opacity 0.25s ease, transform 0.25s ease; }
.tailor-hub.tailor-hub-revealing { opacity: 0; transform: translateY(-4px); }
.tailor-hub-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; gap: 1rem; }
.tailor-hub-meta { min-width: 0; }
.tailor-hub-eyebrow { font-size: 0.78rem; color: #6c757d; letter-spacing: 0.02em; text-transform: uppercase; }
.tailor-hub-jobtitle { font-size: 1.1rem; font-weight: 600; color: var(--color-black); display: flex; align-items: center; gap: 0.4rem; max-width: 100%; }
.tailor-hub-jobtitle > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tailor-hub-header-actions { white-space: nowrap; flex-shrink: 0; }
.tailor-hub-header-actions a { text-decoration: none; }
.tailor-hub-header-actions a:hover { text-decoration: underline; }
.tailor-hub-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 992px) { .tailor-hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 576px) { .tailor-hub-cards { grid-template-columns: 1fr; } }
.tailor-hub-footer a { text-decoration: none; }
.tailor-hub-footer a:hover { text-decoration: underline; }
#atsScoreContainer.focus-row { box-shadow: 0 0 0 3px rgba(25,103,210,0.25); transition: box-shadow 0.4s ease; }

/* Highlight a resume section after fnJumpToSection scrolls to it (Experience / Education).
   Amber/yellow tint with thick glow — held visible at full strength for the first 30% of the
   animation so the user definitely catches it, then fades. Matches the JS class-removal timing. */
@keyframes rbSectionFocusFlash {
    0%, 30%  {
        background-color: #FFF3CD;
        box-shadow: 0 0 0 5px #FFC107, 0 0 24px rgba(255, 193, 7, 0.4);
    }
    100% {
        background-color: transparent;
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0), 0 0 0 rgba(255, 193, 7, 0);
    }
}
.contentSection.focus-row {
    animation: rbSectionFocusFlash 2.2s ease-out;
    border-radius: 0.5rem;
    position: relative;
    z-index: 1;
}

/* Mobile fullscreen popups — let the modal-body fill remaining space (between header and footer)
   instead of staying at its inline pixel height. Bootstrap's modal-fullscreen-lg-down makes the
   modal-content 100vh; without this the body sits at e.g. 520px in the middle with empty space above/below. */
@media (max-width: 991.98px) {
    .modal-fullscreen-lg-down .modal-body { height: auto !important; flex: 1 1 auto; min-height: 0; }
}

/* Generate Cover Letter — segmented control (Tone / Length pickers).
   Tonal styling: subtle blue tint when selected, dark blue text + border. Doesn't compete with the
   primary CTA below since the CTA is solid blue and these are tinted. */
.lg-segmented .btn {
    background-color: #fff;
    color: #495057;
    border: 1px solid #dee2e6;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lg-segmented .btn:hover { background-color: var(--color-gray-lighter); color: var(--color-black); border-color: #ced4da; }
.lg-segmented .btn-check:checked + .btn,
.lg-segmented .btn-check:focus-visible + .btn {
    background-color: rgba(var(--color-blue-rgb), 0.12);
    color: var(--color-blue);
    border-color: var(--color-blue);
    font-weight: 600;
}
.lg-segmented .btn-check:checked + .btn .lg-segmented-sub { color: var(--color-blue); opacity: 0.7; }
.lg-segmented .lg-segmented-sub { color: #6c757d; font-weight: normal; }

/* Hub header / inline edit + collapse — uses the same .link-button class as resume section edit buttons
   for visual consistency across the app (24x24 round, 18x18 PNG sprite, hover-to-blue with light icon).
   Override the default top:3px baseline nudge since these sit inside flex containers with align-items:center. */
.tailor-hub .tailor-hub-jobtitle .link-button,
.tailor-hub .tailor-hub-header-actions .link-button { flex-shrink: 0; top: 0; }
.tailor-hub .tailor-hub-collapsed-actions { display: none; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.tailor-hub.tailor-hub-collapsed .tailor-hub-cards { display: none; }
.tailor-hub.tailor-hub-collapsed .tailor-hub-footer { display: none; }
.tailor-hub.tailor-hub-collapsed .tailor-hub-collapsed-actions { display: flex; }
.tailor-hub.tailor-hub-collapsed .tailor-hub-header { margin-bottom: 0.5rem; }
.tailor-hub.tailor-hub-collapsed .tailor-hub-eyebrow { display: none; }

/* Hub no-JD mode — Improve & Tailor still works; Cover Letter and Match Score show "set target job" prompts.
   Header is informational-only (no button) — cards drive the action. */
.tailor-hub .tailor-hub-meta-no-jd,
.tailor-hub .tailor-hub-card-state-no-jd,
.tailor-hub .tailor-hub-cta-no-jd { display: none; }
.tailor-hub.tailor-hub-no-jd .tailor-hub-meta-jd,
.tailor-hub.tailor-hub-no-jd .tailor-hub-actions-jd,
.tailor-hub.tailor-hub-no-jd .tailor-hub-card-state-default,
.tailor-hub.tailor-hub-no-jd .tailor-hub-card-state-ready,
.tailor-hub.tailor-hub-no-jd .tailor-hub-cta-jd { display: none; }
.tailor-hub.tailor-hub-no-jd .tailor-hub-meta-no-jd { display: block; }
.tailor-hub.tailor-hub-no-jd .tailor-hub-card-state-no-jd { display: block; }
.tailor-hub.tailor-hub-no-jd .tailor-hub-cta-no-jd { display: inline-block; }

/* Hero "or just improve" secondary affordance — keep paste CTA dominant */
.tailor-hero-secondary { color: #555; }
.tailor-hero-secondary a { text-decoration: none; }
.tailor-hero-secondary a:hover { text-decoration: underline; }
.tailor-hub-card { background: #fff; border: 1px solid rgba(60, 66, 87, 0.12); border-radius: 0.5rem; padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; min-height: 120px; box-shadow: 0 1px 2px 0 rgba(60, 66, 87, 0.08), 0 1px 3px 0 rgba(60, 66, 87, 0.04); }
.tailor-hub-card-icon { font-size: 1.25rem; line-height: 1; }
.tailor-hub-card-title { font-size: 0.95rem; font-weight: 600; color: var(--color-black); }
.tailor-hub-card-body { font-size: 0.85rem; color: #555; flex-grow: 1; line-height: 1.35; }
.tailor-hub-card-cta { display: flex; align-items: center; gap: 0.6rem; }
.tailor-hub-card-cta .btn { font-weight: 500; }
.tailor-hub-card-cta a { text-decoration: none; }
.tailor-hub-card-cta a:hover { text-decoration: underline; }

#targetJobContainer.targetJob-compact .contentSectionBody { padding: 0.4rem 0.5rem; font-size: 0.85rem; }


/* ATS Match Report — Free-tier paywall: blurs underlying content with an overlay CTA.
   Used for Recommendations and Keywords sections; Free users see the score + breakdown unblurred. */
.ats-paywall { position: relative; border-radius: 0.5rem; overflow: hidden; }
.ats-paywall .ats-paywall-content {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}
.ats-paywall .ats-paywall-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    padding: 1rem;
}
.ats-paywall .ats-paywall-overlay .btn { font-weight: 600; }

/* Blur-only variant — used for Keywords section when the upgrade CTA is already shown above (Recommendations).
   Just a soft blur, no overlay or repeated CTA. */
.ats-blur-only { filter: blur(5px); user-select: none; pointer-events: none; }

/* ATS Match Score — compact view inside the Hub card. Full breakdown is in the Full Report popup.
   Score number and label color-coordinate with the score level. No bar — the number states the value
   precisely, the label gives the category, and color carries the urgency. */
#hubScoreCard .ats-state { display: none; }
#hubScoreCard .ats-score-big { font-size: 1.7rem; font-weight: 700; line-height: 1; color: #495057; transition: color 0.3s ease; }
#hubScoreCard .ats-score-max { margin-left: 2px; }
#hubScoreCard .ats-score-label { margin-left: auto; font-weight: 500; transition: color 0.3s ease; }
#hubScoreCard .ats-score-row { gap: 4px; }
/* Color-coordinate number + label based on the score level (good / fair / poor). */
#hubScoreCard .ats-state-scored.ats-score-good .ats-score-big,
#hubScoreCard .ats-state-scored.ats-score-good .ats-score-label { color: #2e7d32; }
#hubScoreCard .ats-state-scored.ats-score-fair .ats-score-big,
#hubScoreCard .ats-state-scored.ats-score-fair .ats-score-label { color: #c77800; }
#hubScoreCard .ats-state-scored.ats-score-poor .ats-score-big,
#hubScoreCard .ats-state-scored.ats-score-poor .ats-score-label { color: #b02a37; }
#hubScoreCard .ats-stale-pill { color: #6c757d; }
#hubScoreCard .ats-stale-pill a { text-decoration: none; }
#hubScoreCard .ats-stale-pill a:hover { text-decoration: underline; }
/* Full Report popup still uses these classes for the breakdown bars and recommendation list */
.ats-axis-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; }
.ats-axis-label { width: 90px; color: #495057; }
.ats-axis-bar { flex: 1; height: 5px; background: #e9ecef; border-radius: 3px; overflow: hidden; }
.ats-axis-fill { height: 100%; width: 0; background: #1976d2; transition: width .4s ease; }
.ats-axis-pct { width: 36px; text-align: right; color: #495057; }
.ats-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.ats-dot-high { background: #c62828; }
.ats-dot-med { background: #ed6c02; }
.ats-dot-low { background: #6c757d; }
/* Match the visual contract of other link-button icons (link-settings, link-edit, etc.):
   24x24 anchor with an 18x18 centered glyph. We use Unicode (no PNG sprite) but mirror the positioning,
   color, and hover treatment so the button looks consistent in the sidebar header. */
a.link-button.link-refresh::after {
    content: "\21BB";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #4a4a4a;
    background-image: none;
}
a.link-button.link-refresh:hover::after,
a.link-button.link-refresh:active::after,
a.link-button.link-refresh.active::after {
    color: #fff;
}

/*********************/
/* Applications      */
/*********************/

.rb-apps { color: var(--color-black); }

.rb-apps-nav-link { position: relative; }
.rb-apps-nav-badge {
    display: inline-block; min-width: 20px; padding: 0 6px;
    margin-left: 4px; border-radius: 10px;
    background: var(--color-blue); color: #fff;
    font-size: 0.75rem; font-weight: 600; line-height: 18px; text-align: center;
    vertical-align: middle;
}

/* Funnel ----------------------------------------------------------------- */
/* Width is now constrained by the dashboard column (col-lg-5), so no max-width here. */
.rb-apps-funnel-grid { display: flex; flex-direction: column; gap: 8px; }
.rb-apps-funnel-stage { width: 100%; }
.rb-apps-funnel-meta {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 4px; font-size: 0.95rem;
}
.rb-apps-funnel-label { font-weight: 600; }
.rb-apps-funnel-value { font-variant-numeric: tabular-nums; }
.rb-apps-funnel-value strong { font-weight: 700; }
.rb-apps-funnel-pct  { color: #6b6e7a; font-size: 0.85em; margin-left: 8px; }
.rb-apps-funnel-track {
    width: 100%; height: 10px; border-radius: 999px;
    background: var(--color-gray-light); overflow: hidden;
}
.rb-apps-funnel-fill {
    height: 100%; border-radius: 999px;
    transition: width 300ms ease-out;
}
.rb-apps-funnel-applied      { background: var(--color-blue); }
.rb-apps-funnel-phonescreen  { background: #d68a00; }
.rb-apps-funnel-onsite       { background: var(--color-orange); }
.rb-apps-funnel-offered      { background: var(--color-green); }

/* Activity strip --------------------------------------------------------- */
.rb-apps-activity { display: flex; gap: 4px; }
.rb-apps-activity-cell { flex: 1; height: 32px; border-radius: 4px; background: var(--color-gray-light); }
.rb-apps-activity-l1 { background: rgba(var(--color-blue-rgb), 0.25); }
.rb-apps-activity-l2 { background: rgba(var(--color-blue-rgb), 0.5); }
.rb-apps-activity-l3 { background: rgba(var(--color-blue-rgb), 0.75); }
.rb-apps-activity-l4 { background: rgba(var(--color-blue-rgb), 1); }

/* Banners ---------------------------------------------------------------- */
.rb-apps-banner {
    background: rgba(var(--color-orange-rgb), 0.12);
    border: 1px solid rgba(var(--color-orange-rgb), 0.35);
    color: var(--color-black); border-radius: 8px; padding: 12px 16px;
}
.rb-apps-banner-soft {
    background: var(--color-gray-lighter);
    border: 1px solid var(--color-gray-light);
    color: var(--color-black); border-radius: 8px; padding: 12px 16px;
}

/* Filters / search ------------------------------------------------------- */
.rb-apps-search { max-width: 280px; }
.rb-apps-filter { width: auto; }

/* Empty state ------------------------------------------------------------ */
.rb-apps-empty .card-body h2 { margin-top: 0; }

/* Table view ------------------------------------------------------------- */
.rb-apps-table { font-size: 0.95rem; }
.rb-apps-table thead th {
    text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em;
    color: #6b6e7a; font-weight: 600; border-bottom: 1px solid var(--color-gray-light);
}
.rb-apps-row { cursor: pointer; }
.rb-apps-row:hover { background: var(--color-gray-lighter); }
.rb-apps-row td { vertical-align: middle; }
.rb-apps-company { font-weight: 600; }
.rb-apps-role-link { color: var(--color-black); text-decoration: none; border-bottom: 1px dashed var(--color-gray-medium); }
.rb-apps-role-link:hover { color: var(--color-blue); border-bottom-color: var(--color-blue); }
.rb-apps-resume-pill {
    display: inline-block; max-width: 200px; padding: 2px 10px; border-radius: 999px;
    background: var(--color-gray-light); color: var(--color-black);
    font-size: 0.85rem; line-height: 1.5; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
.rb-apps-resume-pill:hover { background: var(--color-gray-medium); text-decoration: none; }

/* Score badge ------------------------------------------------------------ */
.rb-apps-score {
    display: inline-block; min-width: 36px; padding: 2px 8px;
    border-radius: 6px; font-weight: 700; font-variant-numeric: tabular-nums;
    text-align: center; font-size: 0.875rem;
}
.rb-apps-score-strong { background: rgba(var(--color-green-rgb), 0.15); color: var(--color-green); }
.rb-apps-score-fair   { background: rgba(var(--color-orange-rgb), 0.15); color: var(--color-orange); }
.rb-apps-score-weak   { background: rgba(var(--color-red-rgb), 0.15); color: var(--color-red); }

/* Status pill ------------------------------------------------------------ */
.rb-apps-status-pill {
    display: inline-block; padding: 3px 12px; border-radius: 999px;
    border: 1px solid transparent; cursor: pointer;
    font-size: 0.85rem; font-weight: 600; line-height: 1.4;
    background: var(--color-gray-light); color: var(--color-black);
    transition: filter 100ms;
}
.rb-apps-status-pill:hover { filter: brightness(0.96); }
.rb-apps-status-applied      { background: rgba(var(--color-blue-rgb), 0.12);   color: var(--color-blue);   }
.rb-apps-status-phonescreen  { background: rgba(214, 138, 0, 0.15);             color: #b07300;             }
.rb-apps-status-onsite       { background: rgba(var(--color-orange-rgb), 0.15); color: var(--color-orange); }
.rb-apps-status-offered      { background: rgba(var(--color-green-rgb), 0.15);  color: var(--color-green);  }
.rb-apps-status-rejected     { background: rgba(var(--color-red-rgb), 0.10);    color: var(--color-red);    }
.rb-apps-status-withdrawn    { background: var(--color-gray-light); color: #6b6e7a; }
.rb-apps-status-ghosted      { background: var(--color-gray-light); color: #6b6e7a; }

.rb-apps-status-menu {
    position: absolute; z-index: 1080;
    background: #fff; border: 1px solid var(--color-gray-light); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10); padding: 4px;
    min-width: 160px;
}
.rb-apps-status-menu-item {
    display: block; width: 100%; padding: 6px 10px; border: 0; background: transparent;
    text-align: left; border-radius: 4px; font-size: 0.9rem;
}
.rb-apps-status-menu-item:hover { background: var(--color-gray-lighter); }

/* Pipeline kanban -------------------------------------------------------- */
.rb-apps-pipeline-grid {
    display: grid; gap: 12px; align-items: start;
    grid-template-columns: repeat(5, minmax(220px, 1fr));
}
@media (max-width: 1199px) { .rb-apps-pipeline-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); } }
@media (max-width: 767px)  { .rb-apps-pipeline-grid { grid-template-columns: 1fr; } }

.rb-apps-pipeline-col {
    background: var(--color-gray-lighter); border-radius: 10px; padding: 10px;
    min-height: 200px;
}
.rb-apps-pipeline-col-closed { background: #f3f3f6; }
.rb-apps-pipeline-col-head {
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 600; padding: 4px 8px 8px 8px;
}
.rb-apps-pipeline-count {
    background: #fff; border: 1px solid var(--color-gray-light);
    border-radius: 999px; padding: 0 8px;
    font-size: 0.75rem; color: #6b6e7a; font-weight: 600;
}
.rb-apps-pipeline-list { min-height: 60px; display: flex; flex-direction: column; gap: 8px; }

.rb-apps-pipeline-card {
    background: #fff; border: 1px solid var(--color-gray-light); border-radius: 8px;
    padding: 10px 12px; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: box-shadow 100ms, transform 100ms;
}
.rb-apps-pipeline-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.rb-apps-pipeline-card-company { font-weight: 600; }
.rb-apps-pipeline-card-role { color: #6b6e7a; font-size: 0.85rem; margin-top: 2px; }
.rb-apps-pipeline-card-meta {
    display: flex; align-items: center; gap: 8px; margin-top: 8px;
    font-size: 0.8rem; color: #6b6e7a;
}
.rb-apps-pipeline-card-tag {
    padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
}
.rb-apps-pipeline-card-tag-rejected   { background: rgba(var(--color-red-rgb), 0.10); color: var(--color-red); }
.rb-apps-pipeline-card-tag-withdrawn  { background: var(--color-gray-light); color: #6b6e7a; }
.rb-apps-pipeline-card-tag-ghosted    { background: var(--color-gray-light); color: #6b6e7a; }

/* SortableJS ghost while dragging */
.sortable-ghost { opacity: 0.4; }
.sortable-chosen { box-shadow: 0 8px 24px rgba(0,0,0,0.15); }

/* Detail drawer ---------------------------------------------------------- */
.rb-apps-drawer {
    position: fixed; inset: 0; z-index: 1060;
    pointer-events: none; visibility: hidden;
}
.rb-apps-drawer.rb-apps-drawer-open {
    pointer-events: auto; visibility: visible;
}
.rb-apps-drawer-backdrop {
    position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35);
    opacity: 0; transition: opacity 180ms;
}
.rb-apps-drawer-open .rb-apps-drawer-backdrop { opacity: 1; }
.rb-apps-drawer-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 100%; max-width: 560px;
    background: #fff; box-shadow: -8px 0 24px rgba(0,0,0,0.10);
    transform: translateX(100%); transition: transform 220ms ease-out;
    display: flex; flex-direction: column; overflow-y: auto;
}
.rb-apps-drawer-open .rb-apps-drawer-panel { transform: translateX(0); }
.rb-apps-drawer-header {
    padding: 16px 20px; border-bottom: 1px solid var(--color-gray-light);
}
.rb-apps-drawer-title-eyebrow {
    display: inline-block; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: #6b6e7a; margin-right: 6px;
}
.rb-apps-drawer-body { padding: 4px 20px 32px 20px; }
.rb-apps-drawer-section { padding: 12px 0; border-bottom: 1px solid var(--color-gray-lighter); }
.rb-apps-drawer-section:last-child { border-bottom: 0; }
.rb-apps-drawer-company { font-size: 1.4rem; font-weight: 700; }
.rb-apps-drawer-role { color: #6b6e7a; }

/* Inline-edit inputs at the top of the drawer — render as flat text until focused so the
   section reads as a heading; show the input chrome on hover/focus to signal editability. */
.rb-apps-drawer-edit-company {
    font-size: 1.4rem; font-weight: 700;
    border-color: transparent; background: transparent; padding-left: 0; padding-right: 0;
    transition: border-color 120ms, background 120ms, padding 120ms;
}
.rb-apps-drawer-edit-role {
    color: #6b6e7a;
    border-color: transparent; background: transparent; padding-left: 0; padding-right: 0;
    transition: border-color 120ms, background 120ms, padding 120ms;
}
.rb-apps-drawer-edit-company:hover, .rb-apps-drawer-edit-company:focus,
.rb-apps-drawer-edit-role:hover, .rb-apps-drawer-edit-role:focus {
    border-color: var(--color-gray-medium);
    background: #fff;
    padding-left: 0.75rem; padding-right: 0.75rem;
}

.rb-apps-drift {
    padding: 8px 12px; border-radius: 6px; background: var(--color-gray-lighter);
}
.rb-apps-drift-warn { background: rgba(var(--color-orange-rgb), 0.12); }
.rb-apps-drift-ok   { background: rgba(var(--color-green-rgb), 0.10); }

.rb-apps-timeline { display: flex; flex-direction: column; gap: 10px; }
.rb-apps-timeline-item { display: flex; gap: 10px; align-items: flex-start; }
.rb-apps-timeline-dot {
    width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; flex: 0 0 10px;
    background: var(--color-blue);
}
.rb-apps-timeline-dot.rb-apps-status-applied      { background: var(--color-blue); }
.rb-apps-timeline-dot.rb-apps-status-phonescreen  { background: #d68a00; }
.rb-apps-timeline-dot.rb-apps-status-onsite       { background: var(--color-orange); }
.rb-apps-timeline-dot.rb-apps-status-offered      { background: var(--color-green); }
.rb-apps-timeline-dot.rb-apps-status-rejected     { background: var(--color-red); }
.rb-apps-timeline-dot.rb-apps-status-withdrawn    { background: #6b6e7a; }
.rb-apps-timeline-dot.rb-apps-status-ghosted      { background: #6b6e7a; }

@media (max-width: 575px) {
    .rb-apps-drawer-panel { max-width: 100%; }
}