per option, each holding
. */
.onboarding-weekdays > .weekday-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
width: 100%;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.onboarding-weekdays > .weekday-grid > div {
margin: 0;
}
/* Minimalist toggle chips: the chip itself shows selection, no checkbox box */
.onboarding-weekdays .weekday-grid label {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 0 13px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
color: var(--muted);
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: border-color .15s, background .15s, color .15s;
}
.onboarding-weekdays .weekday-grid label:hover {
border-color: #c2d0c8;
color: var(--ink);
}
.onboarding-weekdays .weekday-grid label:has(input:checked) {
border-color: var(--green);
background: var(--green-soft);
color: var(--green-ink);
font-weight: 700;
}
.onboarding-weekdays .weekday-grid label:has(input:focus-visible) {
outline: 2px solid var(--green);
outline-offset: 2px;
}
.onboarding-weekdays .weekday-grid input[type="checkbox"] {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
border: 0;
opacity: 0;
pointer-events: none;
}
/* Meeting location — radio option cards with title + description */
.onboarding-location-cards {
display: flex;
flex-direction: column;
gap: 12px;
}
.location-card {
display: flex;
align-items: flex-start;
gap: 13px;
padding: 15px 18px;
border: 1.5px solid var(--line);
border-radius: 12px;
background: #fff;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.location-card:hover {
border-color: #c2d0c8;
}
.location-card:has(input:checked) {
border-color: var(--green);
background: var(--green-soft);
}
.location-card input[type="radio"] {
appearance: none;
-webkit-appearance: none;
flex: none;
width: 20px;
height: 20px;
min-height: 0;
margin: 1px 0 0;
padding: 0;
border: 1.5px solid #c2d0c8;
border-radius: 50%;
background: #fff;
cursor: pointer;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.location-card input[type="radio"]:checked {
border-color: var(--green);
background: var(--green);
box-shadow: inset 0 0 0 3.5px #fff;
}
.location-card input[type="radio"]:focus-visible {
outline: 2px solid var(--green);
outline-offset: 2px;
}
.location-card-icon {
flex: none;
width: 19px;
height: 19px;
margin-top: 1px;
fill: none;
stroke: var(--muted);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.location-card:has(input:checked) .location-card-icon {
stroke: var(--green);
}
.location-card-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.location-card-text strong {
font-size: 13px;
font-weight: 700;
color: var(--ink);
}
.location-card-text small {
font-size: 12px;
line-height: 1.4;
color: var(--muted);
}
/* Step 6 left panel: "why this matters" + "what we configure" */
.onboarding-why {
margin-top: 22px;
padding: 16px;
border-radius: 12px;
background: var(--green-soft);
}
.onboarding-why-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.onboarding-why-head svg {
width: 16px;
height: 16px;
fill: none;
stroke: var(--green-dark);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.onboarding-why-head strong {
font-size: 13px;
font-weight: 750;
color: var(--green-ink);
}
.onboarding-why p {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: #37574a;
}
.onboarding-config-list {
margin-top: 24px;
display: grid;
gap: 16px;
}
.onboarding-config-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 13px;
font-weight: 750;
color: var(--ink);
}
.onboarding-config-title svg {
width: 15px;
height: 15px;
fill: none;
stroke: var(--green);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.onboarding-config-item {
display: flex;
align-items: flex-start;
gap: 11px;
}
.onboarding-config-item > svg {
flex: none;
width: 30px;
height: 30px;
padding: 7px;
border-radius: 8px;
background: var(--green-soft);
fill: none;
stroke: var(--green);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.onboarding-config-item span {
display: flex;
flex-direction: column;
gap: 1px;
}
.onboarding-config-item strong {
font-size: 13px;
font-weight: 700;
color: var(--ink);
}
.onboarding-config-item small {
font-size: 12px;
line-height: 1.4;
color: var(--muted);
}
@media (max-width: 720px) {
.onboarding-meetings-form .form-grid.two-col {
grid-template-columns: 1fr;
}
.onboarding-weekdays .weekday-grid label {
flex: 1 1 calc(50% - 5px);
}
}
.actions-section {
background: #f6f9f7;
border-radius: 14px;
padding: 20px;
}
.actions-section-head {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 16px;
}
.actions-section-head .field-icon {
margin-top: 2px;
}
.actions-section-head strong {
display: block;
font-size: 15px;
font-weight: 750;
color: var(--ink);
}
.actions-section-head small {
color: var(--muted);
font-size: 13px;
}
.actions-toggles {
display: grid;
gap: 8px;
}
.onboarding-safe-list {
display: grid;
gap: 10px;
}
.onboarding-safe-item {
display: grid;
grid-template-columns: 28px 1fr;
gap: 12px;
padding: 13px 14px;
background: #fff;
border: 1px solid rgba(17, 122, 85, 0.1);
border-radius: 10px;
}
.onboarding-safe-item > svg {
width: 28px;
height: 28px;
padding: 7px;
border-radius: 999px;
background: rgba(17, 122, 85, 0.1);
color: var(--green);
stroke: currentColor;
stroke-width: 2.4;
fill: none;
}
.onboarding-safe-item strong {
display: block;
font-size: 14px;
font-weight: 750;
color: var(--ink);
}
.onboarding-safe-item small {
display: block;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
margin-top: 2px;
}
.actions-toggle {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border-radius: 10px;
cursor: pointer;
transition: background 0.15s;
}
.actions-toggle:hover {
background: #f0f5f1;
}
.actions-toggle input[type="checkbox"] {
width: 20px;
height: 20px;
min-height: 20px;
flex-shrink: 0;
margin: 0;
accent-color: var(--green);
cursor: pointer;
}
.actions-toggle strong {
display: block;
font-size: 14px;
font-weight: 650;
color: var(--ink);
}
.actions-toggle small {
display: block;
color: var(--muted);
font-size: 12px;
line-height: 1.4;
margin-top: 1px;
}
.actions-limits {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.actions-limit {
display: flex;
flex-direction: column;
gap: 5px;
}
.actions-limit label {
font-size: 13px;
font-weight: 650;
color: var(--ink);
}
.actions-limit input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
font-size: 15px;
font-weight: 600;
color: var(--ink);
}
.actions-limit input:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(17, 122, 85, 0.1);
}
.actions-limit > strong {
display: flex;
align-items: center;
min-height: 42px;
width: 100%;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
font-size: 15px;
font-weight: 800;
color: var(--green);
}
.actions-legal {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
background: #fef9f0;
border-radius: 10px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--ink);
}
.actions-legal input[type="checkbox"] {
width: 20px;
height: 20px;
min-height: 20px;
flex-shrink: 0;
margin: 0;
accent-color: var(--green);
cursor: pointer;
}
.onboarding-review-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.onboarding-sample {
min-height: 190px;
padding: 20px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fbfcfb;
}
.onboarding-sample span,
.onboarding-review-summary span {
display: block;
margin-bottom: 10px;
color: var(--green);
font-size: 10px;
font-weight: 850;
letter-spacing: .14em;
text-transform: uppercase;
}
.onboarding-sample p,
.onboarding-review-summary p {
margin: 0;
color: #5f6d66;
line-height: 1.55;
}
.onboarding-review-summary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 14px;
}
.onboarding-review-summary article {
padding: 18px;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
}
.onboarding-review-summary strong {
display: block;
margin-bottom: 7px;
color: var(--ink);
}
.toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 15px; }
.search-form { display: flex; width: min(720px, 100%); gap: 9px; }
.search-form input { flex: 1; }
.search-form select { width: 165px; }
.toolbar > span { color: var(--muted); }
.table-card { overflow: hidden; }
.data-table { min-width: 980px; }
.table-row { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(120px, 1fr) minmax(110px, .7fr) minmax(220px, 1.4fr) minmax(90px, .6fr) auto; gap: 18px; align-items: center; min-height: 70px; padding: 10px 20px; border-top: 1px solid #edf0ed; }
.table-head { min-height: 45px; border-top: 0; background: #f8faf8; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.person-cell { display: flex; min-width: 0; gap: 11px; align-items: center; }
.person-cell > span { min-width: 0; }
.person-cell strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-cell small { display: block; white-space: normal; line-height: 1.45; }
.person-cell small { color: var(--muted); }
.command-title-row {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.page-campaign-label {
display: inline-flex; align-items: center; gap: 7px;
width: fit-content;
color: var(--green-dark);
background: rgba(72, 168, 111, .1); border: 1px solid rgba(72, 168, 111, .2);
border-radius: 7px; padding: 6px 13px;
font-size: 12px; font-weight: 850;
letter-spacing: .02em;
}
.page-campaign-label svg {
width: 13px; height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.leads-board-card {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 22px;
background: #fff;
box-shadow: 0 18px 56px rgba(28, 55, 42, .045);
}
.leads-command-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(28px, 5vw, 96px);
align-items: start;
padding: 34px 34px 30px;
background: #fff;
}
.leads-command-copy {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 18px;
min-width: 0;
}
.leads-command-copy h1 {
margin: 0;
color: var(--ink);
font-size: clamp(28px, 2.25vw, 34px);
line-height: 1.05;
letter-spacing: -.035em;
}
.leads-command-copy p {
margin: 0;
color: #607069;
font-size: 14px;
font-weight: 850;
}
.leads-command-controls {
display: grid;
justify-items: stretch;
gap: 22px;
width: min(100%, 920px);
}
.leads-command-export {
display: flex;
justify-content: flex-end;
}
.leads-export-link {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 32px;
color: var(--ink);
font-size: 13px;
font-weight: 900;
text-decoration: none;
}
.leads-export-link:hover {
color: var(--green);
}
.leads-export-link svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.leads-command-search {
display: grid;
grid-template-columns: minmax(360px, 1fr) 220px 220px;
gap: 16px;
width: 100%;
}
.leads-command-search select {
width: 100%;
}
.leads-search-field {
position: relative;
display: block;
margin: 0;
}
.leads-search-field svg {
position: absolute;
left: 18px;
top: 50%;
width: 18px;
height: 18px;
transform: translateY(-50%);
color: #77837d;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
.leads-search-field input {
width: 100%;
padding-left: 48px;
}
.leads-toolbar {
margin-bottom: 20px;
}
.leads-toolbar .search-form {
width: min(820px, 100%);
}
.leads-toolbar > span {
font-weight: 800;
}
.leads-table-card {
overflow-x: auto;
border-top: 1px solid #edf1ee;
border-radius: 0;
box-shadow: none;
}
.leads-table {
min-width: 1160px;
}
.leads-table .table-row {
grid-template-columns:
minmax(270px, 1.8fr)
minmax(120px, .65fr)
minmax(360px, 2.2fr)
minmax(110px, .65fr)
72px;
min-height: 78px;
padding: 14px 24px;
}
.leads-table .table-row:not(.table-head):hover {
background: #fbfdfb;
}
.leads-table .table-head {
min-height: 52px;
padding-top: 0;
padding-bottom: 0;
}
.date-cell {
color: #66736c;
font-weight: 650;
}
.reason-cell small {
display: block;
color: #45564d;
font-size: 13px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.lead-actions {
display: flex;
justify-content: flex-end;
}
.linkedin-logo-link {
display: inline-flex;
gap: 13px;
align-items: center;
justify-content: flex-end;
min-width: 62px;
color: #627068;
text-decoration: none;
}
.linkedin-logo-link svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.linkedin-logo-link:hover {
color: var(--green-dark);
}
.linkedin-mark {
display: inline-grid;
width: 24px;
height: 24px;
place-items: center;
border-radius: 5px;
background: #0a66c2;
color: #fff;
font: 900 15px/1 Arial, sans-serif;
letter-spacing: -.04em;
}
.pagination { display: flex; justify-content: center; gap: 18px; margin-top: 20px; }
.pagination a { color: var(--green); font-weight: 750; text-decoration: none; }
/* ── Meetings board card (mirrors leads-board-card pattern) ── */
.meetings-board-card {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 22px;
background: #fff;
box-shadow: 0 18px 56px rgba(28, 55, 42, .045);
}
.meetings-command-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(28px, 5vw, 96px);
align-items: start;
padding: 34px 34px 0;
background: #fff;
}
.meetings-command-copy {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.meetings-command-copy h1 {
margin: 0;
color: var(--ink);
font-size: clamp(28px, 2.25vw, 34px);
line-height: 1.05;
letter-spacing: -.035em;
}
.meetings-command-copy p {
margin: 0;
color: #607069;
font-size: 14px;
font-weight: 850;
}
.meetings-command-controls {
display: flex;
align-items: flex-end;
min-height: 100%;
}
.meetings-tabs {
display: flex;
gap: 4px;
margin: 0;
padding: 0;
border: 0;
}
.meetings-tabs a {
display: inline-flex;
align-items: center;
padding: 12px 18px;
color: var(--muted);
font-size: 13px;
font-weight: 800;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
white-space: nowrap;
}
.meetings-tabs a:hover {
color: var(--ink);
}
.meetings-tabs a.is-active {
color: var(--green-dark);
border-bottom-color: var(--green);
}
.meetings-content-area {
padding: 30px 34px 34px;
}
/* ── Meeting metrics ── */
.meeting-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 24px;
background: transparent;
}
.meeting-metric {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 14px;
align-items: center;
padding: 20px 22px;
border-radius: 16px;
background: #f7faf8;
box-shadow:
0 2px 7px rgba(15, 40, 29, .025),
0 12px 30px rgba(15, 40, 29, .045);
}
.meeting-metric > img {
grid-row: 1 / 3;
width: 48px;
height: 48px;
object-fit: contain;
border-radius: 14px;
filter: drop-shadow(0 7px 10px rgba(15, 86, 54, .09));
}
.meeting-metric span {
display: block;
color: var(--muted);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
}
.meeting-metric strong {
display: block;
font-size: 26px;
font-weight: 900;
margin-top: 2px;
color: var(--green-ink);
letter-spacing: -.02em;
}
.content-card .kind-icon img {
display: block;
width: 36px;
height: 36px;
object-fit: contain;
border-radius: 12px;
filter: drop-shadow(0 6px 9px rgba(15, 86, 54, .09));
}
/* ── Meeting band sections ── */
.meeting-band {
background: #f8faf8;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px 26px;
margin-bottom: 20px;
}
.meeting-band:last-child {
margin-bottom: 0;
}
.meeting-band h2 {
font-size: 18px;
font-weight: 850;
letter-spacing: -.025em;
color: var(--ink);
margin: 0 0 6px;
}
.meeting-band > p {
color: var(--muted);
font-size: 13px;
line-height: 1.5;
margin: 0 0 20px;
}
.meeting-upcoming-band.is-empty {
display: grid;
min-height: 590px;
place-items: center;
padding: 38px;
border: 0;
background:
radial-gradient(circle at 50% 38%, rgba(146, 180, 167, .1), transparent 38%),
#fbfdfc;
box-shadow:
0 2px 7px rgba(15, 40, 29, .025),
0 18px 44px rgba(15, 40, 29, .05);
}
.meeting-empty-upcoming {
display: grid;
width: min(100%, 820px);
justify-items: center;
gap: 10px;
text-align: center;
}
.meeting-empty-upcoming > img {
display: block;
width: min(100%, 610px);
height: auto;
margin-block: -28px -6px;
object-fit: contain;
}
.meeting-empty-upcoming > small {
color: var(--green);
font-size: 11px;
font-weight: 850;
letter-spacing: .1em;
text-transform: uppercase;
}
.meeting-empty-upcoming > h2 {
margin: 0;
color: var(--ink);
font-size: clamp(27px, 2.4vw, 34px);
line-height: 1.15;
letter-spacing: -.045em;
text-wrap: balance;
}
.meeting-empty-upcoming > p {
max-width: 64ch;
margin: 0;
color: var(--muted);
font-size: 15px;
line-height: 1.6;
text-wrap: balance;
}
.meeting-empty-upcoming .career-secondary-action {
min-height: 46px;
margin-top: 12px;
border: 0;
background: #edf5f1;
color: var(--green-dark);
box-shadow: 0 9px 22px rgba(8, 122, 72, .07);
}
.meeting-empty-upcoming .career-secondary-action:hover {
background: #e3f1e9;
transform: translateY(-1px);
}
.meeting-empty-upcoming .career-secondary-action svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.meeting-band h3 {
font-size: 15px;
font-weight: 800;
color: var(--ink);
margin: 22px 0 12px;
letter-spacing: -.02em;
}
/* ── Meeting rows ── */
.meeting-row {
display: grid;
grid-template-columns: 110px minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
padding: 16px 0;
border-top: 1px solid #edf1ee;
}
.meeting-row:first-of-type {
border-top: 0;
}
.meeting-time {
font-weight: 900;
font-size: 15px;
color: var(--green-dark);
}
.meeting-time small {
display: block;
color: var(--muted);
font-weight: 600;
font-size: 12px;
margin-top: 3px;
}
.meeting-person strong {
display: block;
font-size: 14px;
font-weight: 750;
color: var(--ink);
}
.meeting-person small {
display: block;
color: var(--muted);
font-size: 12px;
font-weight: 500;
margin-top: 3px;
}
.meeting-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
.meeting-actions form {
margin: 0;
}
.meeting-actions button:not(.button) {
min-height: 36px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
color: var(--ink);
font-size: 13px;
font-weight: 750;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.meeting-actions button:not(.button):hover {
background: #f0f5f1;
border-color: var(--green);
}
.meeting-actions input[type="url"],
.meeting-actions input[type="datetime-local"],
.meeting-actions select {
min-height: 36px;
padding: 6px 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
font: inherit;
font-size: 13px;
color: var(--ink);
}
.meeting-actions input[type="url"]:focus,
.meeting-actions input[type="datetime-local"]:focus,
.meeting-actions select:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(17, 122, 85, .1);
}
/* ── Meeting layout (types tab) ── */
.meeting-layout {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 20px;
}
.meeting-type-list a {
display: block;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
color: var(--ink);
font-size: 13px;
font-weight: 650;
text-decoration: none;
transition: background .12s;
}
.meeting-type-list a:hover {
background: #f0f5f1;
}
.meeting-type-list a.is-active {
background: var(--green-soft);
color: var(--green-dark);
font-weight: 800;
}
/* ── Meeting forms ── */
.meeting-form {
display: grid;
gap: 16px;
}
.meeting-form label {
display: block;
font-size: 12px;
font-weight: 800;
color: var(--ink);
margin-bottom: 6px;
}
.meeting-form input:not([type=checkbox]),
.meeting-form textarea,
.meeting-form select {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
font: inherit;
font-size: 14px;
color: var(--ink);
}
.meeting-form input:not([type=checkbox]):focus,
.meeting-form textarea:focus,
.meeting-form select:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(17, 122, 85, .1);
}
.meeting-form textarea {
resize: vertical;
}
.form-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.question-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 12px;
padding: 14px 0;
border-top: 1px solid var(--line);
}
/* ── Availability ── */
.availability-row {
display: grid;
grid-template-columns: 140px 1fr 1fr;
gap: 12px;
align-items: center;
padding: 8px 0;
}
.availability-row label {
font-size: 13px;
font-weight: 700;
color: var(--ink);
}
.availability-row input[type="time"] {
min-height: 38px;
padding: 6px 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
font: inherit;
font-size: 13px;
color: var(--ink);
}
.availability-row input[type="time"]:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(17, 122, 85, .1);
}
.blocked-date {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--line);
font-size: 14px;
font-weight: 650;
color: var(--ink);
}
.blocked-date button {
min-width: 32px;
min-height: 32px;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
color: var(--muted);
font-size: 18px;
cursor: pointer;
transition: background .12s, color .12s;
}
.blocked-date button:hover {
background: #fbe8e8;
color: #c33;
border-color: #e5c0c0;
}
/* ── Meetings responsive ── */
@media (max-width: 820px) {
.meetings-command-card {
grid-template-columns: 1fr;
gap: 20px;
padding: 22px 22px 0;
}
.meetings-command-controls {
align-items: flex-start;
}
.meetings-tabs {
flex-wrap: wrap;
}
.meetings-content-area {
padding: 22px;
}
.meeting-metrics {
grid-template-columns: 1fr 1fr;
}
.meeting-upcoming-band.is-empty {
min-height: 540px;
padding: 30px 24px;
}
.meeting-layout {
grid-template-columns: 1fr;
}
.meeting-row {
grid-template-columns: 85px 1fr;
}
.meeting-actions {
grid-column: 1 / -1;
justify-content: flex-start;
}
.question-row {
grid-template-columns: 1fr;
}
.form-pair {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.meetings-command-card {
padding: 18px 18px 0;
}
.meetings-content-area {
padding: 18px;
}
.meetings-tabs a {
padding: 10px 12px;
font-size: 12px;
}
.meeting-metrics {
grid-template-columns: 1fr 1fr;
}
.meeting-band {
padding: 18px;
}
.meeting-metrics {
gap: 10px;
}
.meeting-metric {
grid-template-columns: 42px minmax(0, 1fr);
column-gap: 10px;
padding: 16px 14px;
}
.meeting-metric > img {
width: 42px;
height: 42px;
}
.meeting-metric strong {
font-size: 23px;
}
.meeting-upcoming-band.is-empty {
min-height: 500px;
padding: 24px 16px;
}
.meeting-empty-upcoming > img {
width: min(100%, 470px);
margin-block: -20px -4px;
}
.meeting-empty-upcoming > p {
font-size: 14px;
}
.availability-row {
grid-template-columns: 1fr;
gap: 6px;
}
}
/* ── Unified Board Cards (leads, meetings, inbox, campaign, content, activity) ── */
.leads-board-card,
.meetings-board-card,
.inbox-board-card,
.campaign-board-card,
.content-board-card,
.activity-board-card {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 22px;
background: #fff;
box-shadow: 0 18px 56px rgba(28, 55, 42, .045);
}
.leads-command-card,
.meetings-command-card,
.inbox-command-card,
.campaign-command-card,
.content-command-card,
.activity-command-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(28px, 5vw, 96px);
align-items: start;
padding: 34px 34px 30px;
background: #fff;
}
.meetings-command-card,
.content-command-card {
padding-bottom: 0; /* Align tabs to bottom border */
}
.leads-command-copy,
.meetings-command-copy,
.inbox-command-copy,
.campaign-command-copy,
.content-command-copy,
.activity-command-copy {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.leads-command-copy h1,
.meetings-command-copy h1,
.inbox-command-copy h1,
.campaign-command-copy h1,
.content-command-copy h1,
.activity-command-copy h1 {
margin: 0;
color: var(--ink);
font-size: clamp(28px, 2.25vw, 34px);
line-height: 1.05;
letter-spacing: -.035em;
}
.leads-command-copy p,
.meetings-command-copy p,
.inbox-command-copy p,
.campaign-command-copy p,
.content-command-copy p,
.activity-command-copy p {
margin: 0;
color: #607069;
font-size: 14px;
font-weight: 850;
}
.leads-command-controls,
.meetings-command-controls,
.inbox-command-controls,
.campaign-command-controls,
.content-command-controls,
.activity-command-controls {
display: flex;
align-items: flex-end;
min-height: 100%;
}
.meetings-content-area,
.inbox-content-area,
.campaign-content-area,
.content-content-area,
.activity-content-area {
padding: 30px 34px 34px;
}
.campaign-board-card .campaign-command-card {
padding-bottom: 16px;
}
.campaign-board-card .campaign-content-area {
padding-top: 16px;
}
.activity-board-card .activity-command-card {
padding-bottom: 16px;
}
.activity-board-card .activity-content-area {
padding-top: 16px;
}
/* ── Content specific tabs ── */
.content-tabs {
display: flex;
gap: 4px;
margin: 0;
padding: 0;
border: 0;
}
.content-tabs a {
display: inline-flex;
align-items: center;
padding: 12px 18px;
color: var(--muted);
font-size: 13px;
font-weight: 800;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
white-space: nowrap;
}
.content-tabs a:hover {
color: var(--ink);
}
.content-tabs a.is-active {
color: var(--green-dark);
border-bottom-color: var(--green);
}
/* ── Inbox board card overrides ── */
.inbox-board-card .brain-inbox {
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
}
/* Responsive updates for all command cards */
@media (max-width: 820px) {
.inbox-command-card,
.campaign-command-card,
.content-command-card,
.activity-command-card {
grid-template-columns: 1fr;
gap: 20px;
padding: 22px 22px 20px;
}
.content-command-card {
padding-bottom: 0;
}
.inbox-command-controls,
.campaign-command-controls,
.content-command-controls,
.activity-command-controls {
align-items: flex-start;
}
.content-tabs {
flex-wrap: wrap;
}
.inbox-content-area,
.campaign-content-area,
.content-content-area,
.activity-content-area {
padding: 22px;
}
}
@media (max-width: 560px) {
.inbox-command-card,
.campaign-command-card,
.content-command-card,
.activity-command-card {
padding: 18px 18px 18px;
}
.content-command-card {
padding-bottom: 0;
}
.inbox-content-area,
.campaign-content-area,
.content-content-area,
.activity-content-area {
padding: 18px;
}
.content-tabs a {
padding: 10px 12px;
font-size: 12px;
}
}
.inbox-shell { display: grid; grid-template-columns: 350px minmax(0, 1fr); min-height: calc(100vh - 150px); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.brain-inbox{display:grid;grid-template-columns:280px minmax(360px,1fr) 320px;min-height:calc(100vh - 150px);overflow:hidden;border:1px solid var(--line);background:#fff}.brain-inbox .conversation-list{border-right:1px solid var(--line);min-width:0}.brain-inbox .thread{display:flex;flex-direction:column;min-width:0}.brain-inbox .decision-panel{border-left:1px solid var(--line);padding:18px;overflow:auto}.decision-panel>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.sync-state{font-size:11px;color:var(--muted)}.mode-control{display:flex;border:1px solid var(--line);height:34px}.mode-control button{border:0;background:#fff;padding:0 12px}.mode-control button.is-active{background:var(--green-dark);color:#fff}.manual-composer{border-top:1px solid var(--line);padding:14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.manual-composer textarea,.decision-panel textarea{width:100%;resize:vertical;border:1px solid var(--line);padding:10px;font:inherit}.decision-labels,.decision-risk{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.decision-labels span,.decision-risk span{border:1px solid var(--line);padding:4px 7px;font-size:11px}.decision-risk span{border-color:#e5b8ad;color:#8b2f20}.decision-panel ul{padding-left:18px;color:var(--muted);font-size:13px}.decision-evidence blockquote{margin:8px 0;padding:8px 10px;border-left:2px solid var(--green);background:var(--soft);font-size:12px}.decision-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.decision-warning{background:#fff2d8;color:#7a5100;padding:10px;margin-bottom:12px}.decision-status{padding:10px;background:var(--soft);font-weight:700}.reply-example{border-top:1px solid var(--line);padding:10px 0;font-size:12px}.reply-example p{margin:0 0 6px}
@media(max-width:1100px){.brain-inbox{grid-template-columns:240px minmax(0,1fr)}.brain-inbox .decision-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}}
@media(max-width:720px){.brain-inbox{display:block}.brain-inbox .conversation-list{max-height:240px;border-right:0;border-bottom:1px solid var(--line)}.manual-composer{grid-template-columns:1fr}.brain-inbox .decision-panel{border-left:0}}
.conversation-list { border-right: 1px solid var(--line); }
.inbox-head { padding: 19px; border-bottom: 1px solid var(--line); }
.inbox-head strong, .inbox-head small { display: block; }
.inbox-head small { color: var(--muted); }
.conversation-list > a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 15px 17px; border-bottom: 1px solid #edf0ed; color: inherit; text-decoration: none; }
.conversation-list > a:hover, .conversation-list > a.is-selected { background: #edf6ee; }
.conversation-list > a strong, .conversation-list > a small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-list > a small, .conversation-list time { color: var(--muted); font-size: 11px; }
.conversation-list > a b { position: absolute; right: 15px; bottom: 10px; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: var(--green); color: #fff; font-size: 9px; }
.thread { display: flex; min-width: 0; flex-direction: column; }
.thread-head { display: flex; min-height: 74px; justify-content: space-between; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.messages { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 25px; overflow-y: auto; background: #f8faf8; }
.message { align-self: flex-start; max-width: min(620px, 82%); }
.message p { margin: 0; padding: 12px 15px; border: 1px solid var(--line); border-radius: 5px 15px 15px; background: #fff; }
.message time { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.message.is-outgoing { align-self: flex-end; text-align: right; }
.message.is-outgoing p { border-color: #cde5d5; border-radius: 15px 5px 15px 15px; background: #dff2e5; text-align: left; }
.reply-info { display: flex; gap: 12px; align-items: center; padding: 15px 20px; border-top: 1px solid var(--line); }
.reply-info > span {
display: grid;
width: 38px;
height: 38px;
flex: 0 0 38px;
place-items: center;
border-radius: 11px;
background: #edf6ee;
color: var(--green);
}
.reply-info strong, .reply-info p { display: block; margin: 0; }
.reply-info p { color: var(--muted); font-size: 12px; }
.empty-list { padding: 50px 20px; text-align: center; }
.empty-list > span {
display: grid;
width: 48px;
height: 48px;
margin: 0 auto;
place-items: center;
border-radius: 15px;
background: #edf6ee;
color: var(--green);
}
.empty-list strong { display: block; margin-top: 10px; }
.empty-list p { color: var(--muted); }
.tabs { display: flex; gap: 5px; margin-bottom: 15px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.tabs a { padding: 8px 13px; border-radius: 8px; color: var(--muted); font-weight: 700; text-decoration: none; }
.tabs a.is-active { background: #e5f1e7; color: var(--green-dark); }
.content-feed {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
gap: 18px;
margin-inline: auto;
}
.content-board-card .content-content-area {
container: content-area / inline-size;
}
.content-card {
display: grid;
grid-template-columns: minmax(0, 1fr);
overflow: hidden;
border: 0;
border-radius: 18px;
background: #fff;
box-shadow:
0 2px 8px rgba(18, 43, 32, .035),
0 14px 36px rgba(18, 43, 32, .055);
}
.content-card-with-media {
grid-template-columns: minmax(0, 1fr);
}
.content-card-text-only {
grid-template-columns: minmax(0, 1fr);
}
.content-card-body {
display: flex;
min-width: 0;
flex-direction: column;
padding: 18px;
}
.content-card header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.content-card header strong, .content-card header small { display: block; }
.content-card header small { color: var(--muted); }
.content-card blockquote {
margin: 16px 0 0;
padding: 12px 13px;
border: 0;
border-radius: 14px;
background: #f4f7f5;
color: var(--muted);
line-height: 1.55;
}
.content-card blockquote strong { display: block; margin-bottom: 3px; color: var(--ink); }
.content-card-media {
display: grid;
min-width: 0;
min-height: 0;
aspect-ratio: 4 / 3;
place-items: center;
overflow: hidden;
background: #f3f5f3;
}
.content-image-preview { margin: 0; }
.content-image-preview img {
display: block;
width: 100%;
height: 100%;
min-height: 0;
object-fit: contain;
}
.content-card-media-state { padding: 32px; text-align: center; }
.content-image-state { display: inline-flex; align-items: center; padding: 8px 12px; border: 0; border-radius: 999px; background: #e9efeb; color: var(--muted); font-weight: 800; }
.content-image-state-pending { color: #0a6b9c; background: #eef6ff; border-color: #cae2ff; }
.content-image-state-warning { color: #9a4d13; background: #fff5e4; border-color: #f4c88f; }
.content-copy {
margin: 18px 0 16px;
color: var(--ink);
font-size: 14px;
line-height: 1.65;
overflow-wrap: anywhere;
}
.content-card footer {
display: flex;
justify-content: flex-end;
gap: 9px;
margin-top: auto;
padding-top: 18px;
border: 0;
}
@container content-area (max-width: 900px) {
.content-feed {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@container content-area (max-width: 580px) {
.content-feed {
grid-template-columns: minmax(0, 1fr);
}
.content-card header {
grid-template-columns: auto minmax(0, 1fr);
}
.content-card header .badge {
grid-column: 1 / -1;
justify-self: start;
}
.content-card footer {
align-items: stretch;
flex-direction: column-reverse;
}
.content-card footer form,
.content-card footer button {
width: 100%;
}
}
.content-empty-state {
display: grid;
grid-column: 1 / -1;
min-height: clamp(460px, 58vh, 650px);
place-items: center;
align-content: center;
gap: 10px;
padding: 32px 24px 46px;
border-radius: 22px;
background: #fff;
text-align: center;
}
.content-empty-state-art {
display: block;
width: min(100%, 520px);
max-height: 275px;
margin: 0 auto 4px;
object-fit: contain;
mix-blend-mode: multiply;
}
.content-empty-state h2,
.content-empty-state p {
margin: 0;
}
.content-empty-state h2 {
color: var(--ink);
font-size: clamp(21px, 2vw, 26px);
line-height: 1.15;
letter-spacing: -.03em;
}
.content-empty-state p {
max-width: 52ch;
color: #697770;
font-size: 14px;
line-height: 1.6;
text-wrap: pretty;
}
.content-empty-preview {
display: grid;
width: min(100%, 500px);
min-height: 58px;
grid-template-columns: 32px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
margin-top: 10px;
padding: 10px 14px;
border-radius: 14px;
background: #f6f8f7;
}
.content-empty-preview-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: #e7ece9;
}
.content-empty-preview-copy,
.content-empty-preview-meta {
display: flex;
align-items: center;
gap: 8px;
}
.content-empty-preview-copy {
flex-direction: column;
align-items: flex-start;
}
.content-empty-preview i {
display: block;
height: 7px;
border-radius: 999px;
background: #e3e8e5;
}
.content-empty-preview-copy i:first-child {
width: min(150px, 78%);
}
.content-empty-preview-copy i:last-child {
width: min(105px, 55%);
}
.content-empty-preview-meta i {
width: 38px;
}
@media (max-width: 620px) {
.content-empty-state {
min-height: 420px;
padding: 24px 10px 34px;
}
.content-empty-state-art {
max-height: 205px;
}
.content-empty-state p {
font-size: 13px;
}
.content-empty-preview {
grid-template-columns: 28px minmax(0, 1fr);
}
.content-empty-preview-meta {
display: none;
}
}
.worker-proof {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 16px 0 0;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 12px;
background: #f7fbf8;
color: var(--muted);
font-size: 13px;
}
.worker-proof span { color: var(--ink); font-weight: 800; }
.worker-proof small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-sample {
margin-top: 14px;
padding: 16px;
border: 1px solid var(--line);
border-radius: 14px;
background: #f9fbf9;
}
.preview-sample strong {
display: block;
margin-bottom: 8px;
color: var(--green);
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
}
.preview-sample p { margin: 0; color: var(--ink); line-height: 1.55; }
.settings-shell {
display: grid;
gap: 30px;
}
.settings-nav {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
width: fit-content;
max-width: 100%;
padding: 7px;
border: 1px solid var(--line);
border-radius: 17px;
background: rgba(255, 255, 255, .92);
box-shadow: 0 12px 34px rgba(12, 34, 22, .04);
}
.settings-nav a {
display: inline-flex;
align-items: center;
min-height: 39px;
padding: 0 22px;
border-right: 1px solid var(--line);
color: var(--ink);
font-size: 14px;
font-weight: 820;
text-decoration: none;
white-space: nowrap;
}
.settings-nav a:first-child { color: var(--green); }
.settings-nav a:last-child { border-right: 0; }
.settings-nav a:hover { color: var(--green); }
.settings-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
.settings-card {
display: flex;
flex-direction: column;
gap: 22px;
height: 100%;
min-width: 0;
padding: clamp(24px, 2.2vw, 31px);
border: 1px solid var(--line);
border-radius: 22px;
background: rgba(255, 255, 255, .94);
box-shadow: 0 22px 70px rgba(15, 37, 24, .05);
}
.settings-card-head {
display: grid;
gap: 12px;
padding-bottom: 2px;
}
.settings-card-kicker {
display: flex;
align-items: center;
gap: 18px;
min-height: 44px;
}
.settings-card-head .eyebrow {
margin: 0;
color: var(--green);
font-size: 11px;
font-weight: 900;
letter-spacing: .18em;
text-transform: uppercase;
}
.settings-card-head h2 {
margin: 4px 0 0;
font-size: 18px;
letter-spacing: -.03em;
}
.settings-card-head p:not(.eyebrow) {
margin: 0;
max-width: 420px;
color: var(--muted);
font-size: 13px;
line-height: 1.48;
}
.settings-card-icon {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 9px;
background: var(--green-gradient);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.23), 0 13px 30px rgba(13, 101, 63, .18);
}
.settings-card-icon.is-plain {
background: transparent;
color: var(--green);
box-shadow: none;
}
.settings-card-icon.is-light {
background: #edf7f0;
color: var(--green);
box-shadow: none;
}
.settings-card-icon svg {
width: 25px;
height: 25px;
fill: none;
stroke: currentColor;
stroke-width: 2.15;
stroke-linecap: round;
stroke-linejoin: round;
}
.settings-card-form {
display: flex;
flex: 1;
flex-direction: column;
gap: 16px;
}
.settings-card-form .field {
margin: 0;
}
.settings-card-form .field label {
display: block;
margin: 0 0 9px;
color: var(--ink);
font-size: 12px;
font-weight: 820;
}
.settings-card-form .field label span { color: var(--muted); font-weight: 700; }
.settings-card-form .field-control {
width: 100%;
min-height: 48px;
border-radius: 8px;
}
.settings-card-form select.field-control { cursor: pointer; }
.settings-lock-field {
position: relative;
}
.settings-lock-field .field-control {
padding-right: 44px;
}
.settings-lock-field > svg {
position: absolute;
right: 14px;
top: 50%;
width: 18px;
height: 18px;
transform: translateY(-50%);
color: var(--muted);
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.settings-card-form .help-text {
margin: 7px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.settings-card-form .secret-status {
display: block;
margin: 9px 0 0;
color: var(--green);
font-size: 13px;
font-weight: 850;
}
.settings-submit,
.settings-actions .button {
width: 100%;
justify-content: center;
}
.settings-submit,
.settings-actions {
margin-top: auto;
}
.settings-card .button-primary {
background: var(--green-gradient);
box-shadow: var(--green-glow);
}
.settings-card .button-primary:hover {
background: var(--green-gradient-hover);
}
.settings-card .button-secondary {
background: #fff;
}
.settings-actions.split {
display: grid;
grid-template-columns: 1fr 1.35fr;
gap: 12px;
align-items: center;
margin-top: 4px;
}
.settings-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
font-weight: 820;
}
.settings-toggle-row input[type="checkbox"],
.settings-checkline input[type="checkbox"],
.settings-checkbox-grid input[type="checkbox"] {
width: 34px;
height: 20px;
flex: 0 0 auto;
min-height: 0;
padding: 0;
accent-color: var(--green);
}
.settings-toggle-row input[type="checkbox"] {
width: 44px;
height: 24px;
}
.settings-checkbox-grid {
display: grid;
gap: 9px;
padding: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #f8fbf9;
}
.settings-checkbox-grid label,
.settings-checkline {
display: flex;
align-items: center;
gap: 9px;
color: var(--ink);
font-size: 13px;
font-weight: 760;
}
.settings-card-safety {
gap: 18px;
}
.settings-limits-grid {
display: grid;
grid-template-columns: repeat(5, minmax(130px, 1fr));
gap: 34px;
}
.settings-safety-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-top: 4px;
}
.settings-safety-footer .button {
min-width: 180px;
justify-content: center;
}
.prose-card { max-width: 1000px; margin: 0 auto; padding: clamp(28px, 5vw, 54px); }
.prose-card > h2 { margin: 7px 0 12px; font-size: 38px; letter-spacing: -.045em; }
.prose-card > p:not(.eyebrow) { max-width: 720px; color: var(--muted); font-size: 16px; }
.privacy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 32px; }
.privacy-grid article { padding: 20px; border: 1px solid var(--line); border-radius: 14px; }
.privacy-grid span {
display: inline-flex;
gap: 7px;
align-items: center;
color: var(--green);
font-weight: 850;
}
.privacy-grid svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
.privacy-grid h3 { margin: 13px 0 6px; }
.privacy-grid p { margin: 0; color: var(--muted); }
.callout { margin-top: 18px; padding: 20px; border-radius: 14px; background: #edf6ee; }
.callout p { margin: 4px 0 0; color: var(--muted); }
.campaign-guidance {
margin: -8px 0 22px;
padding: 14px 16px;
border: 1px solid #d4e9dc;
border-radius: 13px;
background: #f4faf6;
}
.campaign-guidance strong { display: block; margin-bottom: 4px; color: var(--green-dark); }
.campaign-guidance p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.empty-state { display: grid; min-height: 320px; place-items: center; align-content: center; padding: 35px; text-align: center; }
.empty-state.small { min-height: 230px; }
.empty-state > span {
display: grid;
width: 48px;
height: 48px;
place-items: center;
border-radius: 15px;
background: #edf6ee;
color: var(--green);
}
.empty-state > span svg,
.empty-list > span svg,
.reply-info > span svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
.empty-state h2, .empty-state strong { margin: 14px 0 4px; }
.empty-state p { max-width: 400px; margin: 0 0 18px; color: var(--muted); }
/* ── Dashboard "Numbers" cards (landing [03] pattern) ─────────────── */
.dash-numbers {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
margin-top: 16px;
}
.num-card {
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
grid-template-rows: minmax(28px, auto) auto;
align-items: start;
gap: 6px 12px;
min-height: 78px;
padding: 15px 16px 13px;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 22px rgba(28,55,42,.03);
text-decoration: none;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.num-card:hover {
border-color: #c7d6cd;
box-shadow: 0 10px 22px rgba(28,55,42,.06);
transform: translateY(-1px);
}
.num-card-soft {
background: #f7faf8;
box-shadow: none;
}
.num-card-head {
display: contents;
}
.num-card-icon {
display: inline-grid;
grid-row: 1;
grid-column: 2;
place-items: center;
justify-self: end;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--green-soft);
}
.num-card-icon svg {
width: 16px;
height: 16px;
fill: none;
stroke: var(--green);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Per-metric accent tones so the dashboard isn't all green */
.num-card-icon.tone-blue { background: #e9f1ff; }
.num-card-icon.tone-blue svg { stroke: #3f73d6; }
.num-card-icon.tone-teal { background: #e7f6f5; }
.num-card-icon.tone-teal svg { stroke: #0f8b8d; }
.num-card-icon.tone-amber { background: #fff2dc; }
.num-card-icon.tone-amber svg { stroke: #c98a1e; }
.num-card-icon.tone-green { background: var(--green-soft); }
.num-card-icon.tone-green svg { stroke: var(--green); }
.num-card-icon.tone-teal { background: #e1f4f0; }
.num-card-icon.tone-teal svg { stroke: #1a9e86; }
.num-card-icon.tone-slate { background: #eef1f5; }
.num-card-icon.tone-slate svg { stroke: #5f6b80; }
.num-card-delta {
grid-column: 2;
grid-row: 2;
align-self: end;
justify-self: end;
font-size: 11px;
font-weight: 800;
padding: 2px 7px;
border-radius: 999px;
white-space: nowrap;
}
.num-card-delta.is-up { color: var(--green-dark); background: var(--green-soft); }
.num-card-delta.is-down { color: #9c4949; background: #f7e7e7; }
.num-card-value {
grid-column: 1;
grid-row: 1;
color: var(--ink);
font-size: 26px;
font-weight: 900;
letter-spacing: 0;
line-height: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.num-card-value-sm {
font-size: 22px;
letter-spacing: 0;
}
.num-card-label {
grid-column: 1;
grid-row: 2;
color: var(--muted);
font-size: 12px;
font-weight: 800;
line-height: 1.2;
}
/* ── Upcoming meetings card ───────────────────────────────────────── */
.dash-meetings-card {
margin-top: 16px;
padding: 20px 22px;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
box-shadow: 0 7px 24px rgba(28,55,42,.035);
}
.dash-meetings-list {
display: grid;
gap: 8px;
margin-top: 12px;
}
.dash-meeting-row {
display: flex;
align-items: center;
gap: 14px;
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
text-decoration: none;
transition: border-color .15s, background .15s;
}
.dash-meeting-row:hover { border-color: #c7d6cd; background: #f7faf8; }
.dash-meeting-date {
display: grid;
place-items: center;
flex: none;
width: 46px;
height: 46px;
border-radius: 11px;
background: #fff2dc;
line-height: 1;
}
.dash-meeting-date strong { color: #a9740f; font-size: 17px; font-weight: 900; letter-spacing: -.02em; }
.dash-meeting-date small { color: #c98a1e; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.dash-meeting-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-meeting-info strong { color: var(--ink); font-size: 14px; font-weight: 700; }
.dash-meeting-info small { color: var(--muted); font-size: 12.5px; }
.dash-meeting-arrow { margin-left: auto; flex: none; color: var(--muted); }
.dash-meeting-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1050px) {
.dash-numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.dash-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.summary-strip {
display: grid;
grid-template-columns: minmax(155px, .95fr) repeat(3, minmax(140px, 1fr)) minmax(170px, 1.12fr) minmax(165px, 1.05fr);
min-height: 78px;
margin-top: 18px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
box-shadow: 0 7px 24px rgba(28,55,42,.035);
}
.summary-status,
.summary-metric {
display: flex;
min-width: 0;
align-items: center;
gap: 13px;
padding: 12px 24px;
border-right: 1px solid #e8eee9;
color: var(--ink);
text-decoration: none;
}
.summary-metric:last-child { border-right: 0; }
.summary-status strong {
overflow: hidden;
font-size: 16px;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
.summary-dot {
display: grid;
width: 34px;
height: 34px;
flex: 0 0 34px;
place-items: center;
border-radius: 50%;
background: #edf6ee;
}
.summary-dot i {
width: 10px;
height: 10px;
border-radius: 50%;
background: #39b96f;
box-shadow: 0 0 0 6px rgba(57,185,111,.08);
}
.summary-dot.state-paused i { background: var(--orange); box-shadow: 0 0 0 6px rgba(237,123,69,.1); }
.summary-dot.state-error i,
.summary-dot.state-stale i { background: var(--danger); box-shadow: 0 0 0 6px rgba(183,74,74,.1); }
.summary-dot.state-starting i { background: #4f9fd7; box-shadow: 0 0 0 6px rgba(79,159,215,.1); }
.summary-icon {
display: grid;
width: 28px;
height: 28px;
flex: 0 0 28px;
place-items: center;
color: var(--green);
}
.summary-icon svg {
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
.summary-copy {
display: grid;
min-width: 0;
row-gap: 2px;
align-content: center;
}
.summary-copy small {
overflow: hidden;
color: #65736b;
font-size: 12px;
font-weight: 800;
line-height: 1.05;
text-overflow: ellipsis;
white-space: nowrap;
}
.summary-copy strong {
overflow: hidden;
color: #0e1c16;
font-size: 24px;
line-height: .98;
letter-spacing: -.03em;
text-overflow: ellipsis;
white-space: nowrap;
}
.summary-copy b {
overflow: hidden;
color: var(--muted);
font-size: 12px;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
.summary-metric > em {
margin-left: auto;
color: var(--green);
font-size: 13px;
font-style: normal;
font-weight: 850;
white-space: nowrap;
}
.summary-detail .summary-copy strong {
font-size: 20px;
}
.auth-body { background: #edf1ec; }
.auth-layout { display: grid; min-height: 100vh; grid-template-columns: 1.1fr .9fr; }
.auth-story { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(35px, 7vw, 90px); background: radial-gradient(circle at 15% 85%, #2f694f, transparent 38%), #10291f; color: #fff; }
.brand-light { color: #fff; }
.auth-story h1 { max-width: 680px; margin: 12px 0 20px; font-size: clamp(42px, 6vw, 76px); line-height: .98; letter-spacing: -.055em; }
.auth-story p:not(.eyebrow) { max-width: 590px; color: #b9c9c1; font-size: 17px; }
.auth-story > small { color: #92a79c; }
.auth-panel { display: grid; place-items: center; padding: 25px; }
.auth-card { width: min(430px, 100%); padding: 38px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.auth-card h2 { margin: 5px 0 4px; font-size: 29px; letter-spacing: -.04em; }
.auth-card .field { margin-top: 20px; margin-bottom: 0; }
.auth-card .button { margin-top: 24px; }
.muted, .security-note { color: var(--muted); }
.security-note { margin: 17px 0 0; text-align: center; font-size: 11px; }
.kipdo-focus-body {
background:
radial-gradient(circle at 100% 42%, rgba(17, 122, 85, .08), transparent 27%),
radial-gradient(circle at 0 64%, rgba(223, 245, 141, .18), transparent 24%),
#fbfcfb;
color: #0e1c16;
}
.kipdo-focus-topbar {
justify-content: center;
min-height: 90px;
border-bottom: 0;
background: transparent;
backdrop-filter: none;
}
.kipdo-focus-brand {
gap: 4px;
text-decoration: none;
}
.kipdo-focus-brand img {
width: 160px;
height: auto;
border-radius: 0;
}
.kipdo-focus-brand .brand-mascot {
width: 42px;
height: 42px;
border-radius: 12px;
object-fit: contain;
animation: mascot-wiggle 3s ease-in-out infinite;
}
.kipdo-focus-brand .brand-wordmark {
width: auto;
height: 34px;
border-radius: 0;
}
.kipdo-focus-brand span {
color: #050b18;
font-size: 36px;
font-weight: 900;
line-height: 1;
letter-spacing: 0;
}
.kipdo-focus-brand em {
color: #0c9b55;
font-style: normal;
}
.kipdo-focus-topbar .onboarding-topbar-meta {
position: absolute;
right: clamp(18px, 4vw, 56px);
}
.onboarding-shell {
width: min(1320px, calc(100% - 220px));
padding: 0 0 42px;
}
.onboarding-experience.kipdo-panel {
display: grid;
gap: 0;
overflow: visible;
border: 1px solid #dfe6e1;
border-radius: 8px;
background: rgba(255, 255, 255, .92);
box-shadow: 0 12px 42px rgba(18, 36, 28, .06);
}
.kipdo-panel-top {
padding: 34px 40px 31px;
border-bottom: 1px solid #dfe6e1;
}
.onboarding-hero {
max-width: 640px;
margin: 0;
text-align: left;
}
.onboarding-hero .eyebrow,
.onboarding-head > span {
color: var(--green);
font-size: 11px;
font-weight: 900;
letter-spacing: 0;
}
.onboarding-hero h1 {
max-width: 640px;
margin: 8px 0 8px;
font-size: 27px;
line-height: 1.14;
letter-spacing: 0;
}
.onboarding-hero > p:not(.eyebrow) {
max-width: 520px;
margin: 0;
color: #37445f;
font-size: 15px;
line-height: 1.45;
}
.onboarding-progress {
margin-top: 30px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.onboarding-progress li {
gap: 8px;
color: #22304a;
}
.onboarding-step-link {
gap: 8px;
}
.onboarding-progress li:not(:last-child)::after {
top: 20px;
left: calc(50% + 27px);
width: calc(100% - 54px);
height: 2px;
background: repeating-linear-gradient(90deg, #dce4df 0 5px, transparent 5px 12px);
}
.onboarding-progress li.is-complete:not(:last-child)::after {
background: #b8dcc5;
}
.onboarding-step-number {
width: 41px;
height: 41px;
border: 2px solid #dfe6e9;
color: #22304a;
font-size: 18px;
font-weight: 700;
box-shadow: 0 1px 2px rgba(20, 35, 28, .04);
}
.onboarding-progress li.is-current .onboarding-step-number {
border-color: var(--green);
background: var(--green-gradient);
box-shadow: var(--green-glow);
}
.onboarding-progress li strong {
font-size: 14px;
line-height: 1.1;
}
.onboarding-progress li small {
color: var(--green);
font-size: 10px;
font-weight: 800;
}
.onboarding-card {
display: grid;
grid-template-columns: minmax(294px, .47fr) minmax(0, 1fr);
gap: 49px;
width: 100%;
margin: 0;
padding: 34px 40px 41px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.onboarding-head {
position: sticky;
top: 20px;
align-self: start;
margin: 0;
padding: 0;
border-bottom: 0;
}
.onboarding-head h2 {
margin: 9px 0 10px;
font-size: 21px;
line-height: 1.14;
letter-spacing: 0;
}
.onboarding-head p {
max-width: 320px;
color: #37445f;
font-size: 14px;
line-height: 1.48;
}
.onboarding-form-area {
min-width: 0;
}
.onboarding-help-callout {
display: grid;
grid-template-columns: 17px minmax(0, 1fr) 16px;
gap: 11px;
align-items: center;
max-width: 350px;
margin-top: 34px;
padding: 15px 18px;
border-radius: 8px;
background: linear-gradient(90deg, rgba(5, 114, 69, .1), rgba(5, 114, 69, .04));
color: var(--green);
font-size: 13px;
font-weight: 800;
line-height: 1.38;
border: 0;
text-align: left;
text-decoration: none;
}
.onboarding-help-callout:hover {
background: linear-gradient(90deg, rgba(5, 114, 69, .13), rgba(5, 114, 69, .06));
}
.onboarding-help-callout:focus-visible {
outline: 2px solid var(--green);
outline-offset: 3px;
}
.onboarding-help-callout svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.onboarding-help-open {
overflow: hidden;
touch-action: none;
}
.onboarding-help-overlay {
position: fixed;
inset: 0;
z-index: 80;
background: rgba(5, 11, 24, .36);
opacity: 0;
transition: opacity .18s ease;
}
.onboarding-help-overlay.is-open {
opacity: 1;
}
.onboarding-help-drawer {
position: fixed;
z-index: 81;
top: 0;
right: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
width: min(480px, calc(100vw - 34px));
height: 100dvh;
border-left: 1px solid #dfe6e1;
background: #fff;
box-shadow: -22px 0 55px rgba(18, 36, 28, .14);
transform: translateX(104%);
transition: transform .22s ease;
overscroll-behavior: contain;
}
.onboarding-help-drawer.is-open {
transform: translateX(0);
}
.onboarding-help-drawer-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
padding: 24px 26px 18px;
border-bottom: 1px solid #e8eee9;
background: #fff;
}
.onboarding-help-drawer-head span {
display: block;
margin-bottom: 5px;
color: var(--green);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
}
.onboarding-help-drawer-head h3 {
margin: 0;
color: #0e1c16;
font-size: 22px;
line-height: 1.12;
}
.onboarding-help-close {
display: grid;
width: 36px;
height: 36px;
flex: 0 0 36px;
place-items: center;
border: 1px solid #dfe6e1;
border-radius: 8px;
background: #fff;
color: #22304a;
}
.onboarding-help-close:hover {
background: #f4f8f5;
color: var(--green);
}
.onboarding-help-close svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.onboarding-help-drawer-body {
overflow-y: auto;
padding: 22px 26px 32px;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.onboarding-help-lead {
margin: 0;
color: #37445f;
font-size: 15px;
line-height: 1.55;
}
.onboarding-help-note {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 12px;
align-items: start;
margin: 18px 0;
padding: 14px;
border-radius: 8px;
background: #eef7f2;
color: var(--green-dark);
}
.onboarding-help-note svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
.onboarding-help-note p {
margin: 0;
font-size: 13px;
line-height: 1.45;
font-weight: 750;
}
.onboarding-help-tabs {
display: flex;
gap: 8px;
margin: 20px 0 18px;
overflow-x: auto;
}
.onboarding-help-tabs a {
flex: 0 0 auto;
padding: 8px 12px;
border: 1px solid #dfe6e1;
border-radius: 999px;
color: #22304a;
font-size: 12px;
font-weight: 850;
text-decoration: none;
}
.onboarding-help-tabs a:hover {
border-color: #bddcc8;
color: var(--green);
background: #f4faf6;
}
.onboarding-help-section {
padding: 18px 0;
border-top: 1px solid #e8eee9;
}
.onboarding-help-section h4 {
margin: 0 0 12px;
color: #0e1c16;
font-size: 16px;
}
.onboarding-help-section ol {
display: grid;
gap: 11px;
margin: 0;
padding: 0;
list-style: none;
counter-reset: drawer-step;
}
.onboarding-help-section li {
position: relative;
min-height: 26px;
padding-left: 38px;
color: #4b5870;
font-size: 14px;
line-height: 1.45;
counter-increment: drawer-step;
}
.onboarding-help-section li::before {
position: absolute;
top: -1px;
left: 0;
display: grid;
width: 26px;
height: 26px;
place-items: center;
border-radius: 50%;
background: var(--green-gradient);
color: #fff;
font-size: 12px;
font-weight: 900;
content: counter(drawer-step);
}
.onboarding-card .field {
gap: 6px;
margin-bottom: 15px;
}
.onboarding-card .field label {
color: #22304a;
font-size: 12px;
font-weight: 800;
}
.field-control-wrap {
position: relative;
}
.field-input-icon {
position: absolute;
top: 50%;
left: 14px;
z-index: 1;
width: 14px;
height: 14px;
fill: none;
stroke: #75839c;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transform: translateY(-50%);
pointer-events: none;
}
.onboarding-card .field-control {
min-height: 45px;
padding: 10px 14px;
border: 2px solid #e0e6eb;
border-radius: 8px;
background: #fff;
color: #22304a;
font-size: 13px;
font-weight: 650;
transition: border-color .18s, box-shadow .18s;
}
.onboarding-card .has-field-icon .field-control {
padding-left: 45px;
}
.onboarding-card .has-password-toggle .field-control {
padding-right: 41px;
}
.onboarding-card .field-control::placeholder {
color: #9da8bb;
font-weight: 650;
}
.onboarding-card .field-control:focus {
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(5, 114, 69, .12);
}
.field-password-toggle {
position: absolute;
top: 50%;
right: 10px;
display: grid;
width: 27px;
height: 27px;
place-items: center;
border: 0;
border-radius: 8px;
background: transparent;
color: #53627b;
transform: translateY(-50%);
}
.field-password-toggle:hover {
background: #f3f8f4;
color: var(--green);
}
.field-password-toggle svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.onboarding-card .field small {
color: #5f6c83;
font-size: 11px;
line-height: 1.45;
}
.onboarding-actions {
margin-top: 21px;
padding-top: 0;
border-top: 0;
}
.onboarding-actions .button {
min-height: 46px;
border-radius: 8px;
font-size: 15px;
font-weight: 850;
}
.onboarding-actions .button-primary {
flex: 1 1 auto;
background: var(--green-gradient);
box-shadow: var(--green-glow);
}
.onboarding-actions .button-primary:hover {
background: var(--green-gradient-hover);
}
/* Step 3: focused campaign setup. Keep the data contract, reveal it in context. */
.onboarding-market-experience .onboarding-card {
grid-template-columns: minmax(250px, .36fr) minmax(0, 1fr);
gap: clamp(38px, 5vw, 72px);
}
.onboarding-market-experience .onboarding-head p {
max-width: 280px;
}
.onboarding-market-form {
width: 100%;
max-width: 760px;
}
.market-wizard-progress {
display: grid;
grid-template-columns: auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto;
gap: 10px;
align-items: center;
margin: 0 0 32px;
padding: 0 0 22px;
border-bottom: 1px solid #e6ebe7;
}
.market-wizard-progress button {
display: inline-grid;
grid-template-columns: 28px auto;
gap: 8px;
align-items: center;
padding: 0;
border: 0;
background: transparent;
color: #7a879d;
cursor: pointer;
transition: color .18s ease;
}
.market-wizard-progress button:hover,
.market-wizard-progress button:focus-visible {
color: #17372b;
}
.market-wizard-progress button:focus-visible {
outline: 2px solid #21815f;
outline-offset: 5px;
border-radius: 5px;
}
.market-wizard-progress button span {
display: grid;
width: 28px;
height: 28px;
place-items: center;
border: 1px solid #d7dfda;
border-radius: 50%;
background: #fff;
color: #637087;
font-size: 11px;
font-weight: 900;
font-variant-numeric: tabular-nums;
transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.market-wizard-progress button strong {
font-size: 12px;
font-weight: 800;
white-space: nowrap;
}
.market-wizard-progress > i {
height: 1px;
background: #dfe6e1;
}
.market-wizard-progress button.is-current { color: #10271f; }
.market-wizard-progress button.is-current span {
border-color: #187653;
background: #187653;
color: #fff;
}
.market-wizard-progress button.is-complete span {
border-color: #a8cfba;
background: #edf7f1;
color: #126847;
}
.market-wizard-panel[hidden],
[data-goal-setup-row][hidden],
[data-job-fields][hidden],
[data-job-details][hidden] {
display: none !important;
}
.market-wizard-panel.is-current { animation: market-panel-in .2s ease both; }
@keyframes market-panel-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.market-panel-head { margin-bottom: 24px; }
.market-panel-head > span {
display: block;
margin-bottom: 6px;
color: #187653;
font-size: 10px;
font-weight: 900;
letter-spacing: .12em;
}
.market-panel-head h3 {
max-width: 590px;
margin: 0;
color: #13271f;
font-size: clamp(22px, 2.5vw, 28px);
line-height: 1.18;
letter-spacing: -.025em;
text-wrap: balance;
}
.market-panel-head p {
max-width: 600px;
margin: 8px 0 0;
color: #5d6b80;
font-size: 13px;
line-height: 1.55;
text-wrap: pretty;
}
.market-goal-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.market-goal-option {
position: relative;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 18px;
gap: 12px;
align-items: center;
min-height: 78px;
padding: 13px 14px;
border: 1px solid #dfe6e1;
border-radius: 10px;
background: #fff;
color: #1f3049;
cursor: pointer;
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.market-goal-option:last-child { grid-column: 1 / -1; }
.market-goal-option:hover {
border-color: #a9cdb9;
background: #fbfdfb;
transform: translateY(-1px);
}
.market-goal-option:active { transform: translateY(0); }
.market-goal-option:has(input:checked) {
border-color: #21815f;
background: #f0f8f3;
box-shadow: 0 0 0 2px rgba(33, 129, 95, .09);
}
.market-goal-option:has(input:focus-visible) {
outline: 2px solid #21815f;
outline-offset: 3px;
}
.market-goal-option > input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.market-goal-icon {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 9px;
background: #f2f5f3;
color: #59677c;
transition: background .18s ease, color .18s ease;
}
.market-goal-icon svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.market-goal-option input:checked ~ .market-goal-icon {
background: #dcefe4;
color: #126847;
}
.market-goal-option > span:nth-of-type(2) { min-width: 0; }
.market-goal-option strong,
.market-goal-option small { display: block; }
.market-goal-option strong {
color: #1a2a43;
font-size: 13px;
line-height: 1.25;
}
.market-goal-option small {
margin-top: 3px;
color: #68758b;
font-size: 11px;
font-weight: 600;
line-height: 1.35;
}
.market-goal-option > i {
position: relative;
width: 17px;
height: 17px;
border: 1.5px solid #c9d2cc;
border-radius: 50%;
background: #fff;
}
.market-goal-option input:checked ~ i {
border-color: #187653;
background: #187653;
}
.market-goal-option input:checked ~ i::after {
position: absolute;
top: 4px;
left: 3px;
width: 8px;
height: 4px;
border-bottom: 1.5px solid #fff;
border-left: 1.5px solid #fff;
content: "";
transform: rotate(-45deg);
}
.market-goal-option.is-coming-soon,
.market-goal-option.is-coming-soon:hover,
.market-goal-option.is-coming-soon:active {
border-color: #e3e8e5;
background: #f8faf9;
box-shadow: none;
cursor: not-allowed;
opacity: .72;
transform: none;
}
.market-goal-option.is-coming-soon .market-goal-icon {
background: #eef1ef;
color: #7b8799;
}
.market-goal-option.is-coming-soon > i {
background: #f1f4f2;
}
.market-goal-availability {
display: inline-flex;
align-items: center;
margin-top: 7px;
padding: 3px 7px;
border: 1px solid #d9e0dc;
border-radius: 999px;
background: #fff;
color: #697689;
font-size: 9px;
font-style: normal;
font-weight: 800;
letter-spacing: .07em;
line-height: 1;
text-transform: uppercase;
}
.market-goal-error { display: block; margin-top: 8px; }
.market-name-field {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid #e7ece8;
}
.onboarding-market-form .market-field { margin-bottom: 18px; }
.onboarding-market-form .market-field label { font-size: 12px; }
.onboarding-market-form .market-field textarea.field-control {
min-height: 104px;
resize: vertical;
}
.market-core-fields,
.market-discovery-fields { display: grid; gap: 2px; }
.market-optional-details {
margin-top: 8px;
border: 1px solid #dfe6e1;
border-radius: 10px;
background: #f8faf8;
overflow: hidden;
}
.market-optional-details summary {
display: grid;
grid-template-columns: minmax(0, 1fr) 20px;
gap: 12px;
align-items: center;
padding: 15px 17px;
color: #1d3048;
cursor: pointer;
list-style: none;
}
.market-optional-details summary::-webkit-details-marker { display: none; }
.market-optional-details summary:hover { background: #f2f7f3; }
.market-optional-details summary:focus-visible {
outline: 2px solid #21815f;
outline-offset: -2px;
}
.market-optional-details summary strong,
.market-optional-details summary small { display: block; }
.market-optional-details summary strong { font-size: 13px; }
.market-optional-details summary small {
margin-top: 3px;
color: #66748a;
font-size: 11px;
font-weight: 600;
}
.market-optional-details summary svg {
width: 18px;
height: 18px;
fill: none;
stroke: #506078;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform .18s ease;
}
.market-optional-details[open] summary svg { transform: rotate(180deg); }
.market-optional-body {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 18px;
padding: 17px 17px 1px;
border-top: 1px solid #e0e7e2;
background: #fff;
}
.market-optional-body [data-goal-setup-row] {
min-width: 0;
}
.market-optional-body .market-field {
margin-bottom: 0;
}
.onboarding-market-form .market-optional-body .market-field {
display: grid;
gap: 6px;
}
.onboarding-market-form .market-optional-body .market-field label {
position: static;
color: #263750;
font-size: 11.5px;
font-weight: 820;
line-height: 1.3;
letter-spacing: 0;
pointer-events: auto;
transition: color .18s ease;
}
.onboarding-market-form .market-optional-body .market-field:focus-within label {
color: #187653;
}
.onboarding-market-form .market-optional-body .field-control {
width: 100%;
min-width: 0;
min-height: 48px;
height: 48px;
padding: 0 14px;
border: 0;
border-radius: 9px;
outline: 0;
background: #f3f7f4;
box-shadow: inset 0 0 0 1px #d8e2dc, inset 3px 0 0 #c4dccc;
color: #22324a;
font-size: 12.5px;
font-weight: 650;
line-height: normal;
appearance: none;
transition: background .18s ease, box-shadow .18s ease;
}
.onboarding-market-form .market-optional-body .field-control::placeholder {
color: #89958e;
font-size: 12px;
font-weight: 560;
opacity: 1;
}
.onboarding-market-form .market-optional-body .field-control:hover {
background: #f7faf8;
box-shadow: inset 0 0 0 1px #b9cdc1, inset 3px 0 0 #8dbca3;
}
.onboarding-market-form .market-optional-body .field-control:focus {
background: #fff;
box-shadow: inset 0 0 0 1px #25805f, inset 3px 0 0 #187653, 0 0 0 3px rgba(37, 128, 95, .09);
}
.onboarding-market-form .market-optional-body .market-field:has(.field-error) .field-control {
background: #fffafa;
box-shadow: inset 0 0 0 1px #c66060, inset 3px 0 0 #c66060;
}
.market-optional-body .market-field small {
min-height: 31px;
padding-inline: 2px;
color: #69778b;
font-size: 10.5px;
font-weight: 550;
line-height: 1.4;
}
.market-optional-body [data-goal-setup-row]:has([data-market-field="sell_offer_focus"]),
.market-optional-body [data-goal-setup-row]:has([data-market-field="career_priorities"]),
.market-optional-body [data-goal-setup-row]:has([data-market-field="services_offered"]),
.market-optional-body [data-goal-setup-row]:has([data-market-field="project_preference"]),
.market-optional-body [data-goal-setup-row]:has([data-market-field="required_skills"]),
.market-optional-body [data-goal-setup-row]:has([data-market-field="must_have_criteria"]),
.market-optional-body [data-goal-setup-row]:has([data-market-field="people_to_meet"]),
.market-optional-body [data-goal-setup-row]:has([data-market-field="networking_objective"]) {
grid-column: 1 / -1;
}
.market-job-discovery {
margin-bottom: 20px;
padding: 15px 16px;
border: 1px solid #dbe6df;
border-radius: 10px;
background: #f5faf7;
}
.market-checkbox-control {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 11px;
align-items: start;
}
.market-checkbox-control input {
width: 17px;
height: 17px;
margin: 2px 0 0;
accent-color: #187653;
}
.onboarding-market-form .market-checkbox-control label { display: block; cursor: pointer; }
.market-checkbox-control label span,
.market-checkbox-control label small { display: block; }
.market-checkbox-control label small { margin-top: 3px; font-weight: 600; }
.market-job-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #dce7df;
}
.market-job-details .market-field { margin-bottom: 0; }
.market-panel-actions {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid #e7ece8;
}
.market-panel-actions .button {
min-width: 128px;
min-height: 44px;
}
.market-panel-actions .button-primary { margin-left: auto; }
/* AI setup stays inside the existing market contract: it only pre-fills fields. */
.onboarding-ai-builder {
margin: 24px 0 18px;
border-radius: 16px;
background: #f2f7f4;
box-shadow: inset 0 0 0 1px #d5e3da;
overflow: hidden;
}
.onboarding-ai-builder > summary {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 22px;
gap: 13px;
align-items: center;
padding: 17px 18px;
cursor: pointer;
list-style: none;
transition: background .2s ease;
}
.onboarding-ai-builder > summary::-webkit-details-marker { display: none; }
.onboarding-ai-builder > summary:hover { background: #edf5f0; }
.onboarding-ai-builder > summary:focus-visible {
outline: 2px solid #25805f;
outline-offset: -3px;
}
.onboarding-ai-mark {
display: grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 12px;
background: #173d30;
color: #fff;
}
.onboarding-ai-mark svg {
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.onboarding-ai-builder > summary > span:nth-child(2) { min-width: 0; }
.onboarding-ai-builder > summary small,
.onboarding-ai-builder > summary strong,
.onboarding-ai-builder > summary span span { display: block; }
.onboarding-ai-builder > summary small {
margin-bottom: 3px;
color: #257657;
font-size: 10px;
font-weight: 800;
letter-spacing: .045em;
text-transform: uppercase;
}
.onboarding-ai-builder > summary strong {
color: #1b2c26;
font-size: 14px;
line-height: 1.25;
}
.onboarding-ai-builder > summary span span {
max-width: 62ch;
margin-top: 3px;
color: #63726c;
font-size: 11.5px;
font-weight: 570;
line-height: 1.45;
}
.onboarding-ai-chevron {
width: 19px;
height: 19px;
fill: none;
stroke: #577067;
stroke-width: 2;
transition: transform .2s ease;
}
.onboarding-ai-builder[open] .onboarding-ai-chevron { transform: rotate(180deg); }
.onboarding-ai-body {
padding: 18px;
border-top: 1px solid #dce8e0;
background: #fbfdfc;
}
.onboarding-ai-field { display: grid; gap: 7px; }
.onboarding-ai-field label {
color: #263750;
font-size: 12px;
font-weight: 800;
}
.onboarding-ai-field textarea {
width: 100%;
min-height: 104px;
padding: 13px 14px;
border: 0;
border-radius: 10px;
outline: 0;
background: #fff;
box-shadow: inset 0 0 0 1px #cddbd2;
color: #24344b;
font: inherit;
font-size: 12.5px;
line-height: 1.55;
resize: vertical;
transition: box-shadow .18s ease, background .18s ease;
}
.onboarding-ai-field textarea:hover { box-shadow: inset 0 0 0 1px #aebfb4; }
.onboarding-ai-field textarea:focus {
background: #fff;
box-shadow: inset 0 0 0 1px #25805f, 0 0 0 3px rgba(37, 128, 95, .1);
}
.onboarding-ai-field textarea::placeholder { color: #8a9690; opacity: 1; }
.onboarding-ai-field > small {
color: #6d7b75;
font-size: 10.5px;
line-height: 1.45;
}
.onboarding-ai-context { margin-top: 13px; }
.onboarding-ai-context > summary {
display: inline-flex;
gap: 7px;
align-items: center;
color: #40564e;
font-size: 11px;
font-weight: 760;
cursor: pointer;
}
.onboarding-ai-context > summary span {
color: #84918c;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
}
.onboarding-ai-context-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 14px;
}
.onboarding-ai-context-grid textarea { min-height: 92px; }
.onboarding-ai-actions {
display: flex;
gap: 13px;
align-items: center;
margin-top: 17px;
}
.onboarding-ai-actions .button { min-height: 43px; }
.onboarding-ai-actions > small {
color: #718079;
font-size: 10.5px;
line-height: 1.35;
}
.onboarding-ai-progress {
display: grid;
gap: 9px;
margin-top: 16px;
padding: 13px 14px;
border-left: 3px solid #25805f;
background: #eef6f1;
color: #52655e;
font-size: 11px;
font-weight: 650;
}
.onboarding-ai-progress[hidden] { display: none; }
.onboarding-ai-progress span { display: flex; gap: 9px; align-items: center; }
.onboarding-ai-progress i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #2d8463;
animation: onboarding-ai-pulse 1.2s ease-in-out infinite;
}
.onboarding-ai-progress span:nth-child(2) i { animation-delay: .2s; }
.onboarding-ai-progress span:nth-child(3) i { animation-delay: .4s; }
@keyframes onboarding-ai-pulse {
0%, 100% { opacity: .25; transform: scale(.82); }
50% { opacity: 1; transform: scale(1); }
}
.onboarding-ai-result {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px 16px;
align-items: center;
margin-top: 16px;
padding: 14px;
background: #eaf5ef;
box-shadow: inset 3px 0 0 #25805f;
}
.onboarding-ai-result[hidden] { display: none; }
.onboarding-ai-result > div { display: flex; gap: 10px; align-items: center; }
.onboarding-ai-result > div > svg {
width: 21px;
height: 21px;
fill: none;
stroke: #247755;
stroke-width: 2.1;
}
.onboarding-ai-result strong,
.onboarding-ai-result small { display: block; }
.onboarding-ai-result strong { color: #183c2f; font-size: 12.5px; }
.onboarding-ai-result small { margin-top: 2px; color: #61746b; font-size: 10.5px; }
.onboarding-ai-result ul {
grid-column: 1 / -1;
margin: 0;
padding: 10px 0 0 18px;
border-top: 1px solid #cfe2d6;
color: #5c6e66;
font-size: 10.5px;
line-height: 1.5;
}
.onboarding-ai-error {
margin: 12px 0 0;
padding: 10px 12px;
border-left: 3px solid #b94d4d;
background: #fff3f3;
color: #8b3434;
font-size: 11px;
font-weight: 650;
line-height: 1.45;
}
.onboarding-ai-error[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.market-wizard-panel.is-current { animation: none; }
.onboarding-ai-progress i { animation: none; opacity: 1; }
}
@media (max-width: 1100px) {
.onboarding-market-experience .onboarding-card {
grid-template-columns: 1fr;
gap: 24px;
}
.onboarding-market-experience .onboarding-head p,
.onboarding-market-form { max-width: none; }
}
@media (max-width: 680px) {
.market-wizard-progress {
gap: 6px;
margin-bottom: 25px;
padding-bottom: 17px;
}
.market-wizard-progress button {
grid-template-columns: 26px;
justify-items: center;
}
.market-wizard-progress button span { width: 26px; height: 26px; }
.market-wizard-progress button strong { font-size: 10px; }
.market-goal-grid,
.market-job-details,
.market-optional-body,
.onboarding-ai-context-grid { grid-template-columns: 1fr; }
.market-optional-body [data-goal-setup-row] { grid-column: auto !important; }
.market-goal-option:last-child { grid-column: auto; }
.market-goal-option { min-height: 72px; }
.market-panel-actions .button { min-width: 0; }
.market-panel-actions .button-primary { flex: 1 1 auto; }
.onboarding-ai-builder > summary {
grid-template-columns: 38px minmax(0, 1fr) 18px;
padding: 15px;
}
.onboarding-ai-mark { width: 38px; height: 38px; }
.onboarding-ai-body { padding: 15px; }
.onboarding-ai-actions { align-items: stretch; flex-direction: column; }
.onboarding-ai-actions .button { width: 100%; }
.onboarding-ai-result { grid-template-columns: 1fr; }
.onboarding-ai-result .button { width: 100%; }
}
.onboarding-actions .button-with-icon svg {
width: 25px;
height: 25px;
stroke-width: 2.3;
}
.onboarding-actions .button-primary svg {
order: 2;
margin-left: 10px;
}
@media (max-width: 1700px) {
.activity-board-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1380px) {
.activity-top-grid { grid-template-columns: 1fr; }
.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-grid #telegram { grid-column: 1 / -1; }
.settings-limits-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.campaign-editor-layout { grid-template-columns: 1fr; }
.campaign-editor-main { order: 1; }
.campaign-advice {
position: static;
order: 2;
}
.campaign-summary-card { grid-template-columns: 1fr; }
}
@media (max-width: 1050px) {
.occ-header {
align-items: flex-start;
flex-direction: column;
}
.occ-header p:not(.eyebrow) {
max-width: none;
text-align: left;
}
.occ-primary {
grid-template-columns: 1fr;
}
.occ-primary-action {
justify-content: flex-start;
min-width: 0;
}
.occ-opportunity-line {
flex-direction: column;
}
.occ-badges {
justify-content: flex-start;
max-width: none;
}
.fit-summary-card { grid-template-columns: 1fr; }
.command-grid, .insight-grid { grid-template-columns: 1fr; }
.control-center-card { grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); }
.live-feed-card { min-height: 0; }
.dashboard-compact, .home-workbench { grid-template-columns: 1fr; }
.summary-strip { grid-template-columns: repeat(3, 1fr); }
.summary-status,
.summary-metric { border-top: 1px solid #e8eee9; }
.summary-status,
.summary-metric:nth-child(2),
.summary-metric:nth-child(3) { border-top: 0; }
.summary-metric:nth-child(3),
.summary-metric:nth-child(6) { border-right: 0; }
.engine-strip { grid-template-columns: repeat(3, 1fr); }
.engine-status-cell,
.engine-metric { border-top: 1px solid #e8eee9; }
.engine-status-cell,
.engine-metric:nth-child(3),
.engine-metric:nth-child(6) { border-right: 0; }
.engine-status-cell,
.engine-metric:nth-child(2),
.engine-metric:nth-child(3) { border-top: 0; }
.stats-cells { grid-template-columns: repeat(3, 1fr); }
.stat-cell:nth-child(3) { border-right: 0; }
.stat-cell:nth-child(n+4) { margin-top: 20px; }
.metric-grid { grid-template-columns: 1fr 1fr; }
.dashboard-grid, .campaign-layout, .content-layout, .activity-board-grid { grid-template-columns: 1fr; }
.activity-fact-grid, .queue-stat-grid { grid-template-columns: 1fr 1fr; }
.settings-grid,
.settings-grid #telegram {
grid-template-columns: 1fr;
grid-column: auto;
}
.settings-limits-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
.form-card.compact { position: static; }
.privacy-grid { grid-template-columns: 1fr; }
.campaign-brief-card { grid-template-columns: 1fr; }
.campaign-brief-column {
border-top: 1px solid var(--line);
border-left: 0;
}
.campaign-brief-column:first-child { border-top: 0; }
.campaign-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
.onboarding-topbar {
min-height: 68px;
padding: 0 20px;
}
.onboarding-brand img {
width: 142px;
}
.onboarding-topbar-meta > span {
display: none;
}
.onboarding-shell {
width: min(100% - 28px, 760px);
padding: 34px 0 54px;
}
.onboarding-experience {
gap: 22px;
}
.onboarding-hero {
padding-inline: 8px;
}
.onboarding-hero h1 {
font-size: 38px;
}
.onboarding-hero > p:not(.eyebrow) {
font-size: 15px;
}
.onboarding-progress {
overflow-x: auto;
padding: 18px;
}
.onboarding-progress ol {
min-width: 760px;
}
.onboarding-card {
padding: 28px 22px;
border-radius: 18px;
}
.sidebar { transform: translateX(-100%); transition: transform .2s ease; }
.sidebar.is-open { transform: translateX(0); }
.sidebar-close { display: block; }
.app-main { margin-left: 0; }
.mobile-menu { display: block; }
.topbar { justify-content: flex-start; gap: 14px; }
.topbar-actions { margin-left: auto; }
.agent-pill { display: none; }
.dashboard-compact { gap: 14px; }
.workspace-card { grid-template-columns: 84px minmax(0, 1fr); padding: 20px; }
.workspace-card-media { width: 78px; height: 78px; border-radius: 16px; }
.workspace-card-media img { width: 60px; height: 60px; }
.workspace-card-link { display: none; }
.stats-cells { grid-template-columns: 1fr 1fr; }
.stat-cell { min-height: 130px; padding: 14px 18px; }
.stat-cell:nth-child(3) { border-right: 1px solid #e8eee9; }
.stat-cell:nth-child(2n) { border-right: 0; }
.stat-cell:nth-child(n+3) { margin-top: 0; border-top: 1px solid #e8eee9; }
.home-progress { grid-template-columns: 1fr 1fr; }
.home-progress > div:nth-child(2n) { border-right: 0; }
.home-progress > div:nth-child(n+3) { border-top: 1px solid #e8eee9; }
.home-hero, .settings-layout, .inbox-shell { grid-template-columns: 1fr; }
.control-copy h2 { white-space: normal; }
.home-agent-panel { justify-self: stretch; width: 100%; }
.onboarding-import,
.onboarding-profile-choice,
.onboarding-actions {
align-items: stretch;
flex-direction: column;
}
.onboarding-import form,
.onboarding-import .button,
.onboarding-profile-choice-actions,
.onboarding-profile-choice-actions form,
.onboarding-profile-choice-actions .button,
.onboarding-actions .button {
width: 100%;
}
.onboarding-profile-choice-actions { flex-direction: column; }
.onboarding-review-grid,
.onboarding-review-summary {
grid-template-columns: 1fr;
}
.settings-nav {
display: flex;
width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
}
.settings-nav a { padding: 0 16px; }
.settings-card { padding: 22px; border-radius: 18px; }
.settings-actions.split { grid-template-columns: 1fr; }
.settings-safety-footer {
align-items: stretch;
flex-direction: column;
}
.settings-safety-footer .button { width: 100%; }
.attention-banner { margin-right: 14px; margin-left: 14px; }
.conversation-list { max-height: 300px; border-right: 0; border-bottom: 1px solid var(--line); overflow-y: auto; }
.inbox-shell { min-height: auto; }
.thread { min-height: 520px; }
.table-card { overflow-x: auto; }
.leads-command-card {
grid-template-columns: 1fr;
gap: 22px;
padding: 22px;
}
.leads-command-controls {
justify-items: stretch;
gap: 18px;
}
.leads-command-search {
grid-template-columns: minmax(0, 1fr) minmax(160px, 200px) minmax(150px, 190px);
width: 100%;
}
.leads-toolbar {
align-items: stretch;
}
.leads-toolbar .search-form {
display: grid;
width: 100%;
grid-template-columns: 1fr auto;
}
.leads-toolbar .search-form input {
grid-column: 1 / -1;
}
.leads-toolbar .search-form select {
width: 100%;
}
.leads-toolbar .button {
min-width: 46px;
padding-inline: 13px;
}
.leads-toolbar .button svg {
margin: 0;
}
.leads-toolbar .button {
font-size: 0;
}
.leads-toolbar .button svg {
width: 19px;
height: 19px;
}
.leads-table-card {
overflow: visible;
border: 0;
background: transparent;
box-shadow: none;
}
.leads-table {
display: grid;
min-width: 0;
gap: 12px;
}
.leads-table .table-row.table-head {
display: none;
}
.leads-table .table-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px 16px;
min-height: 0;
padding: 18px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 28px rgba(28,55,42,.035);
}
.leads-table .person-cell {
grid-column: 1 / -1;
}
.leads-table .status-cell,
.leads-table .reason-cell,
.leads-table .date-cell {
display: grid;
grid-column: 1 / -1;
grid-template-columns: 96px minmax(0, 1fr);
gap: 12px;
align-items: start;
color: var(--ink);
}
.leads-table [data-label]::before {
color: var(--muted);
font-size: 11px;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
content: attr(data-label);
}
.leads-table .person-cell::before {
display: none;
}
.leads-table .reason-cell small {
font-size: 14px;
}
.leads-table .lead-actions {
grid-column: 1 / -1;
justify-content: flex-start;
padding-top: 8px;
border-top: 1px solid #edf1ee;
}
.linkedin-logo-link {
min-height: 36px;
padding: 0 11px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff;
}
.campaign-page-intro h2 {
flex-wrap: wrap;
font-size: 38px;
line-height: 1.12;
}
.campaign-summary-card,
.campaign-tone-card,
.campaign-settings-card,
.campaign-discovery-card {
padding: 22px;
}
.campaign-summary-metrics {
grid-template-columns: 1fr 1fr;
}
.campaign-summary-metrics div:nth-child(odd) {
border-left: 0;
}
.campaign-summary-metrics div:nth-child(n+3) {
border-top: 1px solid var(--line);
}
.campaign-save-bar {
position: static;
flex-direction: column;
}
.campaign-save-bar .button {
width: 100%;
}
/* Dashboard cards on mobile: consistent gutters + tighter control card */
.page-content { padding: 14px 14px 80px; }
.command-grid { gap: 14px; }
.control-copy { height: auto; padding: 20px 18px; --control-header-gap: 24px; --control-stack-gap: 18px; }
.control-copy h2 { font-size: 21px; }
.control-actions {
align-items: stretch;
}
.control-actions form,
.control-actions > a {
display: flex;
width: 100%;
flex: 0 0 auto;
}
.agent-status-card { flex: 0 0 auto; padding: 12px; margin-top: var(--control-stack-gap); }
.agent-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agent-quick-grid a,
.agent-quick-grid a:first-child,
.agent-quick-grid a:last-child {
padding: 12px 14px;
}
.agent-quick-grid a:nth-child(odd) {
padding-left: 0;
border-right: 1px solid rgba(255,255,255,.08);
}
.agent-quick-grid a:nth-child(even) {
padding-left: 24px;
padding-right: 0;
border-right: 0;
}
.agent-quick-grid a:nth-child(n+3) {
border-top: 1px solid rgba(255,255,255,.08);
}
}
/* KipDo messaging workspace -------------------------------------------------
LinkedIn-like information architecture, rendered with the KipDo career CRM
design system. The conversation remains the focal surface; context stays
factual and secondary. */
.page-content:has(.kipdo-inbox-page) {
padding-top: 12px;
padding-right: clamp(14px, 2vw, 28px);
padding-bottom: 20px;
padding-left: clamp(14px, 2vw, 28px);
}
.kipdo-inbox-page {
--messaging-ink: #10271d;
--messaging-muted: #68776f;
--messaging-faint: #8a9690;
--messaging-green: #087a48;
--messaging-green-dark: #075537;
--messaging-mint: #edf8f2;
--messaging-line: #e7ece9;
min-height: calc(100dvh - 104px);
overflow: hidden;
border: 0;
border-radius: 20px;
background: #fff;
box-shadow:
0 2px 7px rgba(15, 40, 29, .025),
0 18px 48px rgba(15, 40, 29, .07);
}
.kipdo-inbox-page .kipdo-messaging-workspace {
display: grid;
grid-template-columns:
minmax(270px, .78fr)
minmax(440px, 1.38fr)
minmax(280px, .86fr);
width: 100%;
min-height: calc(100dvh - 104px);
height: calc(100dvh - 104px);
overflow: hidden;
border: 0;
border-radius: 0;
background: #fff;
color: var(--messaging-ink);
}
.kipdo-inbox-page .messaging-conversations,
.kipdo-inbox-page .messaging-thread,
.kipdo-inbox-page .messaging-context {
min-width: 0;
min-height: 0;
background: #fff;
}
.kipdo-inbox-page .messaging-conversations {
display: flex;
flex-direction: column;
overflow: hidden;
border-right: 1px solid var(--messaging-line);
}
.messaging-list-header {
display: grid;
flex: 0 0 auto;
gap: 16px;
padding: 24px 22px 18px;
border-bottom: 1px solid var(--messaging-line);
background:
radial-gradient(circle at 92% 4%, rgba(97, 202, 145, .11), transparent 34%),
#fff;
}
.messaging-title-row,
.messaging-row-line,
.messaging-thread-actions,
.messaging-composer-footer,
.messaging-contact-person,
.messaging-decision-summary,
.messaging-no-decision,
.messaging-safety {
display: flex;
align-items: center;
}
.messaging-title-row {
justify-content: space-between;
gap: 16px;
}
.messaging-eyebrow {
display: block;
margin-bottom: 3px;
color: var(--messaging-green);
font-size: 10px;
font-weight: 850;
letter-spacing: .13em;
text-transform: uppercase;
}
.messaging-title-row h1 {
margin: 0;
color: var(--messaging-ink);
font-size: clamp(24px, 1.8vw, 30px);
line-height: 1.05;
letter-spacing: -.04em;
text-wrap: balance;
}
.messaging-count {
display: grid;
min-width: 34px;
height: 34px;
padding: 0 9px;
place-items: center;
border-radius: 11px;
background: var(--messaging-mint);
color: var(--messaging-green);
font-size: 13px;
font-weight: 850;
font-variant-numeric: tabular-nums;
}
.messaging-search {
position: relative;
display: flex;
align-items: center;
}
.messaging-search svg {
position: absolute;
left: 14px;
width: 18px;
height: 18px;
fill: none;
stroke: #66766d;
stroke-width: 2;
stroke-linecap: round;
pointer-events: none;
}
.messaging-search input {
width: 100%;
height: 44px;
padding: 0 14px 0 42px;
border: 1px solid #dfe7e2;
border-radius: 12px;
outline: none;
background: rgba(249, 251, 250, .96);
color: var(--messaging-ink);
font-size: 14px;
font-weight: 550;
transition:
border-color .2s ease,
background-color .2s ease,
box-shadow .2s ease;
}
.messaging-search input::placeholder {
color: #8b9791;
}
.messaging-search input:focus {
border-color: rgba(8, 122, 72, .55);
background: #fff;
box-shadow: 0 0 0 4px rgba(8, 122, 72, .09);
}
.messaging-filters {
display: flex;
gap: 7px;
overflow-x: auto;
scrollbar-width: none;
}
.messaging-filters::-webkit-scrollbar {
display: none;
}
.messaging-filters button {
display: inline-flex;
min-height: 36px;
flex: 0 0 auto;
align-items: center;
gap: 6px;
padding: 0 13px;
border: 1px solid #dfe6e2;
border-radius: 10px;
background: #fff;
color: #5c6c64;
font-size: 12px;
font-weight: 750;
transition:
color .18s ease,
border-color .18s ease,
background-color .18s ease,
transform .18s ease;
}
.messaging-filters button:hover {
border-color: #c7d8cf;
color: var(--messaging-ink);
transform: translateY(-1px);
}
.messaging-filters button:active {
transform: translateY(0) scale(.98);
}
.messaging-filters button.is-active {
border-color: var(--messaging-green-dark);
background: var(--messaging-green-dark);
color: #fff;
}
.messaging-filters button span {
display: grid;
min-width: 18px;
height: 18px;
padding: 0 4px;
place-items: center;
border-radius: 6px;
background: rgba(255, 255, 255, .18);
font-size: 9px;
font-variant-numeric: tabular-nums;
}
.messaging-conversation-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-color: #d7e2dc transparent;
scrollbar-width: thin;
}
.kipdo-inbox-page .messaging-conversation-row {
position: relative;
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
gap: 14px;
align-items: center;
min-height: 98px;
padding: 17px 18px;
border: 0;
border-bottom: 1px solid #edf1ef;
background: #fff;
color: inherit;
text-decoration: none;
transition:
background-color .2s ease,
box-shadow .2s ease,
transform .2s ease;
}
.kipdo-inbox-page .messaging-conversation-row::before {
position: absolute;
inset: 12px auto 12px 0;
width: 3px;
border-radius: 0 4px 4px 0;
background: var(--messaging-green);
content: "";
opacity: 0;
transform: scaleY(.35);
transition: opacity .2s ease, transform .2s ease;
}
.kipdo-inbox-page .messaging-conversation-row:hover {
background: #f8fbf9;
transform: translateX(2px);
}
.kipdo-inbox-page .messaging-conversation-row.is-selected {
background:
linear-gradient(90deg, rgba(230, 247, 238, .94), rgba(244, 251, 247, .9));
box-shadow: inset -12px 0 26px rgba(8, 122, 72, .025);
}
.kipdo-inbox-page .messaging-conversation-row.is-selected::before {
opacity: 1;
transform: scaleY(1);
}
.messaging-avatar {
position: relative;
display: grid;
width: 54px;
height: 54px;
flex: 0 0 54px;
place-items: center;
overflow: hidden;
border: 3px solid #fff;
border-radius: 18px;
background: #dfeae4;
color: #143d2b;
box-shadow: 0 7px 18px rgba(17, 53, 36, .1);
font-size: 16px;
font-weight: 850;
}
.messaging-avatar img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.messaging-row-copy {
display: grid;
min-width: 0;
gap: 2px;
}
.messaging-row-line {
min-width: 0;
justify-content: space-between;
gap: 10px;
}
.messaging-row-line strong {
min-width: 0;
overflow: hidden;
color: var(--messaging-ink);
font-size: 15.5px;
font-weight: 780;
letter-spacing: -.015em;
text-overflow: ellipsis;
white-space: nowrap;
}
.messaging-row-line time {
flex: 0 0 auto;
color: var(--messaging-faint);
font-size: 10.5px;
font-weight: 650;
font-variant-numeric: tabular-nums;
}
.messaging-row-role,
.messaging-row-preview {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.messaging-row-role {
color: #596961;
font-size: 12px;
font-weight: 650;
}
.messaging-row-preview {
color: #829089;
font-size: 12px;
line-height: 1.4;
}
.messaging-row-preview b {
color: #5d6d64;
font-weight: 750;
}
.messaging-unread {
position: absolute;
right: 18px;
bottom: 15px;
display: grid;
min-width: 20px;
height: 20px;
padding: 0 5px;
place-items: center;
border-radius: 7px;
background: var(--messaging-green);
color: #fff;
font-size: 9px;
font-weight: 850;
font-variant-numeric: tabular-nums;
}
.messaging-review-dot {
position: absolute;
right: 19px;
bottom: 19px;
width: 9px;
height: 9px;
border: 2px solid #fff;
border-radius: 50%;
background: #ef9a37;
box-shadow: 0 0 0 3px rgba(239, 154, 55, .16);
}
.messaging-empty-list,
.messaging-filter-empty,
.messaging-no-selection,
.messaging-thread-empty {
display: grid;
place-items: center;
align-content: center;
gap: 8px;
padding: 42px 24px;
color: var(--messaging-muted);
text-align: center;
}
.messaging-empty-list strong,
.messaging-filter-empty strong,
.messaging-no-selection h2,
.messaging-thread-empty strong {
margin: 0;
color: var(--messaging-ink);
font-size: 17px;
letter-spacing: -.02em;
}
.messaging-empty-list p,
.messaging-filter-empty p,
.messaging-no-selection p,
.messaging-thread-empty p {
max-width: 34ch;
margin: 0;
color: var(--messaging-muted);
font-size: 12px;
line-height: 1.55;
}
.messaging-empty-icon {
display: grid;
width: 52px;
height: 52px;
place-items: center;
border-radius: 16px;
background: var(--messaging-mint);
color: var(--messaging-green);
box-shadow: 0 10px 24px rgba(8, 122, 72, .08);
}
.messaging-empty-icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty {
gap: 12px;
padding: 12px;
background: #f3f6f4;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty > .messaging-conversations,
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty > .messaging-thread,
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty > .messaging-context {
overflow: hidden;
border: 0;
border-radius: 17px;
background: #fff;
box-shadow:
0 2px 7px rgba(15, 40, 29, .025),
0 14px 34px rgba(15, 40, 29, .045);
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty .messaging-list-header {
border: 0;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty .messaging-conversation-scroll {
display: flex;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty .messaging-empty-list {
min-height: 0;
flex: 1 1 auto;
align-content: center;
gap: 13px;
padding: 26px 24px 42px;
}
.messaging-empty-list > img {
display: block;
width: min(100%, 270px);
height: auto;
margin-block: -10px -2px;
object-fit: contain;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty .messaging-empty-list strong {
max-width: 16ch;
font-size: 20px;
line-height: 1.25;
text-wrap: balance;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty .messaging-empty-list p {
max-width: 29ch;
font-size: 13px;
line-height: 1.6;
text-wrap: balance;
}
.kipdo-inbox-page .messaging-thread {
display: flex;
flex-direction: column;
overflow: hidden;
}
.kipdo-inbox-page .messaging-thread-header {
display: flex;
min-height: 84px;
flex: 0 0 auto;
justify-content: space-between;
gap: 18px;
padding: 14px 20px;
border-bottom: 1px solid var(--messaging-line);
background: rgba(255, 255, 255, .98);
}
.messaging-person {
display: flex;
min-width: 0;
align-items: center;
gap: 12px;
}
.messaging-avatar-large {
width: 50px;
height: 50px;
flex-basis: 50px;
border-radius: 16px;
}
.messaging-person > span:last-child {
min-width: 0;
}
.messaging-person strong,
.messaging-person small {
display: block;
max-width: min(34vw, 390px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.messaging-person strong {
color: var(--messaging-ink);
font-size: 17px;
font-weight: 800;
letter-spacing: -.025em;
}
.messaging-person small {
margin-top: 2px;
color: var(--messaging-muted);
font-size: 12px;
font-weight: 550;
}
.messaging-thread-actions {
flex: 0 0 auto;
gap: 10px;
}
.messaging-profile-link {
display: inline-flex;
min-height: 38px;
align-items: center;
gap: 8px;
padding: 0 11px;
border-radius: 10px;
color: var(--messaging-green-dark);
font-size: 12px;
font-weight: 800;
text-decoration: none;
transition: background-color .18s ease, transform .18s ease;
}
.messaging-profile-link:hover {
background: var(--messaging-mint);
transform: translateY(-1px);
}
.messaging-profile-link svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.kipdo-inbox-page .messaging-mode-control {
display: grid;
grid-template-columns: 1fr 1fr;
height: 38px;
overflow: hidden;
border: 1px solid #dce5e0;
border-radius: 10px;
background: #f6f9f7;
}
.kipdo-inbox-page .messaging-mode-control button {
min-width: 58px;
padding: 0 10px;
border: 0;
background: transparent;
color: #697870;
font-size: 11px;
font-weight: 800;
}
.kipdo-inbox-page .messaging-mode-control button.is-active {
background: var(--messaging-green-dark);
color: #fff;
box-shadow: 0 4px 12px rgba(7, 85, 55, .18);
}
.kipdo-inbox-page .messaging-message-stream {
display: flex;
flex: 1 1 auto;
min-height: 0;
flex-direction: column;
gap: 14px;
padding: 30px clamp(22px, 3vw, 42px) 24px;
overflow-y: auto;
overscroll-behavior: contain;
background:
radial-gradient(circle at 82% 6%, rgba(224, 245, 234, .46), transparent 28%),
linear-gradient(180deg, #fbfdfc 0%, #fff 38%);
scrollbar-color: #d7e2dc transparent;
scrollbar-width: thin;
}
.kipdo-inbox-page .messaging-message {
max-width: min(610px, 82%);
animation: messagingBubbleIn .28s ease both;
}
.kipdo-inbox-page .messaging-message p {
margin: 0;
padding: 14px 16px;
border: 1px solid #e0e7e3;
border-radius: 7px 17px 17px;
background: #fff;
box-shadow: 0 7px 20px rgba(18, 49, 34, .04);
color: #23392f;
font-size: 14.5px;
font-weight: 475;
line-height: 1.58;
text-align: left;
white-space: pre-wrap;
text-wrap: pretty;
}
.kipdo-inbox-page .messaging-message time {
margin-top: 6px;
color: #8a9690;
font-size: 10.5px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.kipdo-inbox-page .messaging-message.is-outgoing {
align-self: flex-end;
}
.kipdo-inbox-page .messaging-message.is-outgoing p {
border-color: #c7e3d3;
border-radius: 17px 7px 17px 17px;
background:
linear-gradient(135deg, rgba(234, 248, 240, .98), rgba(243, 251, 247, .98));
box-shadow: 0 8px 22px rgba(8, 122, 72, .055);
}
.messaging-no-selection {
min-height: 540px;
flex: 1 1 auto;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty .messaging-no-selection {
gap: 13px;
min-height: 0;
padding: 42px clamp(28px, 5vw, 72px);
background:
radial-gradient(circle at 50% 42%, rgba(146, 180, 167, .08), transparent 42%),
#fff;
}
.messaging-no-selection > img {
display: block;
width: min(100%, 650px);
height: auto;
margin-block: -18px -10px;
object-fit: contain;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty .messaging-no-selection h2 {
font-size: clamp(25px, 2.2vw, 32px);
line-height: 1.15;
letter-spacing: -.04em;
text-wrap: balance;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty .messaging-no-selection p {
max-width: 48ch;
font-size: 15px;
line-height: 1.6;
text-wrap: balance;
}
.messaging-empty-primary {
margin-top: 8px;
}
.messaging-empty-primary form {
margin: 0;
}
.messaging-empty-primary .career-secondary-action {
min-height: 46px;
border: 0;
background: #eef5f1;
color: var(--messaging-green-dark);
box-shadow: 0 9px 22px rgba(8, 122, 72, .07);
}
.messaging-empty-primary button.career-secondary-action {
font: inherit;
font-weight: 800;
cursor: pointer;
}
.messaging-empty-primary .career-secondary-action:hover {
background: #e5f2eb;
transform: translateY(-1px);
}
.messaging-empty-primary .career-secondary-action svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.messaging-composer-shell {
flex: 0 0 auto;
padding: 14px 18px 16px;
border-top: 1px solid var(--messaging-line);
background: rgba(255, 255, 255, .98);
}
.kipdo-inbox-page .messaging-composer {
display: grid;
gap: 10px;
padding: 13px;
border: 1px solid #d9e2dd;
border-radius: 14px;
background: #fff;
box-shadow:
0 7px 22px rgba(18, 49, 34, .045),
inset 0 1px rgba(255, 255, 255, .9);
transition: border-color .2s ease, box-shadow .2s ease;
}
.kipdo-inbox-page .messaging-composer:focus-within {
border-color: rgba(8, 122, 72, .5);
box-shadow:
0 9px 26px rgba(8, 122, 72, .065),
0 0 0 4px rgba(8, 122, 72, .07);
}
.kipdo-inbox-page .messaging-composer textarea {
width: 100%;
min-height: 58px;
max-height: 180px;
padding: 0;
resize: vertical;
border: 0;
outline: 0;
background: transparent;
color: var(--messaging-ink);
font-size: 14px;
line-height: 1.5;
}
.kipdo-inbox-page .messaging-composer textarea::placeholder {
color: #8a9690;
}
.messaging-composer-footer {
justify-content: space-between;
gap: 14px;
}
.messaging-composer-mode {
display: inline-flex;
min-width: 0;
align-items: center;
gap: 7px;
color: #74827a;
font-size: 10.5px;
font-weight: 650;
}
.messaging-composer-mode svg {
width: 16px;
height: 16px;
flex: 0 0 16px;
fill: none;
stroke: var(--messaging-green);
}
.kipdo-inbox-page .messaging-composer .button {
min-height: 38px;
flex: 0 0 auto;
padding: 0 15px;
border-radius: 10px;
font-size: 11.5px;
}
.messaging-action-feedback {
min-height: 0;
margin: 5px 2px 0;
color: #b14e58;
font-size: 11px;
font-weight: 700;
}
.messaging-action-feedback:empty {
display: none;
}
.messaging-composer-lock {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
min-height: 72px;
padding: 12px 13px;
border-radius: 14px;
background: #f6f9f7;
box-shadow: inset 0 0 0 1px #e2e9e5;
}
.messaging-composer-lock-icon {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 12px;
background: #fff;
color: var(--messaging-green);
box-shadow: 0 7px 18px rgba(18, 49, 34, .07);
}
.messaging-composer-lock-icon svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
}
.messaging-composer-lock strong {
display: block;
color: var(--messaging-ink);
font-size: 12.5px;
font-weight: 800;
}
.messaging-composer-lock p {
max-width: 58ch;
margin: 3px 0 0;
color: var(--messaging-muted);
font-size: 10.5px;
line-height: 1.45;
}
.messaging-takeover-button {
min-height: 38px;
padding-inline: 14px;
border-color: #d3dfd8;
border-radius: 10px;
background: #fff;
color: var(--messaging-green-dark);
font-size: 11px;
font-weight: 800;
}
.messaging-takeover-button:hover {
border-color: #b8cec1;
background: var(--messaging-mint);
transform: translateY(-1px);
}
.kipdo-inbox-page .messaging-context {
display: block;
padding: 0;
overflow-y: auto;
border-left: 1px solid var(--messaging-line);
background:
radial-gradient(circle at 100% 0, rgba(229, 247, 237, .62), transparent 25%),
#fff;
scrollbar-color: #d7e2dc transparent;
scrollbar-width: thin;
}
.messaging-context-section {
padding: 23px 22px;
border-bottom: 1px solid var(--messaging-line);
}
.kipdo-inbox-page .messaging-context-empty {
display: grid;
align-content: start;
gap: 10px;
padding: 12px;
overflow-y: auto;
background: #f6f9f7;
}
.kipdo-inbox-page .messaging-context-empty .messaging-context-section {
border: 0;
border-radius: 15px;
background: #fff;
box-shadow:
0 2px 7px rgba(15, 40, 29, .02),
0 10px 26px rgba(15, 40, 29, .035);
}
.messaging-empty-contact {
display: grid;
justify-items: center;
gap: 10px;
padding-block: 22px 26px;
text-align: center;
}
.messaging-empty-contact .messaging-context-heading {
width: 100%;
margin-bottom: 8px;
text-align: start;
}
.messaging-empty-contact-icon {
display: grid;
width: 62px;
height: 62px;
place-items: center;
border-radius: 21px;
background: var(--messaging-mint);
color: var(--messaging-green);
}
.messaging-empty-contact-icon svg {
width: 29px;
height: 29px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.messaging-empty-contact h2 {
margin: 2px 0 0;
color: var(--messaging-ink);
font-size: 18px;
line-height: 1.2;
letter-spacing: -.025em;
}
.messaging-empty-contact p {
max-width: 27ch;
margin: 0;
color: var(--messaging-muted);
font-size: 12px;
line-height: 1.55;
text-wrap: balance;
}
.messaging-context-skeleton {
display: grid;
gap: 14px;
padding-block: 3px 2px;
}
.messaging-context-skeleton span {
display: block;
height: 12px;
border-radius: 999px;
background: #edf1ef;
}
.messaging-context-skeleton span:nth-child(1) {
width: 48%;
}
.messaging-context-skeleton span:nth-child(2) {
width: 88%;
}
.messaging-context-skeleton span:nth-child(3) {
width: 52%;
}
.messaging-context-skeleton span:nth-child(4) {
width: 82%;
}
.messaging-decision-skeleton {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 12px;
align-items: center;
}
.messaging-decision-skeleton > span {
width: 48px;
height: 48px;
border-radius: 13px;
background: #f0f3f1;
}
.messaging-decision-skeleton > div,
.messaging-control-skeleton > div {
display: grid;
gap: 9px;
}
.messaging-decision-skeleton i,
.messaging-control-skeleton i {
display: block;
height: 10px;
border-radius: 999px;
background: #edf1ef;
}
.messaging-decision-skeleton i:last-child,
.messaging-control-skeleton i:last-child {
width: 62%;
}
.messaging-decision-skeleton > b {
grid-column: 1 / -1;
display: block;
height: 58px;
border-radius: 13px;
background: #f3f5f4;
}
.messaging-control-skeleton {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) 68px;
gap: 12px;
align-items: center;
}
.messaging-control-skeleton > span {
display: grid;
width: 48px;
height: 48px;
place-items: center;
border-radius: 13px;
background: #f0f5f2;
color: var(--messaging-green);
}
.messaging-control-skeleton svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
}
.messaging-control-skeleton > b {
display: block;
height: 38px;
border-radius: 11px;
background: #f0f3f1;
}
.messaging-context-heading {
display: flex;
min-height: 24px;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 17px;
}
.messaging-context-heading strong {
display: block;
color: var(--messaging-ink);
font-size: 14px;
font-weight: 820;
letter-spacing: -.015em;
}
.messaging-context-heading small {
display: block;
margin-top: 2px;
color: var(--messaging-faint);
font-size: 10px;
font-weight: 600;
}
.messaging-contact-person {
gap: 13px;
}
.messaging-avatar-context {
width: 64px;
height: 64px;
flex-basis: 64px;
border-radius: 20px;
}
.messaging-contact-person > div {
min-width: 0;
}
.messaging-contact-person strong {
display: block;
overflow: hidden;
color: var(--messaging-ink);
font-size: 17px;
font-weight: 820;
letter-spacing: -.025em;
text-overflow: ellipsis;
white-space: nowrap;
}
.messaging-contact-person p {
display: -webkit-box;
margin: 3px 0 0;
overflow: hidden;
color: var(--messaging-muted);
font-size: 12px;
line-height: 1.45;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.messaging-contact-facts,
.messaging-career-facts {
display: grid;
gap: 12px;
margin: 18px 0 0;
}
.messaging-contact-facts div,
.messaging-career-facts div {
min-width: 0;
}
.messaging-contact-facts dt,
.messaging-career-facts dt {
margin-bottom: 2px;
color: #8a9690;
font-size: 9.5px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.messaging-contact-facts dd,
.messaging-career-facts dd {
margin: 0;
overflow-wrap: anywhere;
color: #34483e;
font-size: 12px;
font-weight: 650;
line-height: 1.45;
}
.messaging-inline-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
color: var(--messaging-green-dark);
font-size: 11.5px;
font-weight: 800;
text-decoration: none;
}
.messaging-inline-link:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.messaging-inline-link svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.messaging-opportunity-list {
display: grid;
gap: 9px;
}
.messaging-opportunity-list a {
display: grid;
gap: 2px;
padding: 12px 13px;
border-radius: 12px;
background: #f7faf8;
color: inherit;
text-decoration: none;
transition: background-color .18s ease, transform .18s ease;
}
.messaging-opportunity-list a:hover {
background: var(--messaging-mint);
transform: translateY(-1px);
}
.messaging-opportunity-list small {
color: var(--messaging-green);
font-size: 9px;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
.messaging-opportunity-list strong {
overflow: hidden;
color: var(--messaging-ink);
font-size: 12.5px;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.messaging-opportunity-list span {
color: var(--messaging-muted);
font-size: 10.5px;
}
.messaging-context-note {
margin: 12px 0 0;
color: #8a9690;
font-size: 10.5px;
line-height: 1.45;
}
.messaging-decision-summary {
gap: 11px;
margin-bottom: 13px;
}
.messaging-decision-icon {
display: grid;
width: 38px;
height: 38px;
flex: 0 0 38px;
place-items: center;
border-radius: 12px;
background: var(--messaging-mint);
color: var(--messaging-green);
}
.messaging-decision-icon svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
}
.messaging-decision-summary small {
display: block;
color: var(--messaging-green);
font-size: 9px;
font-weight: 820;
letter-spacing: .06em;
text-transform: uppercase;
}
.messaging-decision-summary strong {
display: block;
margin-top: 1px;
color: var(--messaging-ink);
font-size: 13px;
font-weight: 800;
}
.messaging-decision-form {
display: grid;
gap: 9px;
}
.kipdo-inbox-page .messaging-decision-form textarea {
width: 100%;
min-height: 136px;
padding: 12px;
resize: vertical;
border: 1px solid #dce5e0;
border-radius: 12px;
outline: none;
background: #fbfdfc;
color: #2e4338;
font-size: 12px;
line-height: 1.5;
transition: border-color .18s ease, box-shadow .18s ease;
}
.kipdo-inbox-page .messaging-decision-form textarea:focus {
border-color: rgba(8, 122, 72, .48);
box-shadow: 0 0 0 3px rgba(8, 122, 72, .075);
}
.messaging-decision-actions {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
margin-top: 2px;
}
.messaging-decision-actions .button {
min-height: 36px;
padding: 0 11px;
border-radius: 9px;
font-size: 10.5px;
}
.messaging-text-action {
grid-column: 1 / -1;
justify-self: start;
padding: 2px 0;
border: 0;
background: transparent;
color: #9e4f58;
font-size: 10.5px;
font-weight: 750;
}
.messaging-text-action:hover {
color: #74363e;
text-decoration: underline;
text-underline-offset: 3px;
}
.messaging-decision-state {
margin: 0;
padding: 10px 12px;
border-radius: 10px;
background: #f5f8f6;
color: #53645b;
font-size: 11px;
font-weight: 750;
}
.messaging-decision-details {
margin-top: 12px;
}
.messaging-decision-details summary,
.messaging-learned-style summary {
color: var(--messaging-green-dark);
font-size: 11px;
font-weight: 800;
cursor: pointer;
}
.messaging-decision-details ul {
margin: 10px 0 0;
padding-left: 17px;
color: var(--messaging-muted);
font-size: 11px;
line-height: 1.5;
}
.kipdo-inbox-page .messaging-decision-details blockquote {
margin: 8px 0 0;
padding: 8px 10px;
border-left: 2px solid #abd5bd;
background: #f7faf8;
color: #56675e;
font-size: 10.5px;
}
.messaging-no-decision {
align-items: flex-start;
gap: 11px;
}
.messaging-no-decision strong {
display: block;
color: var(--messaging-ink);
font-size: 12.5px;
font-weight: 800;
}
.messaging-no-decision p {
margin: 3px 0 0;
color: var(--messaging-muted);
font-size: 10.5px;
line-height: 1.5;
}
.messaging-safety {
align-items: flex-start;
gap: 11px;
background: linear-gradient(135deg, #f7fcf9, #fff);
}
.messaging-safety > span {
display: grid;
width: 38px;
height: 38px;
flex: 0 0 38px;
place-items: center;
border-radius: 12px;
background: var(--messaging-mint);
color: var(--messaging-green);
}
.messaging-safety svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
}
.messaging-safety strong {
display: block;
color: var(--messaging-ink);
font-size: 12px;
font-weight: 800;
}
.messaging-safety p {
margin: 3px 0 0;
color: var(--messaging-muted);
font-size: 10.5px;
line-height: 1.45;
}
.messaging-learned-style {
padding: 18px 22px 24px;
}
.kipdo-inbox-page .reply-example {
padding: 12px 0;
border-top: 1px solid var(--messaging-line);
}
.kipdo-inbox-page .reply-example:first-of-type {
margin-top: 10px;
}
.kipdo-inbox-page .reply-example p {
margin: 0 0 7px;
color: var(--messaging-muted);
font-size: 10.5px;
line-height: 1.45;
}
.kipdo-inbox-page .reply-example button {
padding: 0;
border: 0;
background: transparent;
color: #9e4f58;
font-size: 10px;
font-weight: 750;
}
.kipdo-inbox-page [hidden] {
display: none !important;
}
.kipdo-inbox-page button:focus-visible,
.kipdo-inbox-page a:focus-visible,
.kipdo-inbox-page input:focus-visible,
.kipdo-inbox-page textarea:focus-visible,
.kipdo-inbox-page summary:focus-visible {
outline: 3px solid rgba(8, 122, 72, .22);
outline-offset: 2px;
}
@keyframes messagingBubbleIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: none;
}
}
@media (max-width: 1320px) {
.kipdo-inbox-page,
.kipdo-inbox-page .kipdo-messaging-workspace {
min-height: auto;
height: auto;
}
.kipdo-inbox-page .kipdo-messaging-workspace {
grid-template-columns: minmax(280px, .75fr) minmax(480px, 1.35fr);
}
.kipdo-inbox-page .messaging-conversations {
min-height: 720px;
}
.kipdo-inbox-page .messaging-thread {
min-height: 720px;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty .messaging-conversations,
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty .messaging-thread {
min-height: 620px;
}
.kipdo-inbox-page .messaging-context {
display: grid;
grid-column: 1 / -1;
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow: visible;
border-top: 1px solid var(--messaging-line);
border-left: 0;
}
.messaging-context-section {
border-right: 1px solid var(--messaging-line);
}
.messaging-context-section:nth-child(3n) {
border-right: 0;
}
.messaging-learned-style {
grid-column: 1 / -1;
}
}
@media (max-width: 920px) {
.page-content:has(.kipdo-inbox-page) {
padding-top: 8px;
}
.kipdo-inbox-page .kipdo-messaging-workspace {
display: block;
}
.kipdo-inbox-page .messaging-conversations {
min-height: 0;
max-height: 430px;
border-right: 0;
border-bottom: 1px solid var(--messaging-line);
}
.kipdo-inbox-page .messaging-thread {
min-height: 680px;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty {
display: grid;
gap: 12px;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty .messaging-conversations {
min-height: 580px;
max-height: none;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty .messaging-thread {
min-height: 620px;
}
.kipdo-inbox-page .messaging-context {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.messaging-context-section:nth-child(3n) {
border-right: 1px solid var(--messaging-line);
}
.messaging-context-section:nth-child(even) {
border-right: 0;
}
}
@media (max-width: 620px) {
.kipdo-inbox-page {
border-radius: 16px;
}
.messaging-list-header {
padding: 20px 17px 16px;
}
.kipdo-inbox-page .messaging-conversation-row {
grid-template-columns: 50px minmax(0, 1fr);
min-height: 92px;
padding: 15px 16px;
}
.messaging-avatar {
width: 50px;
height: 50px;
flex-basis: 50px;
border-radius: 16px;
}
.kipdo-inbox-page .messaging-thread-header {
align-items: flex-start;
flex-direction: column;
padding: 15px 16px;
}
.messaging-thread-actions {
width: 100%;
justify-content: space-between;
}
.messaging-profile-link span {
display: none;
}
.kipdo-inbox-page .messaging-message-stream {
padding: 22px 16px;
}
.kipdo-inbox-page .messaging-message {
max-width: 90%;
}
.kipdo-inbox-page .messaging-message p {
font-size: 13.5px;
}
.messaging-composer-shell {
padding: 12px;
}
.messaging-composer-footer {
align-items: flex-end;
}
.messaging-composer-mode {
max-width: 56%;
}
.messaging-composer-lock {
grid-template-columns: 38px minmax(0, 1fr);
}
.messaging-composer-lock form {
grid-column: 1 / -1;
}
.messaging-takeover-button {
width: 100%;
}
.kipdo-inbox-page .messaging-context {
display: block;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty {
padding: 8px;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty .messaging-conversations {
min-height: 540px;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty .messaging-thread {
min-height: 540px;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty .messaging-no-selection {
padding: 30px 18px;
}
.messaging-no-selection > img {
margin-block: -12px -8px;
}
.kipdo-inbox-page .kipdo-messaging-workspace.is-empty .messaging-no-selection p {
font-size: 14px;
}
.messaging-context-section {
border-right: 0 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.kipdo-inbox-page *,
.kipdo-inbox-page *::before,
.kipdo-inbox-page *::after {
scroll-behavior: auto !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
@media (max-width: 560px) {
.opportunity-command-center {
gap: 12px;
}
.occ-header h2 {
font-size: 30px;
}
.occ-primary,
.occ-queue,
.occ-empty {
padding: 16px;
border-radius: 12px;
}
.occ-opportunity-line h3 {
font-size: 24px;
}
.occ-best-move strong {
font-size: 18px;
}
.occ-best-move p,
.occ-angle p {
font-size: 14px;
}
.occ-primary-action,
.occ-primary-action form,
.occ-primary-action .button {
width: 100%;
}
.occ-primary-action .button {
justify-content: center;
}
.occ-queue-head {
align-items: flex-start;
flex-direction: column;
}
.occ-queue-row {
grid-template-columns: 1fr;
min-height: 68px;
}
.occ-queue-row em {
white-space: normal;
}
.control-linkedin-url {
max-width: calc(100% - 49px);
margin-left: 49px;
}
.onboarding-topbar-meta a {
min-height: 36px;
padding: 0 12px;
line-height: 34px;
}
.onboarding-shell {
width: calc(100% - 24px);
padding-top: 26px;
}
.onboarding-hero h1 {
font-size: 32px;
}
.onboarding-progress {
margin-inline: -2px;
border-radius: 14px;
}
.onboarding-card {
padding: 24px 18px;
}
.onboarding-head h2 {
font-size: 28px;
}
.page-content { padding: 20px 14px 45px; }
.topbar { min-height: 70px; padding: 10px 14px; }
.topbar h1 { font-size: 18px; white-space: nowrap; }
.topbar-subtitle { display: none; }
.topbar-actions .button { min-width: 92px; padding: 0 10px; white-space: nowrap; }
.setup-banner { align-items: start; flex-direction: column; }
.leads-command-card {
padding: 18px;
}
.leads-command-copy {
gap: 12px;
}
.leads-command-search {
grid-template-columns: 1fr;
align-items: stretch;
width: 100%;
}
.leads-command-search .button {
width: 100%;
justify-content: center;
}
.command-grid { gap: 14px; }
.control-center-card { grid-template-columns: 1fr; min-height: 0; }
.control-copy { padding: 28px 22px; --control-header-gap: 26px; --control-stack-gap: 20px; }
.control-copy h2 {
font-size: 24px;
line-height: 1.12;
white-space: normal;
}
.control-copy p:not(.control-eyebrow):not(.control-greeting) { font-size: 14px; }
.control-pills { margin-top: var(--control-stack-gap); }
.control-actions { flex-direction: column; margin-top: var(--control-stack-gap); }
.control-actions .button { width: 100%; }
.control-visual { display: none; }
.control-visual::before { width: 210px; height: 210px; box-shadow: 0 0 0 28px rgba(99,217,142,.05); }
.control-visual::after { width: 120px; height: 120px; }
.control-visual img { width: 190px; height: 190px; }
.orbit-label { display: none; }
.control-state { top: 18px; right: 18px; }
.live-feed-card, .insight-card { padding: 18px; }
.live-feed-item {
grid-template-columns: 42px minmax(0, 1fr);
gap: 12px;
min-height: 0;
padding: 12px;
}
.live-feed-icon {
width: 42px;
height: 42px;
border-radius: 12px;
}
.live-feed-item time {
grid-column: 2;
justify-self: start;
padding-left: 0;
}
.summary-strip { grid-template-columns: 1fr; }
.summary-status,
.summary-metric,
.summary-metric:nth-child(2),
.summary-metric:nth-child(3),
.summary-metric:nth-child(6) {
min-height: 70px;
padding: 12px 18px;
border-top: 1px solid #e8eee9;
border-right: 0;
}
.summary-status { border-top: 0; }
.engine-strip { grid-template-columns: 1fr; }
.engine-status-cell,
.engine-metric,
.engine-metric:nth-child(3),
.engine-metric:nth-child(6) {
min-height: 78px;
padding: 14px 18px;
border-top: 1px solid #e8eee9;
border-right: 0;
}
.engine-status-cell { border-top: 0; }
.compact-stats .stats-cells { grid-template-columns: 1fr; }
.compact-stats .stat-cell,
.compact-stats .stat-cell:nth-child(2n),
.compact-stats .stat-cell:nth-child(3) {
min-height: 92px;
padding: 14px 0;
border-top: 1px solid #e8eee9;
border-right: 0;
}
.compact-stats .stat-cell:first-child { border-top: 0; }
.pulse-body, .campaign-stats { grid-template-columns: 1fr 1fr; }
.funnel-board { grid-template-columns: minmax(105px, .85fr) minmax(110px, 1fr) minmax(48px, .45fr); gap: 10px; }
.funnel-labels, .funnel-values { grid-template-rows: repeat(4, 34px); }
.funnel-shape i { height: 30px; }
.funnel-positive { grid-template-columns: minmax(105px, .85fr) minmax(110px, 1fr) minmax(48px, .45fr); gap: 10px; }
.funnel-positive i { height: 36px; }
.attention-banner, .action-card { align-items: start; grid-template-columns: auto 1fr; flex-direction: column; }
.attention-banner b { grid-column: 2; }
.workspace-card { display: block; min-height: 0; padding: 20px; }
.workspace-card-media {
float: left;
width: 64px;
height: 64px;
margin: 0 14px 8px 0;
}
.workspace-card-media img { width: 48px; height: 48px; }
.workspace-card-head { align-items: center; flex-direction: row; }
.workspace-card h2 { font-size: 25px; white-space: normal; }
.workspace-card-copy > p { min-height: 0; }
.engine-steps,
.workspace-actions { clear: both; }
.workspace-actions { align-items: stretch; flex-direction: column; }
.workspace-actions .button { width: 100%; min-height: 42px; }
.stats-strip { padding: 16px 18px; }
.stats-campaign { grid-template-columns: 1fr; gap: 3px; }
.stats-cells { grid-template-columns: 1fr; padding-top: 8px; }
.stat-cell,
.stat-cell:nth-child(2n),
.stat-cell:nth-child(3) {
min-height: 108px;
padding: 16px 0;
border-top: 1px solid #e8eee9;
border-right: 0;
}
.stat-cell:first-child { border-top: 0; }
.stat-icon { width: 34px; height: 34px; margin-bottom: 8px; font-size: 16px; }
.stat-cell strong { font-size: 25px; }
.home-workbench .panel { max-height: none; }
.home-workbench .simple-list,
.home-workbench .people-list,
.home-workbench .event-feed { max-height: 320px; }
.home-progress { grid-template-columns: 1fr; }
.home-progress > div,
.home-progress > div:nth-child(2n) {
min-height: 78px;
border-top: 1px solid #e8eee9;
border-right: 0;
}
.home-progress > div:first-child { border-top: 0; }
.home-hero { padding: 18px; border-radius: 15px; }
.home-hero h2 { font-size: 29px; }
.home-hero-copy > p:not(.home-hero-eyebrow) { font-size: 14px; }
.home-hero-actions { align-items: stretch; flex-direction: column; }
.home-hero-actions .button { width: 100%; min-height: 42px; }
.home-agent-panel { padding: 12px; }
.campaign-redesign,
.campaign-editor-layout,
.campaign-editor-main {
gap: 14px;
}
.campaign-page-intro h2 {
display: block;
font-size: 31px;
}
.campaign-page-intro {
flex-direction: column;
align-items: stretch;
}
.campaign-page-intro .badge {
margin-left: 8px;
vertical-align: middle;
}
.campaign-page-intro p {
font-size: 15px;
}
.campaign-switch-actions {
width: 100%;
justify-content: stretch;
}
.campaign-switch-actions form,
.campaign-switch-actions .button {
width: 100%;
}
.campaign-summary-card,
.campaign-brief-card,
.campaign-tone-card,
.campaign-settings-card,
.campaign-discovery-card,
.campaign-advice .tip-card,
.campaign-save-bar {
border-radius: 15px;
}
.campaign-summary-card {
padding: 18px;
}
.campaign-name-display {
grid-template-columns: minmax(0, 1fr) 32px;
}
.campaign-name-display strong {
font-size: 24px;
}
.campaign-summary-metrics {
grid-template-columns: 1fr;
}
.campaign-summary-metrics div,
.campaign-summary-metrics div:nth-child(odd) {
min-height: 66px;
border-top: 1px solid var(--line);
border-left: 0;
}
.campaign-summary-metrics div:first-child {
border-top: 0;
}
.campaign-brief-column {
padding: 20px;
}
.campaign-brief-column .campaign-card-copy {
min-height: auto;
-webkit-line-clamp: 6;
}
.campaign-tone-card,
.campaign-settings-card,
.campaign-discovery-card {
padding: 20px;
}
.campaign-recommendation .brief-example div {
grid-template-columns: 34px minmax(0, 1fr);
}
.campaign-drawer-panel {
width: 100vw;
}
.campaign-drawer-panel header,
.campaign-drawer-body {
padding-right: 20px;
padding-left: 20px;
}
.metric-grid { grid-template-columns: 1fr 1fr; }
.queue-detail-grid { grid-template-columns: 1fr; }
.activity-task { grid-template-columns: auto minmax(0, 1fr) auto; }
.activity-task > small { grid-column: 2 / -1; text-align: left; }
.schedule-item { grid-template-columns: auto minmax(0, 1fr); }
.schedule-item em { grid-column: 2; text-align: left; }
.metric-card { min-height: 120px; padding: 16px; }
.metric-card strong { font-size: 28px; }
.dashboard-grid { grid-template-columns: 1fr; }
.search-form { flex-wrap: wrap; }
.search-form input { flex-basis: 100%; }
.search-form select { flex: 1; }
.toolbar { align-items: start; flex-direction: column; }
.auth-layout { grid-template-columns: 1fr; }
.auth-story { display: none; }
.auth-card { padding: 28px 22px; }
.settings-nav {
display: flex;
flex-wrap: nowrap;
}
.settings-grid,
.settings-limits-grid { grid-template-columns: 1fr; }
.settings-card-head { gap: 13px; }
.settings-card-icon {
width: 38px;
height: 38px;
flex-basis: 38px;
}
.settings-card-head .eyebrow { margin-bottom: 14px; }
.toast-stack { right: 12px; left: 12px; }
.form-card { padding: 22px 18px; }
}
.career-library-page { display: grid; gap: 22px; }
.career-library-command-card {
--page-header-orb: rgba(42, 153, 194, .16);
--page-header-start: #edf9ff;
--page-header-end: #f3faf6;
--page-header-shadow: rgba(42, 153, 194, .08);
}
.career-library-campaign-link {
min-height: 48px;
border-color: rgba(9, 101, 64, .18);
background: rgba(255, 255, 255, .86);
color: var(--ink);
box-shadow: none;
}
.career-library-campaign-link:hover {
border-color: rgba(9, 101, 64, .32);
background: #fff;
color: var(--brand);
}
.career-resume-card,
.career-projects-heading,
.career-project-card {
background: #f6f9f7;
border-radius: 12px;
border: none;
}
.career-resume-card,
.career-projects-heading {
padding: 20px 22px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
}
.career-resume-card p,
.career-projects-heading p { margin: 5px 0 0; color: var(--muted); }
.career-resume-card form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.career-file-picker {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 46px;
padding: 0 16px;
border: 1px solid #d7ded9;
border-radius: 12px;
background: #fff;
color: var(--ink);
font-weight: 800;
cursor: pointer;
transition: border-color .15s;
}
.career-file-picker:hover {
border-color: #b9d4c4;
}
.career-file-picker input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.career-file-picker-label {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-file-name {
font-size: 13px;
color: var(--muted);
}
.career-build-draft:disabled {
opacity: .5;
cursor: not-allowed;
}
.career-library-form { display: grid; gap: 20px; }
.career-profile-fields,
.career-project-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.career-library-form .form-field {
display: grid;
gap: 7px;
align-content: start;
}
.career-library-form .form-field label {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 750;
}
.field-icon {
width: 15px;
height: 15px;
flex-shrink: 0;
fill: none;
stroke: var(--green);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.career-library-form .form-field small,
.career-advanced summary small {
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
.career-library-form .form-field input[type="checkbox"].field-control {
width: 18px;
min-height: 18px;
margin: 0;
accent-color: var(--green);
}
.career-library-form .form-field-checkbox {
display: flex;
align-items: center;
gap: 9px;
min-height: 45px;
}
.career-library-form .form-field-checkbox label {
order: 2;
}
.career-profile-fields {
padding: 22px;
border: 1px solid var(--line);
background: var(--surface);
border-radius: 18px;
}
.career-profile-primary .career-field-summary,
.career-profile-primary .career-field-how_help,
.career-field-audience,
.career-field-problem,
.career-field-solution,
.career-field-features,
.career-field-challenges,
.career-field-lessons,
.career-field-proof,
.career-field-summary,
.career-field-how_help,
.career-field-description { grid-column: 1 / -1; }
.career-profile-secondary {
padding: 16px 17px;
border: 0;
}
.career-advanced {
border: 1px solid var(--line);
border-radius: 16px;
background: #fbfcfb;
}
.career-advanced summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 15px 17px;
cursor: pointer;
list-style: none;
}
.career-advanced summary::-webkit-details-marker { display: none; }
.career-advanced summary span {
color: var(--ink);
font-weight: 850;
}
.career-advanced summary::after {
content: "+";
display: grid;
width: 28px;
height: 28px;
flex: 0 0 28px;
place-items: center;
border-radius: 999px;
background: #edf6ee;
color: var(--green-dark);
font-weight: 900;
}
.career-advanced[open] summary {
border-bottom: 1px solid var(--line);
}
.career-advanced[open] summary::after { content: "-"; }
.career-project-advanced {
margin-top: 16px;
border-radius: 14px;
background: #fff;
}
.career-project-advanced .career-project-grid {
padding: 16px;
}
.career-projects-heading h3 { margin: 3px 0 0; }
.career-projects-heading p {
max-width: 760px;
}
.career-add-project {
display: inline-flex;
min-height: 38px;
align-items: center;
gap: 7px;
flex: 0 0 auto;
margin-top: 1px;
padding: 0 12px;
border: 1px solid #d7ded9;
border-radius: 999px;
background: #f5faf6;
color: var(--ink);
font-size: 13px;
font-weight: 850;
white-space: nowrap;
}
.career-add-project svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.career-add-project:hover {
border-color: #b9d4c4;
background: #eef6f0;
}
.career-projects-heading span,
.career-project-card header span {
color: var(--muted);
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
}
#career-project-list { display: grid; gap: 10px; }
.career-project-empty-state {
padding: 18px 20px;
border: 1px dashed #cfdbd3;
border-radius: 16px;
background: #fbfcfb;
}
.career-project-empty-state strong {
color: var(--ink);
}
.career-project-empty-state p {
margin: 5px 0 0;
color: var(--muted);
}
.career-project-card {
padding: 0;
overflow: hidden;
transition: background 0.15s;
}
.career-project-card:hover {
background: #eff4f0;
}
.career-project-details > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
cursor: pointer;
list-style: none;
}
.career-project-details > summary::-webkit-details-marker { display: none; }
.career-project-summary-copy {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
}
.career-project-summary-copy strong {
color: var(--ink);
font-size: 15px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.career-project-kicker {
display: inline-block;
padding: 2px 8px;
border-radius: 6px;
background: #e4ede6;
color: var(--green-dark);
font-size: 10px;
font-weight: 800;
letter-spacing: .06em;
white-space: nowrap;
flex-shrink: 0;
}
.career-project-summary-actions {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.career-edit-chip {
display: inline-flex;
min-height: 28px;
align-items: center;
padding: 0 10px;
border-radius: 8px;
background: transparent;
color: var(--muted);
font-size: 12px;
font-weight: 600;
transition: color 0.15s;
}
.career-project-details[open] > summary {
border-bottom: 1px solid #e2e8e3;
}
.career-project-details > .career-project-grid,
.career-project-details > .career-project-advanced {
margin: 18px 20px;
}
.career-project-card header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.career-project-card header strong {
display: block;
margin-top: 3px;
font-size: 18px;
}
.career-project-delete {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 28px;
padding: 0 8px;
border: none;
border-radius: 8px;
background: transparent;
color: var(--danger);
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.career-project-delete-control { display: none; }
.career-project-delete svg,
.career-remove-new svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.career-remove-new {
display: grid;
width: 36px;
height: 36px;
flex: 0 0 36px;
place-items: center;
border: 1px solid #f0d2cf;
border-radius: 999px;
background: #fff8f7;
color: var(--danger);
}
.career-remove-new:hover {
border-color: #e4a9a4;
background: #fdeeed;
color: #943c3c;
}
.career-project-add-row {
display: flex;
}
.is-hidden { display: none !important; }
/* Resume processing overlay */
.resume-processing-overlay {
position: fixed;
inset: 0;
z-index: 900;
display: grid;
place-items: center;
background: rgba(20, 35, 28, .35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: overlay-in .25s ease-out;
}
@keyframes overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
.resume-processing-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 340px;
padding: 36px 32px 30px;
border-radius: 20px;
background: #fff;
box-shadow: 0 24px 64px rgba(20, 35, 28, .18);
text-align: center;
animation: card-in .3s ease-out;
}
@keyframes card-in {
from { opacity: 0; transform: translateY(12px) scale(.97); }
to { opacity: 1; transform: none; }
}
.resume-processing-card strong {
font-size: 16px;
color: var(--ink);
}
.resume-processing-card p {
margin: 0;
color: var(--muted);
font-size: 13px;
}
.resume-processing-spinner {
width: 36px;
height: 36px;
border: 3px solid var(--line);
border-top-color: var(--green);
border-radius: 50%;
animation: spin .8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.resume-processing-bar {
width: 100%;
height: 5px;
margin-top: 4px;
border-radius: 999px;
background: var(--line);
overflow: hidden;
}
.resume-processing-fill {
width: 0;
height: 100%;
border-radius: 999px;
background: var(--green);
}
.campaign-resume-processing-overlay .resume-processing-fill {
width: 34%;
animation: resume-progress-indeterminate 1.25s ease-in-out infinite;
}
@keyframes resume-progress-indeterminate {
0% { transform: translateX(-115%); }
50% { transform: translateX(95%); }
100% { transform: translateX(295%); }
}
.resume-processing-timer {
color: var(--muted);
font-size: 12px;
}
/* ── Profile Intelligence panel ────────────────────────────── */
.pi-container {
margin: 24px 0 8px;
border: 1px solid var(--line);
border-radius: 14px;
background: #fcfdfc;
overflow: hidden;
}
.pi-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 48px 24px;
text-align: center;
}
.pi-loading strong { font-size: 15px; }
.pi-loading p { color: var(--muted); font-size: 13px; margin: 0; }
.pi-loading-spinner {
width: 32px; height: 32px;
border: 3px solid var(--line);
border-top-color: var(--green);
border-radius: 50%;
animation: pi-spin 0.8s linear infinite;
}
@keyframes pi-spin { to { transform: rotate(360deg); } }
.pi-result { padding: 28px; }
.pi-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.pi-header svg { color: var(--green); flex-shrink: 0; }
.pi-header h3 { margin: 0; font-size: 16px; font-weight: 700; }
.pi-profile-summary {
padding: 18px 20px;
margin-bottom: 20px;
border-radius: 10px;
background: #10291f;
color: #fff;
}
.pi-summary-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 4px;
}
.pi-summary-meta {
font-size: 13px;
color: rgba(255,255,255,0.7);
margin-bottom: 12px;
}
.pi-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pi-tag {
display: inline-block;
padding: 3px 10px;
border-radius: 6px;
background: rgba(255,255,255,0.15);
font-size: 12px;
font-weight: 500;
color: #e2e8e3;
}
.pi-sections {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 20px;
}
.pi-section {
padding: 16px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
animation: pi-fade-up 0.4s ease both;
}
@keyframes pi-fade-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.pi-section-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.pi-section-head svg { width: 16px; height: 16px; color: var(--green); }
.pi-section-head strong { font-size: 13px; font-weight: 600; }
.pi-section ul {
margin: 0; padding: 0;
list-style: none;
}
.pi-section li {
position: relative;
padding: 5px 0 5px 16px;
font-size: 13px;
line-height: 1.5;
color: var(--text);
}
.pi-section li::before {
content: "";
position: absolute;
left: 0; top: 12px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--green);
opacity: 0.5;
}
.pi-readiness {
display: flex;
align-items: center;
gap: 20px;
padding: 18px 20px;
border-radius: 10px;
background: #f4f7f4;
}
.pi-readiness-gauge { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.pi-gauge-svg { width: 100%; height: 100%; }
.pi-gauge-value {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 700;
color: #10291f;
}
.pi-readiness-text strong { font-size: 14px; display: block; margin-bottom: 4px; }
.pi-readiness-text p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
@media (max-width: 760px) {
.pi-sections { grid-template-columns: 1fr; }
.pi-result { padding: 20px 16px; }
.pi-readiness { flex-direction: column; text-align: center; }
}
/* Goal-first onboarding: choose intent before exposing profile or campaign fields. */
.onboarding-goal-first {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #e3e9e5;
}
.onboarding-goal-first .market-panel-head {
margin-bottom: 18px;
}
.onboarding-goal-save-error {
margin: 10px 0 0;
color: #9a3838;
font-size: 12px;
font-weight: 700;
}
.onboarding-profile-choice {
align-items: stretch;
margin-bottom: 16px;
padding: 20px;
border-color: #cfe0d6;
border-radius: 14px;
background: #f5faf7;
}
.onboarding-profile-choice-main {
min-width: 0;
}
.onboarding-profile-choice-main > strong {
margin: 7px 0 5px;
color: #152a22;
font-size: 16px;
line-height: 1.35;
}
.onboarding-profile-choice-main > p {
max-width: 680px;
}
.onboarding-profile-ready {
display: inline-flex;
gap: 7px;
align-items: center;
color: #187653;
font-size: 9.5px;
font-weight: 900;
letter-spacing: .1em;
}
.onboarding-profile-ready i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #1d8b61;
box-shadow: 0 0 0 4px rgba(29, 139, 97, .1);
}
.onboarding-profile-proof {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 12px;
}
.onboarding-profile-proof span {
padding: 5px 8px;
border: 1px solid #d9e6de;
border-radius: 999px;
background: #fff;
color: #51645b;
font-size: 10px;
font-weight: 750;
}
.onboarding-profile-proof span:first-child {
border-color: #bcd8c8;
color: #176847;
}
.onboarding-profile-choice-actions {
flex-direction: column;
justify-content: center;
min-width: 220px;
}
.onboarding-profile-choice-actions form,
.onboarding-profile-choice-actions .button {
width: 100%;
}
[data-goal-conditional][hidden] {
display: none !important;
}
.onboarding-goal-next {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 14px;
align-items: start;
margin: 0 0 18px;
padding: 15px 17px;
border: 1px solid #dbe6df;
border-radius: 13px;
background: #fbfcfb;
}
.onboarding-goal-next-mark {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 10px;
background: #e8f4ed;
color: #176d4b;
font-size: 10px;
font-weight: 900;
letter-spacing: .08em;
}
.onboarding-goal-next strong {
display: block;
color: #1d3028;
font-size: 12.5px;
line-height: 1.4;
}
.onboarding-goal-next ul {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
margin: 7px 0 0;
padding: 0;
color: #607169;
font-size: 10.5px;
line-height: 1.45;
list-style: none;
}
.onboarding-goal-next li::before {
margin-right: 6px;
color: #1f8a62;
content: "\2713";
font-weight: 900;
}
.onboarding-profile-reset {
width: 100%;
padding: 4px 8px;
border: 0;
background: transparent;
color: #738179;
font: inherit;
font-size: 10.5px;
font-weight: 700;
cursor: pointer;
}
.onboarding-profile-reset:hover,
.onboarding-profile-reset:focus-visible {
color: #9a3838;
text-decoration: underline;
}
.onboarding-profile-editor {
margin-top: 18px;
border: 1px solid #dbe4de;
border-radius: 14px;
background: #fff;
overflow: hidden;
}
.onboarding-profile-editor > summary {
display: grid;
grid-template-columns: minmax(0, 1fr) 22px;
gap: 14px;
align-items: center;
padding: 17px 19px;
color: #203229;
cursor: pointer;
list-style: none;
}
.onboarding-profile-editor > summary::-webkit-details-marker { display: none; }
.onboarding-profile-editor > summary:hover { background: #f7faf8; }
.onboarding-profile-editor > summary:focus-visible {
outline: 2px solid #21815f;
outline-offset: -3px;
}
.onboarding-profile-editor > summary strong,
.onboarding-profile-editor > summary small { display: block; }
.onboarding-profile-editor > summary strong { font-size: 13px; }
.onboarding-profile-editor > summary small {
margin-top: 4px;
color: #68776f;
font-size: 11px;
line-height: 1.45;
}
.onboarding-profile-editor > summary svg {
width: 18px;
height: 18px;
fill: none;
stroke: #50665b;
stroke-width: 2;
transition: transform .2s ease;
}
.onboarding-profile-editor[open] > summary svg { transform: rotate(180deg); }
.onboarding-profile-editor > .career-library-form {
padding: 20px;
border-top: 1px solid #e3e9e5;
}
/* The selected goal remains visible as context, but is no longer asked twice. */
.onboarding-goal-context {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
gap: 11px;
align-items: center;
margin-bottom: 17px;
padding: 11px 13px;
border: 1px solid #d8e4dc;
border-radius: 12px;
background: #f7faf8;
}
.onboarding-goal-context-icon {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 10px;
background: #e4f1e9;
color: #176d4b;
}
.onboarding-goal-context-icon svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.onboarding-goal-context small,
.onboarding-goal-context strong { display: block; }
.onboarding-goal-context small {
color: #718078;
font-size: 9px;
font-weight: 850;
letter-spacing: .09em;
}
.onboarding-goal-context strong {
margin-top: 2px;
color: #1b3027;
font-size: 12.5px;
}
.onboarding-goal-context a {
color: #176d4b;
font-size: 11px;
font-weight: 800;
}
/* AI studio: flat, technical, and quiet until generation starts. */
.onboarding-ai-builder {
margin: 0 0 18px;
border: 1px solid #cbdcd2;
border-radius: 16px;
background: #fff;
box-shadow: 0 12px 34px rgba(18, 51, 39, .07);
}
.onboarding-ai-builder > summary {
padding: 18px;
background: #15382d;
}
.onboarding-ai-builder > summary:hover { background: #194233; }
.onboarding-ai-builder > summary small { color: #8dd4b5; }
.onboarding-ai-builder > summary strong { color: #fff; font-size: 15px; }
.onboarding-ai-builder > summary span span { color: #c5d9cf; }
.onboarding-ai-builder .onboarding-ai-mark {
background: #e8f4ed;
color: #176d4b;
}
.onboarding-ai-builder .onboarding-ai-chevron { stroke: #b8d2c5; }
.onboarding-ai-body {
padding: 20px;
border-top: 0;
background: #fbfdfc;
}
.onboarding-ai-field > label {
color: #1c3027;
font-size: 13px;
}
.onboarding-ai-field textarea {
min-height: 122px;
padding: 15px 16px;
border-radius: 11px;
background: #fff;
box-shadow: inset 0 0 0 1px #c5d5cc;
font-size: 13px;
}
.onboarding-ai-field > small { font-size: 11px; }
.onboarding-ai-used-state {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 14px;
align-items: start;
padding: 4px 2px 2px;
}
.onboarding-ai-used-check {
display: grid;
width: 40px;
height: 40px;
place-items: center;
border-radius: 50%;
background: #e5f5ec;
color: #14764f;
}
.onboarding-ai-used-check svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.2;
}
.onboarding-ai-used-kicker {
display: block;
margin-bottom: 4px;
color: #177450;
font-size: 9px;
font-weight: 900;
letter-spacing: .1em;
}
.onboarding-ai-used-state h4 {
margin: 0;
color: #172d24;
font-size: 15px;
line-height: 1.35;
}
.onboarding-ai-used-state p {
max-width: 670px;
margin: 6px 0 0;
color: #607169;
font-size: 11.5px;
line-height: 1.55;
}
.onboarding-ai-used-state ul {
display: grid;
gap: 5px;
margin: 11px 0 0;
padding-left: 18px;
color: #43564d;
font-size: 11px;
}
.onboarding-ai-used-state .button {
margin-top: 14px;
}
.onboarding-ai-progress {
display: grid;
grid-template-columns: 170px minmax(0, 1fr);
gap: 20px;
align-items: center;
margin-top: 18px;
padding: 18px;
border: 0;
border-radius: 13px;
background: #10271f;
color: #c7d9d0;
overflow: hidden;
}
.onboarding-ai-progress[hidden] { display: none; }
.onboarding-ai-scene {
position: relative;
width: 150px;
height: 126px;
border: 1px solid rgba(146, 203, 177, .17);
border-radius: 12px;
background: #0b2119;
overflow: hidden;
}
.onboarding-ai-progress .onboarding-ai-scene > span {
position: absolute;
display: block;
}
.onboarding-ai-orbit {
top: 50%;
left: 50%;
border: 1px solid rgba(119, 208, 168, .32);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.onboarding-ai-orbit.orbit-one { width: 98px; height: 52px; }
.onboarding-ai-orbit.orbit-two { width: 56px; height: 96px; }
.onboarding-ai-orbit > i {
position: absolute;
top: -3px;
left: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: #7bd9af;
box-shadow: 0 0 10px rgba(123, 217, 175, .75);
}
.onboarding-ai-core {
top: 50%;
left: 50%;
display: grid !important;
width: 44px;
height: 44px;
place-items: center;
border: 1px solid #73c7a1;
border-radius: 50%;
background: #173f31;
color: #e9fff5;
transform: translate(-50%, -50%);
}
.onboarding-ai-core b {
font-size: 11px;
letter-spacing: .08em;
}
.onboarding-ai-core > i {
position: absolute;
inset: -7px;
border: 1px solid rgba(115, 199, 161, .25);
border-radius: 50%;
}
.onboarding-ai-scan {
top: 0;
right: 8px;
left: 8px;
height: 1px;
background: rgba(132, 225, 183, .7);
box-shadow: 0 0 8px rgba(132, 225, 183, .55);
}
.onboarding-ai-progress ol {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.onboarding-ai-progress li {
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
gap: 9px;
align-items: center;
color: #789187;
font-size: 11px;
font-weight: 700;
transition: color .2s ease, opacity .2s ease;
}
.onboarding-ai-progress li > i {
position: relative;
width: 14px;
height: 14px;
border: 1px solid #3d5a4e;
border-radius: 50%;
background: transparent;
animation: none;
}
.onboarding-ai-progress li > span { display: block; }
.onboarding-ai-progress li.is-active { color: #effaf5; }
.onboarding-ai-progress li.is-active > i {
border-color: #78d3aa;
box-shadow: 0 0 0 4px rgba(120, 211, 170, .08);
}
.onboarding-ai-progress li.is-active > i::after {
position: absolute;
inset: 3px;
border-radius: 50%;
background: #78d3aa;
content: "";
}
.onboarding-ai-progress li.is-complete { color: #9fc6b4; }
.onboarding-ai-progress li.is-complete > i {
border-color: #4ea47c;
background: #4ea47c;
}
.onboarding-ai-progress li.is-complete > i::after {
position: absolute;
top: 3px;
left: 3px;
width: 6px;
height: 3px;
border-bottom: 1.5px solid #fff;
border-left: 1.5px solid #fff;
content: "";
transform: rotate(-45deg);
}
.onboarding-ai-progress:not([hidden]) .orbit-one { animation: onboarding-ai-orbit-one 3.2s linear infinite; }
.onboarding-ai-progress:not([hidden]) .orbit-two { animation: onboarding-ai-orbit-two 4.2s linear infinite reverse; }
.onboarding-ai-progress:not([hidden]) .onboarding-ai-core > i { animation: onboarding-ai-core-ring 1.6s ease-in-out infinite; }
.onboarding-ai-progress:not([hidden]) .onboarding-ai-scan { animation: onboarding-ai-scan 2s ease-in-out infinite; }
@keyframes onboarding-ai-orbit-one {
from { transform: translate(-50%, -50%) rotate(0); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes onboarding-ai-orbit-two {
from { transform: translate(-50%, -50%) rotate(0); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes onboarding-ai-core-ring {
0%, 100% { opacity: .3; transform: scale(.92); }
50% { opacity: .9; transform: scale(1.08); }
}
@keyframes onboarding-ai-scan {
0%, 100% { opacity: 0; transform: translateY(8px); }
20%, 80% { opacity: 1; }
50% { transform: translateY(108px); }
}
.onboarding-ai-result:not([hidden]) { animation: onboarding-ai-result-in .28s ease both; }
@keyframes onboarding-ai-result-in {
from { opacity: 0; transform: translateY(7px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.onboarding-ai-progress:not([hidden]) .orbit-one,
.onboarding-ai-progress:not([hidden]) .orbit-two,
.onboarding-ai-progress:not([hidden]) .onboarding-ai-core > i,
.onboarding-ai-progress:not([hidden]) .onboarding-ai-scan,
.onboarding-ai-result:not([hidden]) { animation: none; }
.onboarding-profile-editor > summary svg { transition: none; }
}
@media (max-width: 760px) {
.onboarding-profile-choice { flex-direction: column; }
.onboarding-profile-choice-actions { min-width: 0; }
.onboarding-goal-next ul { display: grid; }
.onboarding-profile-editor > .career-library-form { padding: 15px; }
.onboarding-ai-progress {
grid-template-columns: 1fr;
}
.onboarding-ai-scene {
width: 100%;
height: 112px;
}
}
@media (max-width: 760px) {
.career-resume-card,
.career-projects-heading,
.career-resume-card form,
.onboarding-import form {
align-items: stretch;
flex-direction: column;
}
.career-add-project {
justify-content: center;
width: 100%;
}
.career-file-picker { justify-content: center; width: 100%; }
.career-profile-fields,
.career-project-grid { grid-template-columns: 1fr; }
.career-profile-fields .form-field,
.career-project-grid .form-field { grid-column: 1; }
.career-project-card { padding: 0; }
}
/* ── History page ──────────────────────────────────────────── */
.history-page { max-width: 960px; }
/* Hero — matches .control-center-card from dashboard */
.history-hero {
position: relative;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
padding: 36px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
background: #07100f;
color: #fff;
box-shadow: 0 22px 60px rgba(7,16,15,.16);
margin-bottom: 18px;
}
.history-hero-copy { position: relative; z-index: 1; }
.history-hero-eyebrow {
margin: 0 0 16px;
color: #63d98e;
font-size: 11px;
font-weight: 900;
letter-spacing: .16em;
text-transform: uppercase;
display: inline-flex;
gap: 7px;
align-items: center;
}
.history-hero-eyebrow span {
display: grid;
width: 14px;
height: 14px;
place-items: center;
}
.history-hero-eyebrow svg { stroke: #63d98e; fill: none; stroke-width: 2; }
.history-hero h2 {
margin: 0 0 8px;
color: #fff;
font-size: clamp(28px, 2.4vw, 35px);
line-height: 1.08;
letter-spacing: -.04em;
}
.history-hero-copy > p:not(.history-hero-eyebrow) {
margin: 0;
color: #c8d3ce;
font-size: 15px;
line-height: 1.55;
}
.history-hero-counters {
position: relative;
z-index: 1;
display: flex;
gap: 12px;
flex-shrink: 0;
}
.history-hero-counters div {
text-align: center;
min-width: 80px;
padding: 14px 18px;
border-radius: 14px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.08);
}
.history-hero-counters strong {
display: block;
font-size: 24px;
letter-spacing: -.02em;
line-height: 1.15;
color: #fff;
}
.history-hero-counters span {
font-size: 9.5px;
font-weight: 700;
color: rgba(255,255,255,.45);
text-transform: uppercase;
letter-spacing: .05em;
}
/* Campaign rows */
.history-list {
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
overflow: hidden;
box-shadow: 0 7px 24px rgba(28,55,42,.035);
}
.history-item {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 16px;
padding: 18px 22px;
border-bottom: 1px solid var(--line);
text-decoration: none;
color: inherit;
transition: background .12s;
}
.history-item:last-child { border-bottom: none; }
.history-item:hover { background: #f7faf6; }
.history-item-badge { flex-shrink: 0; }
.history-item-body { min-width: 0; }
.history-item-body strong {
display: block;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.history-item-body p {
margin: 3px 0 0;
color: var(--muted);
font-size: 12.5px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.history-item-stats {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.history-item-stats div {
min-width: 56px;
padding: 6px 10px;
text-align: center;
border-radius: 10px;
background: var(--canvas);
}
.history-item-stats strong {
display: block;
font-size: 15px;
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.2;
}
.history-item-stats span {
font-size: 9.5px;
font-weight: 650;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.history-item-go {
width: 18px;
height: 18px;
stroke: var(--muted);
fill: none;
stroke-width: 2;
flex-shrink: 0;
transition: stroke .12s, transform .12s;
}
.history-item:hover .history-item-go {
stroke: var(--green);
transform: translateX(2px);
}
/* Drawer details */
.history-drawer-status { margin-bottom: 4px; }
.history-drawer-metrics {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 8px;
}
.history-drawer-metrics div {
text-align: center;
padding: 12px 6px;
border-radius: 12px;
background: var(--canvas);
border: 1px solid var(--line);
}
.history-drawer-metrics strong {
display: block;
font-size: 18px;
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.2;
}
.history-drawer-metrics span {
font-size: 9.5px;
font-weight: 650;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.history-drawer-text {
padding: 14px 16px;
border-radius: 12px;
background: var(--canvas);
border: 1px solid var(--line);
font-size: 13.5px;
line-height: 1.6;
color: var(--ink);
white-space: pre-line;
}
/* Restart confirmation */
.history-restart-confirm { margin-top: 4px; }
.history-restart-trigger {
display: inline-flex;
gap: 6px;
align-items: center;
color: var(--green);
font-size: 13px;
font-weight: 600;
cursor: pointer;
list-style: none;
}
.history-restart-trigger::-webkit-details-marker { display: none; }
.history-restart-trigger svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.history-restart-trigger:hover { text-decoration: underline; }
.history-restart-body {
margin-top: 12px;
padding: 16px;
border-radius: 12px;
background: #f4f8f5;
border: 1px solid #d6e6db;
}
.history-restart-body p {
margin: 0 0 10px;
font-size: 13px;
line-height: 1.55;
color: var(--ink);
}
.history-restart-body p:last-of-type { margin-bottom: 14px; }
.history-restart-rule {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
}
.history-restart-rule svg { width: 16px; height: 16px; stroke: var(--green); fill: none; stroke-width: 2; flex-shrink: 0; }
.history-restart-warning {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
padding: 10px 14px;
border-radius: 10px;
background: #fff;
border: 1px solid var(--line);
font-size: 13px;
}
.history-restart-warning strong { font-size: 12.5px; }
/* Delete confirmation */
.history-delete-confirm { margin-top: 8px; }
.history-delete-trigger {
display: inline-flex;
gap: 6px;
align-items: center;
color: var(--danger);
font-size: 13px;
font-weight: 600;
cursor: pointer;
list-style: none;
}
.history-delete-trigger::-webkit-details-marker { display: none; }
.history-delete-trigger svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.history-delete-trigger:hover { text-decoration: underline; }
.history-delete-body {
margin-top: 12px;
padding: 16px;
border-radius: 12px;
background: #fdf5f5;
border: 1px solid #f0dada;
}
.history-delete-body p {
margin: 0 0 12px;
font-size: 13px;
line-height: 1.55;
color: var(--ink);
}
/* Empty state */
.history-zero {
text-align: center;
padding: 72px 24px;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
}
.history-zero-icon {
display: inline-grid;
width: 56px;
height: 56px;
place-items: center;
margin-bottom: 16px;
border-radius: 16px;
background: var(--canvas);
border: 1px solid var(--line);
}
.history-zero-icon svg { stroke: var(--muted); fill: none; stroke-width: 1.5; }
.history-zero h3 { margin: 0 0 6px; font-size: 17px; }
.history-zero p { margin: 0 auto; max-width: 340px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 700px) {
.history-hero { flex-direction: column; align-items: stretch; padding: 28px 22px; }
.history-hero-counters { gap: 8px; }
.history-hero-counters div { flex: 1; padding: 12px 10px; }
.history-item { grid-template-columns: 1fr; gap: 10px; }
.history-item-stats { justify-content: space-between; }
.history-item-go { display: none; }
}
/* Agent transition overlay */
.agent-transition-overlay {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
background: rgba(244, 246, 242, .55);
backdrop-filter: blur(8px);
animation: overlay-in .3s ease-out;
}
.agent-transition-overlay[hidden] { display: none; }
.agent-transition-card {
text-align: center;
background: var(--surface); border-radius: 16px;
padding: 48px 56px; box-shadow: var(--shadow);
}
.agent-transition-spinner {
width: 40px; height: 40px; margin: 0 auto 20px;
border: 3px solid var(--line); border-top-color: var(--green);
border-radius: 50%; animation: spin .8s linear infinite;
}
.agent-transition-spinner.is-done {
animation: none;
border-color: var(--green); border-top-color: var(--green);
background: var(--green);
position: relative;
}
.agent-transition-spinner.is-done::after {
content: "\2713"; color: #fff; font-size: 20px; font-weight: bold;
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.agent-transition-title { color: var(--ink); font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.agent-transition-status { color: var(--muted); font-size: 13px; margin: 0; min-height: 18px; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Launch celebration overlay ────────────────────────────── */
.launch-overlay {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
animation: launch-fade-in 0.3s ease both;
}
@keyframes launch-fade-in { from { opacity: 0; } to { opacity: 1; } }
.launch-backdrop {
position: absolute;
inset: 0;
background: rgba(9,22,17,.55);
backdrop-filter: blur(8px);
}
.launch-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 480px;
width: 90%;
padding: 48px 40px 36px;
background: #fff;
border-radius: 20px;
box-shadow: 0 30px 90px rgba(9,22,17,.22);
transform: scale(0.92) translateY(20px);
opacity: 0;
animation: launch-card-in 0.5s cubic-bezier(.22,1,.36,1) 0.15s both;
}
@keyframes launch-card-in {
from { transform: scale(0.92) translateY(20px); opacity: 0; }
to { transform: scale(1) translateY(0); opacity: 1; }
}
.launch-icon {
width: 80px;
height: 80px;
margin-bottom: 24px;
}
.launch-icon svg { width: 100%; height: 100%; }
.launch-eyebrow {
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--green);
margin: 0 0 10px;
}
.launch-title {
font-size: 24px;
font-weight: 800;
letter-spacing: -.03em;
color: var(--ink);
margin: 0 0 10px;
line-height: 1.2;
}
.launch-subtitle {
font-size: 14px;
color: var(--muted);
line-height: 1.6;
margin: 0 0 28px;
max-width: 360px;
}
.launch-form { width: 100%; }
.launch-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 16px 28px;
border: none;
border-radius: 12px;
background: var(--green-gradient);
color: #fff;
box-shadow: var(--green-glow);
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background .2s, box-shadow .2s, transform .15s;
opacity: 0;
transform: translateY(8px);
}
.launch-card.is-ready .launch-btn {
animation: launch-btn-in 0.5s cubic-bezier(.22,1,.36,1) 0.9s both;
}
@keyframes launch-btn-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.launch-btn:hover {
background: var(--green-gradient-hover);
box-shadow: 0 12px 28px rgba(5, 114, 69, .28);
transform: translateY(-1px);
}
.launch-btn:active { transform: translateY(0); }
.launch-btn svg { flex-shrink: 0; }
.launch-skip {
margin-top: 14px;
padding: 8px 16px;
border: none;
background: none;
color: var(--muted);
font-size: 13px;
font-weight: 500;
cursor: pointer;
opacity: 0;
}
.launch-card.is-ready .launch-skip {
animation: launch-btn-in 0.4s ease 1.2s both;
}
/* -- KipDo product UI kit -------------------------------------- */
.ui-app-frame {
min-height: 100vh;
display: grid;
grid-template-columns: 230px minmax(0, 1fr);
background: var(--canvas);
}
.ui-sidebar {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
padding: 20px 14px 16px;
border-right: 1px solid #e7ece8;
background: rgba(255,255,255,.96);
}
.ui-sidebar-brand {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 56px;
padding: 0 4px 18px;
border-bottom: 1px solid #e7ece8;
color: #0e1c16;
font-size: 30px;
font-weight: 850;
letter-spacing: 0;
text-decoration: none;
}
.ui-sidebar-brand img { width: 42px; height: 42px; object-fit: contain; border-radius: 10px; }
.ui-sidebar-brand em { color: var(--green); font-style: normal; }
.ui-sidebar-section {
display: grid;
gap: 2px;
margin-top: 18px;
}
.ui-sidebar-label {
margin: 22px 0 6px;
color: #858f89;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
}
.ui-nav-item {
display: flex;
align-items: center;
gap: 12px;
min-height: 46px;
width: 100%;
padding: 0 12px;
border: 0;
border-radius: 12px;
background: transparent;
color: #56635d;
font: inherit;
font-size: 14px;
font-weight: 800;
text-decoration: none;
cursor: pointer;
}
.ui-nav-item:hover { background: #f4f8f5; color: var(--green-dark); }
.ui-nav-item.is-active {
background: var(--green-gradient);
color: #fff;
box-shadow: var(--green-glow);
}
.ui-nav-icon {
display: grid;
width: 22px;
height: 22px;
place-items: center;
color: inherit;
}
.ui-nav-icon svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ui-nav-badge {
display: grid;
min-width: 28px;
height: 22px;
margin-left: auto;
place-items: center;
border-radius: 999px;
background: var(--green);
color: #fff;
font-size: 12px;
font-weight: 850;
}
.ui-sidebar-bottom {
display: grid;
gap: 2px;
margin-top: auto;
padding-top: 16px;
border: 0;
border-top: 1px solid #e7ece8;
border-radius: 0;
background: transparent;
overflow: visible;
}
.ui-sidebar-logout { margin: 0; }
.ui-sidebar-logout button { text-align: left; }
.ui-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px rgba(17,122,85,.1);
}
.ui-content { min-width: 0; }
.ui-topbar {
min-height: 72px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
padding: 0 36px;
border-bottom: 1px solid #e6ece8;
background: rgba(255,255,255,.94);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.ui-topbar-link,
.ui-topbar-icon {
display: inline-flex;
align-items: center;
gap: 8px;
color: #25322c;
font-size: 14px;
font-weight: 750;
text-decoration: none;
}
.ui-topbar-button {
border: 0;
background: transparent;
cursor: pointer;
font: inherit;
}
.ui-topbar-button:hover { color: var(--green); }
.ui-topbar-icon {
position: relative;
width: 38px;
height: 38px;
justify-content: center;
border: 0;
background: transparent;
}
.ui-topbar-icon::after {
content: "";
position: absolute;
top: 8px;
right: 9px;
width: 8px;
height: 8px;
border: 2px solid #fff;
border-radius: 50%;
background: #ef4444;
}
.ui-account-menu {
display: inline-flex;
align-items: center;
gap: 12px;
padding-left: 20px;
border-left: 1px solid #e4eae6;
color: #18251e;
text-decoration: none;
}
.ui-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
background: #e9f3ec;
}
.ui-avatar-fallback {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: #e9f3ec;
color: var(--green-dark);
font-weight: 900;
}
.ui-account-menu > span:not(.ui-avatar-fallback) { display: block; white-space: nowrap; }
.ui-account-menu strong { display: block; white-space: nowrap; }
.ui-account-menu strong { font-size: 14px; line-height: 1.2; }
.ui-account-menu > span:not(.ui-avatar-fallback) span { display: block; color: #67736c; font-size: 12px; white-space: nowrap; }
.ui-page {
width: min(1380px, 100%);
margin: 0 auto;
padding: 32px 34px 48px;
}
.ui-page-title {
margin-bottom: 22px;
}
.ui-page-title h1 {
margin: 0;
font-size: 24px;
line-height: 1.1;
letter-spacing: 0;
}
.ui-page-title p {
margin: 10px 0 0;
color: #5f6d66;
font-size: 15px;
}
.ui-card {
border: 1px solid #dfe8e3;
border-radius: 8px;
background: #fff;
box-shadow: 0 18px 50px rgba(18,42,29,.04);
}
.ui-card-soft {
background: linear-gradient(135deg, #f0fbf4, #fff);
}
.ui-btn {
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 24px;
border: 1px solid #dfe7e2;
border-radius: 8px;
background: #fff;
color: #14231c;
font-size: 14px;
font-weight: 850;
text-decoration: none;
cursor: pointer;
}
.ui-btn-primary {
border-color: transparent;
background: var(--green-gradient);
color: #fff;
box-shadow: var(--green-glow);
}
.ui-btn-primary:hover { background: var(--green-gradient-hover); }
.ui-btn-soft {
border-color: transparent;
background: #eaf6ee;
color: var(--green-dark);
}
.ui-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 0 10px;
border-radius: 999px;
background: #e6f5e9;
color: var(--green);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
}
.ui-pill-teal { background: #e7f6f5; color: #0a6466; }
.ui-alert {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 24px;
min-height: 96px;
padding: 20px 26px;
border: 1px solid #ffd99a;
border-radius: 8px;
background: linear-gradient(90deg, #fffaf0, #fff);
}
.billing-screen .ui-alert,
.billing-screen .billing-metrics {
margin-top: 22px;
}
.ui-alert strong { display: block; color: #d36a18; font-size: 18px; }
.ui-alert span { display: block; margin-top: 6px; color: #56635d; font-size: 14px; font-weight: 650; }
.ui-alert-success {
border-color: #cdebd7;
background: linear-gradient(90deg, #effaf2, #fff);
}
.ui-alert-success strong { color: #14231c; }
.ui-alert-actions { display: flex; gap: 18px; }
.ui-progress {
height: 9px;
border-radius: 999px;
background: #e7ece8;
overflow: hidden;
}
.ui-progress > span {
display: block;
height: 100%;
width: var(--progress, 0%);
border-radius: inherit;
background: linear-gradient(90deg, #0d9a63, #63d88d);
}
.billing-top-summary {
display: grid;
grid-template-columns: 1.35fr .85fr 1.05fr .9fr 1.15fr;
min-height: 126px;
overflow: hidden;
}
.billing-summary-lead {
display: flex;
align-items: center;
gap: 14px;
padding: 22px 26px;
background: linear-gradient(90deg, #edf8f1, #f8fcf9);
}
.billing-icon-bubble {
display: grid;
flex: 0 0 auto;
width: 32px;
height: 32px;
place-items: center;
border-radius: 50%;
background: var(--green);
color: #fff;
font-size: 16px;
font-weight: 900;
line-height: 1;
}
.billing-summary-lead h2 { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: 0; }
.billing-summary-lead p { margin: 6px 0 0; color: #66736d; font-size: 13px; font-weight: 650; }
.billing-summary-cell {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: 22px 28px;
border-left: 1px solid #e3ebe6;
}
.billing-summary-value {
display: flex;
align-items: baseline;
gap: 8px;
color: #0e1c16;
font-size: 30px;
font-weight: 900;
line-height: 1;
}
.billing-summary-value span { color: #68746e; font-size: 16px; font-weight: 800; }
.billing-summary-label { margin-top: 10px; color: #526059; font-size: 12px; font-weight: 750; }
.billing-summary-sub { margin-top: 8px; color: #68746e; font-size: 12px; line-height: 1.35; font-weight: 650; }
.billing-summary-cta {
display: grid;
align-content: center;
justify-items: stretch;
gap: 12px;
padding: 22px 28px;
border-left: 1px solid #e3ebe6;
text-align: center;
}
.billing-metrics {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
overflow: hidden;
}
.billing-metric {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
gap: 14px;
min-height: 96px;
padding: 20px 24px;
}
.billing-metric + .billing-metric { border-left: 1px solid #e5ece7; }
.billing-metric-icon {
display: grid;
width: 34px;
height: 34px;
place-items: center;
border-radius: 8px;
background: #eaf8ef;
color: var(--green);
font-weight: 900;
}
.billing-metric-label { color: #5b6861; font-size: 12px; line-height: 1.3; font-weight: 800; }
.billing-metric-value { margin-top: 3px; color: #0f1c16; font-size: 24px; font-weight: 900; line-height: 1; }
.billing-metric-delta { margin-top: 10px; color: var(--green); font-size: 11px; line-height: 1.25; font-weight: 850; }
.billing-workspace {
display: grid;
grid-template-columns: minmax(0, 1fr) 350px;
gap: 24px;
margin-top: 24px;
}
.billing-plan-board,
.billing-side-stack {
min-width: 0;
}
.billing-plan-board { padding: 24px 26px; }
.billing-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.billing-section-title {
display: flex;
align-items: center;
gap: 14px;
}
.billing-section-title h2 { margin: 0; font-size: 20px; line-height: 1.1; letter-spacing: 0; }
.billing-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 3px;
border-radius: 999px;
background: #f0f4f1;
}
.billing-toggle button {
min-height: 30px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: transparent;
color: #6a756f;
font-size: 12px;
font-weight: 850;
}
.billing-toggle button.active {
background: #fff;
color: #14231c;
box-shadow: 0 3px 10px rgba(15,35,24,.08);
}
.billing-plans {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.billing-plan {
position: relative;
display: flex;
flex-direction: column;
min-height: 480px;
padding: 22px 24px;
border: 1px solid #dfe8e3;
border-radius: 8px;
background: #fff;
}
.billing-plan.is-recommended,
.billing-plan.is-current {
border-color: #30a474;
box-shadow: 0 18px 45px rgba(17,122,85,.09);
}
.billing-plan-badge {
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
min-width: 142px;
min-height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0 0 8px 8px;
background: var(--green);
color: #fff;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
}
.billing-plan h3 { margin: 10px 0 10px; font-size: 18px; line-height: 1.15; letter-spacing: 0; }
.billing-plan-copy {
min-height: 44px;
margin: 0 0 18px;
color: #56645e;
font-size: 13px;
line-height: 1.45;
font-weight: 650;
}
.billing-price {
display: flex;
align-items: baseline;
gap: 4px;
margin: 0 0 10px;
}
.billing-price-currency { font-size: 22px; font-weight: 900; }
.billing-price-number { font-size: 38px; font-weight: 900; line-height: .95; letter-spacing: 0; }
.billing-price-period { color: #65726b; font-size: 13px; font-weight: 800; }
.billing-plan .ui-btn { width: 100%; margin: 16px 0 20px; }
.billing-feature-list {
display: grid;
gap: 11px;
padding: 0;
margin: 0;
list-style: none;
}
.billing-feature-list li {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 10px;
color: #3f4d46;
font-size: 12.5px;
line-height: 1.35;
font-weight: 650;
}
.billing-feature-list li::before {
content: "✓";
color: var(--green);
font-weight: 900;
}
.billing-feature-list span { color: var(--green); font-weight: 800; }
.billing-identity-strip {
display: flex;
align-items: center;
gap: 16px;
min-height: 62px;
margin-top: 24px;
padding: 0 20px;
border-radius: 8px;
background: linear-gradient(90deg, #edf8f0, #f8fcf9);
color: #526059;
font-size: 13px;
font-weight: 700;
}
.billing-identity-strip a {
margin-left: auto;
color: var(--green);
font-weight: 900;
text-decoration: none;
}
.billing-side-stack {
display: grid;
gap: 18px;
align-content: start;
}
.billing-current-card {
padding: 22px;
}
.billing-current-head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 12px;
padding-bottom: 18px;
border-bottom: 1px solid #e7eee9;
}
.billing-current-head h2 { margin: 0; font-size: 18px; }
.billing-current-head p { margin: 8px 0 0; color: #5d6963; font-size: 13px; font-weight: 650; }
.billing-detail-list {
display: grid;
gap: 12px;
margin: 20px 0;
}
.billing-detail-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
color: #5a6760;
font-size: 13px;
font-weight: 700;
}
.billing-detail-row strong { color: #24312b; }
.billing-page {
display: grid;
gap: 14px;
}
.billing-command-card,
.billing-alert,
.billing-plan-board,
.billing-side-card {
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
box-shadow: 0 7px 24px rgba(28,55,42,.035);
}
.billing-command-icon,
.billing-side-head > span {
display: grid;
place-items: center;
border-radius: 14px;
background: #eaf8ef;
color: var(--green-dark);
}
.billing-command-icon svg,
.billing-side-head > span svg,
.billing-identity-strip svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.billing-command-card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(230px, 280px);
overflow: hidden;
}
.billing-command-main {
padding: 18px 20px;
}
.billing-command-top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
align-items: center;
gap: 18px;
}
.billing-command-top h1 {
margin: 4px 0 0;
color: var(--ink);
font-size: clamp(24px, 2vw, 30px);
line-height: 1.05;
letter-spacing: 0;
}
.billing-command-top p:not(.eyebrow) {
max-width: 620px;
margin: 8px 0 0;
color: #65716a;
font-size: 13px;
line-height: 1.42;
font-weight: 650;
}
.billing-command-status {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
padding: 12px;
border: 1px solid #e4ece7;
border-radius: 14px;
background: #fbfdfb;
}
.billing-command-icon {
width: 40px;
height: 40px;
flex: 0 0 40px;
}
.billing-command-icon.tone-automation {
background: #fff4dc;
color: #a96500;
}
.billing-command-status strong,
.billing-command-status small {
display: block;
}
.billing-command-status strong {
color: var(--ink);
font-size: 14px;
line-height: 1.15;
font-weight: 900;
}
.billing-command-status small {
margin-top: 4px;
color: #65716a;
font-size: 12px;
line-height: 1.3;
font-weight: 700;
}
.billing-cycle-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-top: 16px;
}
.billing-cycle-grid > div {
min-width: 0;
padding: 12px;
border: 1px solid #e3ebe6;
border-radius: 12px;
background: #fbfdfb;
}
.billing-cycle-grid > .tone-cycle {
border-color: #f4d7a1;
background: #fff9ec;
}
.billing-cycle-grid > .tone-agent {
border-color: #bed7e9;
background: #f4f9fc;
}
.billing-cycle-grid > .tone-cycle strong {
color: #9a5d00;
}
.billing-cycle-grid > .tone-agent strong {
color: #22627d;
}
.billing-cycle-grid > .tone-cycle .ui-progress > span {
background: linear-gradient(90deg, #c27900, #ffbf5c);
}
.billing-cycle-grid strong,
.billing-cycle-grid small,
.billing-cycle-grid em {
display: block;
}
.billing-cycle-grid strong {
color: var(--ink);
font-size: 22px;
line-height: 1;
font-weight: 920;
}
.billing-cycle-grid strong span {
color: #748078;
font-size: 16px;
font-weight: 850;
}
.billing-cycle-grid small {
margin-top: 7px;
color: #56645e;
font-size: 12px;
font-weight: 850;
}
.billing-cycle-grid em {
margin-top: 8px;
color: #748078;
font-size: 12px;
font-style: normal;
line-height: 1.35;
font-weight: 650;
}
.billing-command-action {
display: grid;
align-content: center;
gap: 10px;
padding: 18px;
border-left: 1px solid #e3ebe6;
background: #fbfdfb;
}
.billing-command-action .button,
.billing-command-action form {
width: 100%;
}
.billing-action-button {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) 16px;
align-items: center;
gap: 10px;
width: 100%;
min-height: 52px;
padding: 8px 11px;
border: 1px solid #d5e2ee;
border-radius: 14px;
background: #fff;
color: var(--ink);
font: inherit;
font-weight: 900;
text-align: left;
box-shadow: 0 10px 24px rgba(31,91,142,.07);
cursor: pointer;
}
.billing-action-button:hover {
border-color: #aec9e7;
background: #f7fbff;
}
.billing-action-button.is-primary {
border-color: #0c8c63;
background: linear-gradient(135deg, #0ea36c, #078357);
color: #fff;
box-shadow: 0 12px 28px rgba(7,131,87,.2);
}
.billing-action-button strong {
min-width: 0;
overflow-wrap: anywhere;
line-height: 1.15;
}
.billing-action-icon {
display: grid;
width: 36px;
height: 36px;
place-items: center;
border-radius: 12px;
background: #eaf4ff;
color: #1769ba;
}
.billing-action-button.is-primary .billing-action-icon {
background: rgba(255,255,255,.16);
color: #fff;
}
.billing-action-icon svg,
.billing-action-arrow {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.billing-action-arrow {
justify-self: end;
color: #4f728f;
}
.billing-action-button.is-primary .billing-action-arrow {
color: #fff;
}
.billing-command-action small {
color: #65716a;
font-size: 12px;
line-height: 1.45;
font-weight: 650;
}
.billing-alert {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 18px 20px;
border-color: #f1d2a8;
background: #fffaf1;
}
.billing-alert-success {
border-color: #cfe7d8;
background: #f3fbf6;
}
.billing-alert strong,
.billing-alert span {
display: block;
}
.billing-alert strong {
color: var(--ink);
font-size: 16px;
font-weight: 900;
}
.billing-alert span {
margin-top: 5px;
color: #65716a;
font-size: 13px;
font-weight: 650;
}
.billing-layout {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
align-items: start;
}
.billing-page .billing-plan-board {
padding: 20px 22px;
}
.billing-page .billing-section-head {
align-items: flex-start;
margin-bottom: 16px;
}
.billing-page .billing-section-head h2 {
margin: 4px 0 0;
color: var(--ink);
font-size: clamp(24px, 2vw, 28px);
line-height: 1.08;
letter-spacing: 0;
}
.billing-page .billing-toggle {
padding: 4px;
border: 1px solid #e3ebe6;
border-radius: 999px;
background: #f1f5f2;
}
.billing-page .billing-toggle button {
min-height: 34px;
padding: 0 17px;
border-radius: 999px;
}
.billing-page .billing-toggle span {
padding: 0 12px;
color: var(--green);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
}
.billing-page .billing-plans {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
align-items: stretch;
}
.billing-page .billing-plan {
position: relative;
display: grid;
grid-template-rows: auto auto auto auto 1fr;
align-content: start;
min-height: auto;
padding: 18px;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 22px rgba(18,36,28,.035);
transition: box-shadow .18s, border-color .18s, transform .18s;
}
.billing-page .billing-plan.plan-starter {
border-top: 3px solid #1f73d4;
}
.billing-page .billing-plan.plan-growth {
border-top: 3px solid var(--green);
}
.billing-page .billing-plan.plan-professional {
border-top: 3px solid #d18a18;
}
.billing-page .billing-plan.plan-starter.is-current {
border-color: #1f73d4;
box-shadow: 0 12px 30px rgba(31,115,212,.1);
}
.billing-page .billing-plan.plan-growth.is-current,
.billing-page .billing-plan.plan-growth.is-recommended {
border-color: var(--green);
box-shadow: 0 12px 30px rgba(17,122,85,.1);
}
.billing-page .billing-plan.plan-professional.is-current {
border-color: #d18a18;
box-shadow: 0 12px 30px rgba(209,138,24,.1);
}
.billing-page .billing-plan:hover {
box-shadow: 0 14px 34px rgba(18,36,28,.07);
transform: translateY(-2px);
}
.billing-page .billing-plan-badge {
top: 12px;
right: 12px;
min-width: 0;
min-height: 0;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: .07em;
overflow: hidden;
}
.billing-page .billing-plan.plan-starter .billing-plan-badge {
background: #1f73d4;
}
.billing-page .billing-plan.plan-professional .billing-plan-badge {
background: #d18a18;
}
.billing-page .billing-plan h3 {
margin: 0 0 4px;
padding-right: 104px;
font-size: 18px;
font-weight: 800;
letter-spacing: -.02em;
}
.billing-page .billing-plan-copy {
min-height: 0;
margin: 0 0 12px;
color: var(--muted);
font-size: 12.5px;
line-height: 1.35;
}
.billing-page .billing-price {
margin: 0 0 10px;
gap: 2px;
}
.billing-page .billing-price strong {
color: var(--ink);
font-size: 32px;
line-height: 1;
font-weight: 900;
}
.billing-page .billing-price span {
color: var(--ink);
font-size: 18px;
font-weight: 900;
}
.billing-page .billing-price small {
color: #65726b;
font-size: 13px;
font-weight: 600;
}
.billing-plan-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
margin: 0 0 12px;
}
.billing-plan-metrics span {
min-width: 0;
padding: 8px;
border: 1px solid #edf1ee;
border-radius: 10px;
background: #fbfdfb;
color: #65716a;
font-size: 10.5px;
line-height: 1.2;
font-weight: 750;
}
.billing-plan-metrics strong {
display: block;
margin-bottom: 3px;
color: var(--ink);
font-size: 14px;
line-height: 1;
font-weight: 900;
}
.billing-page .billing-plan form {
margin: 0;
}
.billing-page .billing-plan .button {
width: 100%;
min-height: 38px;
margin: 0 0 12px;
border-radius: 10px;
border-width: 1px;
font-size: 12.5px;
font-weight: 800;
}
.billing-page .billing-plan .button-light {
border-color: var(--line);
background: #fff;
color: var(--green);
}
.billing-page .billing-plan .button-light:hover {
border-color: var(--green);
background: var(--green-soft);
transform: translateY(-2px);
}
.billing-page .billing-plan .button-primary {
background: var(--green);
color: #fff;
border-color: var(--green);
box-shadow: 0 4px 18px rgba(17,122,85,.3);
}
.billing-page .billing-plan .button-primary:hover {
background: var(--green-dark);
border-color: var(--green-dark);
box-shadow: 0 8px 28px rgba(17,122,85,.4);
}
.billing-page .billing-feature-list {
gap: 0;
margin-top: 0;
}
.billing-page .billing-feature-list li {
display: flex;
grid-template-columns: none;
align-items: center;
gap: 9px;
padding: 5px 0;
border-bottom: 1px solid #f0f2f0;
color: var(--ink);
font-size: 12px;
line-height: 1.25;
font-weight: 650;
}
.billing-page .billing-feature-list li:last-child {
border-bottom: 0;
}
.billing-page .billing-feature-list li::before {
content: "";
width: 15px;
height: 15px;
border-radius: 50%;
flex: 0 0 15px;
background: var(--green-soft)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%23117a55' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
no-repeat center / 10px;
}
.billing-identity-strip {
border-radius: 12px;
margin-top: 14px;
padding: 12px 14px;
background: #f1faf5;
}
.billing-page .billing-identity-strip span {
display: grid;
width: 32px;
height: 32px;
flex: 0 0 32px;
place-items: center;
border-radius: 12px;
background: #eaf8ef;
color: var(--green-dark);
}
.billing-page .billing-identity-strip p {
margin: 0;
}
.billing-page .billing-side-stack {
display: grid;
grid-template-columns: 1fr;
align-items: start;
gap: 0;
}
.billing-side-card {
padding: 16px 18px;
}
.billing-side-head {
display: flex;
gap: 12px;
align-items: center;
padding-bottom: 0;
border-bottom: 0;
}
.billing-side-head > span {
width: 40px;
height: 40px;
flex: 0 0 40px;
}
.billing-side-head h2 {
margin: 0;
color: var(--ink);
font-size: 16px;
line-height: 1.15;
}
.billing-side-head p {
margin: 6px 0 0;
color: #65716a;
font-size: 13px;
line-height: 1.4;
font-weight: 650;
}
.billing-page .billing-detail-list {
display: grid;
gap: 0;
margin: 14px 0;
}
.billing-page .billing-detail-list > div {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(88px, max-content);
align-items: start;
justify-content: space-between;
gap: 14px;
padding: 10px 0;
border-bottom: 1px solid #edf2ef;
color: #5a6760;
font-size: 13px;
font-weight: 750;
}
.billing-page .billing-detail-list > div:last-child {
border-bottom: 0;
}
.billing-page .billing-detail-list strong {
color: var(--ink);
text-align: right;
}
.billing-side-action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 44px;
padding: 0 14px;
border: 1px solid #dfe8e3;
border-radius: 12px;
background: #fff;
color: var(--ink);
font: inherit;
font-size: 13px;
font-weight: 900;
cursor: pointer;
}
.billing-side-action:hover {
border-color: #b8d8c5;
background: #f7fbf8;
}
.billing-side-action svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (max-width: 1100px) {
.billing-command-card,
.billing-layout {
grid-template-columns: 1fr;
}
.billing-command-top {
grid-template-columns: 1fr;
}
.billing-command-action {
border-top: 1px solid #e3ebe6;
border-left: 0;
}
}
/* Data protection belongs in Settings, not in the dashboard reporting grid. */
.settings-privacy-card {
overflow: hidden;
margin-top: 18px;
border: 1px solid #e6e8e3;
border-radius: 12px;
background: #fff;
}
.settings-privacy-head {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
gap: 12px;
align-items: start;
padding: 18px;
}
.settings-privacy-icon {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 9px;
background: #edf3ec;
color: #346538;
}
.settings-privacy-icon svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.9;
}
.settings-privacy-copy {
min-width: 0;
}
.settings-privacy-copy > p {
margin: 0 0 4px;
color: #346538;
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.settings-privacy-copy h3 {
margin: 0;
color: #171814;
font-size: 17px;
line-height: 1.2;
letter-spacing: -.025em;
}
.settings-privacy-copy > span {
display: block;
max-width: 560px;
margin-top: 5px;
color: #6c6f68;
font-size: 12px;
line-height: 1.5;
}
.settings-privacy-status {
display: inline-flex;
min-height: 26px;
align-items: center;
gap: 6px;
padding: 0 9px;
border-radius: 999px;
background: #edf3ec;
color: #346538;
font-size: 10.5px;
font-weight: 750;
white-space: nowrap;
}
.settings-privacy-status i {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.settings-privacy-status.is-warning {
background: #fbf3db;
color: #956400;
}
.settings-privacy-alert {
margin: 0 18px 14px;
padding: 9px 11px;
border: 1px solid #f3dfad;
border-radius: 7px;
background: #fffaf0;
color: #835b08;
font-size: 11px;
}
.settings-privacy-rows {
border-top: 1px solid #e6e8e3;
}
.settings-privacy-rows > div {
display: grid;
grid-template-columns: minmax(150px, .65fr) minmax(0, 1fr);
gap: 18px;
align-items: center;
min-height: 44px;
padding: 10px 18px;
}
.settings-privacy-rows > div + div {
border-top: 1px solid #eceeea;
}
.settings-privacy-rows span {
color: #777a73;
font-size: 11px;
}
.settings-privacy-rows strong {
color: #282a25;
font-size: 11.5px;
font-weight: 700;
text-align: right;
}
.settings-privacy-actions {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border-top: 1px solid #e6e8e3;
background: #fbfbfa;
}
.settings-privacy-primary,
.settings-privacy-link {
display: inline-flex;
min-height: 34px;
align-items: center;
justify-content: center;
text-decoration: none;
}
.settings-privacy-primary {
padding: 0 12px;
border-radius: 6px;
background: #171814;
color: #fff;
font-size: 11px;
font-weight: 750;
transition: background .15s ease, transform .15s ease;
}
.settings-privacy-primary:hover {
background: #30322c;
color: #fff;
}
.settings-privacy-primary:active {
transform: translateY(1px);
}
.settings-privacy-link {
gap: 6px;
color: #565952;
font-size: 11px;
font-weight: 700;
}
.settings-privacy-link:hover {
color: #171814;
}
.settings-privacy-link svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
@media (max-width: 680px) {
.settings-privacy-head {
grid-template-columns: 38px minmax(0, 1fr);
}
.settings-privacy-status {
grid-column: 2;
justify-self: start;
}
.settings-privacy-rows > div {
grid-template-columns: 1fr;
gap: 3px;
}
.settings-privacy-rows strong {
text-align: left;
}
.settings-privacy-actions {
align-items: stretch;
flex-direction: column;
}
}
@media (max-width: 720px) {
.billing-page {
gap: 16px;
}
.billing-command-main,
.billing-command-action,
.billing-page .billing-plan-board,
.billing-side-card {
padding: 18px;
}
.billing-command-top h1 {
font-size: 26px;
}
.billing-cycle-grid,
.billing-page .billing-plans {
grid-template-columns: 1fr;
}
.billing-alert {
align-items: stretch;
flex-direction: column;
}
.billing-alert .button,
.billing-alert form,
.billing-alert button {
width: 100%;
}
.billing-page .billing-section-head {
align-items: stretch;
flex-direction: column;
}
.billing-page .billing-toggle {
justify-content: center;
}
.billing-page .billing-identity-strip {
align-items: flex-start;
flex-direction: column;
padding: 16px;
}
.billing-page .billing-identity-strip a {
margin-left: 0;
}
.billing-page .billing-detail-list > div {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
}
.settings-route-host {
display: grid;
min-height: 58vh;
place-items: center;
color: var(--muted);
text-align: center;
}
.settings-route-host > div {
max-width: 520px;
}
.settings-route-host h1 {
margin: 6px 0 8px;
color: var(--ink);
font-size: clamp(25px, 2.4vw, 34px);
letter-spacing: 0;
}
.settings-route-host p:not(.eyebrow) {
margin: 0;
font-weight: 650;
line-height: 1.45;
}
.settings-modal-open {
overflow: hidden;
}
.settings-modal-layer[hidden] {
display: none;
}
.settings-modal-layer {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
place-items: center;
padding: 26px;
}
.settings-modal-backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(0,0,0,.68);
backdrop-filter: blur(7px);
cursor: pointer;
}
.settings-modal {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 270px minmax(0, 1fr);
width: min(1060px, calc(100vw - 42px));
height: min(900px, calc(100dvh - 42px));
max-height: calc(100dvh - 42px);
overflow: hidden;
border: 1px solid rgba(255,255,255,.1);
border-radius: 18px;
background: #232424;
box-shadow: 0 28px 90px rgba(0,0,0,.38);
color: #f5f6f4;
}
.settings-modal-sidebar {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
min-height: 0;
padding: 14px 10px;
border-right: 1px solid rgba(255,255,255,.1);
background: #222323;
}
.settings-modal-close {
display: grid;
width: 42px;
height: 42px;
place-items: center;
margin: 0 0 14px;
border: 0;
border-radius: 12px;
background: rgba(255,255,255,.07);
color: #f4f4f2;
cursor: pointer;
}
.settings-modal-close svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
}
.settings-modal-brand {
display: flex;
align-items: center;
gap: 10px;
padding: 0 8px 16px;
}
.settings-modal-brand img {
width: 34px;
height: 34px;
border-radius: 10px;
}
.settings-modal-brand strong,
.settings-modal-brand span {
display: block;
}
.settings-modal-brand strong {
color: #fff;
font-size: 17px;
font-weight: 900;
}
.settings-modal-brand span {
margin-top: 1px;
color: rgba(255,255,255,.55);
font-size: 11px;
font-weight: 750;
}
.settings-modal-nav {
display: grid;
align-content: start;
gap: 4px;
min-height: 0;
overflow: auto;
}
.settings-modal-nav button {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
align-items: center;
gap: 11px;
min-height: 42px;
padding: 0 12px;
border: 0;
border-radius: 10px;
background: transparent;
color: rgba(255,255,255,.74);
font: inherit;
font-size: 14px;
font-weight: 760;
text-align: left;
cursor: pointer;
}
.settings-modal-nav button:hover,
.settings-modal-nav button.is-active {
background: rgba(255,255,255,.08);
color: #fff;
}
.settings-modal-nav svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
.settings-modal-main {
min-height: 0;
overflow: auto;
overscroll-behavior: contain;
padding: 26px 28px 96px;
scroll-padding-bottom: 96px;
background: #242525;
}
.settings-modal-head {
padding-bottom: 18px;
margin-bottom: 16px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.settings-modal-head .eyebrow {
margin: 0;
color: rgba(255,255,255,.5);
}
.settings-modal-head h2 {
margin: 6px 0 0;
color: #fff;
font-size: 21px;
letter-spacing: 0;
}
.settings-modal-panel {
display: none;
max-width: 720px;
}
.settings-modal-panel.is-visible {
display: block;
}
.settings-modal-panel .settings-panel-head {
margin-bottom: 20px;
}
.settings-modal-panel .settings-panel-kicker {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.settings-modal-panel .settings-panel-icon,
.settings-modal-panel .settings-safety-envelope-icon {
display: grid;
width: 40px;
height: 40px;
flex: 0 0 40px;
place-items: center;
border-radius: 11px;
background: #eaf8ef;
color: var(--green-dark);
}
.settings-modal-panel .settings-panel-icon.is-plain {
background: #e9f8f6;
color: #0f8b8d;
}
.settings-modal-panel .settings-panel-icon.is-light {
background: #eef4ff;
color: #1769ba;
}
.settings-modal-panel .settings-panel-icon svg,
.settings-modal-panel .settings-safety-envelope-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.settings-modal-panel .eyebrow {
margin: 0;
color: #8be3ba;
font-size: 10px;
font-weight: 900;
letter-spacing: .14em;
text-transform: uppercase;
}
.settings-modal-panel h2,
.settings-modal-panel h3 {
margin: 0;
color: #fff;
letter-spacing: 0;
}
.settings-modal-panel h2 {
font-size: 19px;
}
.settings-modal-panel h3 {
font-size: 16px;
}
.settings-modal-panel p,
.settings-modal-panel .help-text {
color: rgba(255,255,255,.62);
font-size: 13px;
line-height: 1.45;
font-weight: 650;
}
.settings-modal-panel form {
display: grid;
gap: 14px;
margin: 0 0 18px;
}
.settings-form-divider {
height: 1px;
margin: 3px 0;
background: rgba(255,255,255,.12);
}
.settings-modal-panel .field {
display: grid;
gap: 6px;
}
.settings-modal-panel .settings-check-field label {
align-items: center;
gap: 10px;
}
.settings-modal-panel .settings-check-field input {
width: 18px;
height: 18px;
accent-color: var(--green);
}
.settings-modal-panel label,
.settings-modal-panel .account-health-label {
color: rgba(255,255,255,.82);
font-size: 12.5px;
font-weight: 780;
}
.settings-modal-panel input[type="text"],
.settings-modal-panel input[type="email"],
.settings-modal-panel input[type="password"],
.settings-modal-panel input[type="url"],
.settings-modal-panel input[type="number"],
.settings-modal-panel select,
.settings-modal-panel textarea,
.settings-modal-panel .field-control {
width: 100%;
min-height: 40px;
padding: 9px 11px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 10px;
background: rgba(255,255,255,.06);
color: #fff;
font: inherit;
font-size: 13px;
}
.settings-modal-panel textarea {
min-height: 116px;
resize: vertical;
}
.settings-modal-panel input[readonly] {
color: rgba(255,255,255,.76);
}
.settings-modal-panel .settings-lock-field {
position: relative;
}
.settings-modal-panel .settings-lock-field > svg {
position: absolute;
right: 11px;
top: 50%;
width: 16px;
height: 16px;
transform: translateY(-50%);
color: rgba(255,255,255,.45);
}
.settings-modal-panel .settings-lock-field input {
padding-right: 36px;
}
.settings-modal-panel .button {
min-height: 38px;
justify-self: start;
margin: 0;
}
.settings-readonly-note,
.settings-safety-envelope,
.settings-status-list,
.settings-billing-account-summary,
.settings-plan-list article,
.settings-ticket-list div {
border: 1px solid rgba(255,255,255,.1);
border-radius: 13px;
background: rgba(255,255,255,.055);
}
.settings-readonly-note {
display: grid;
gap: 4px;
margin-bottom: 18px;
padding: 13px 14px;
}
.settings-readonly-note strong,
.settings-readonly-note span {
display: block;
}
.settings-readonly-note strong {
color: #fff;
font-size: 13.5px;
}
.settings-readonly-note span {
color: rgba(255,255,255,.62);
font-size: 12.5px;
line-height: 1.4;
}
.settings-readonly-note.tone-danger {
border-color: rgba(215,92,78,.34);
background: rgba(215,92,78,.1);
}
.settings-status-list,
.settings-safety-envelope-list,
.settings-ticket-list {
display: grid;
gap: 0;
margin-bottom: 18px;
}
.settings-status-list div,
.settings-safety-envelope-list div,
.settings-ticket-list div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 14px;
align-items: start;
padding: 11px 0;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.settings-status-list div,
.settings-ticket-list div {
padding: 12px;
border-bottom: 0;
}
.settings-status-list span,
.settings-safety-envelope-list span,
.settings-ticket-list span {
color: rgba(255,255,255,.62);
font-size: 12.5px;
font-weight: 760;
}
.settings-status-list strong,
.settings-safety-envelope-list strong,
.settings-ticket-list strong {
color: #fff;
font-size: 12.5px;
text-align: right;
}
.settings-safety-envelope {
display: grid;
gap: 14px;
margin-bottom: 18px;
padding: 16px;
}
.settings-safety-envelope-head {
display: flex;
gap: 12px;
align-items: flex-start;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.settings-limits-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.settings-toggle-row,
.settings-checkline,
.settings-checkbox-grid label {
display: flex;
align-items: center;
gap: 9px;
color: rgba(255,255,255,.78);
font-size: 13px;
font-weight: 740;
}
.settings-toggle-row {
justify-content: space-between;
}
.settings-checkbox-grid {
display: grid;
gap: 9px;
}
.settings-actions-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, max-content));
gap: 10px;
}
.settings-copy-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
.settings-divider {
width: 100%;
border: 0;
border-top: 1px solid rgba(255,255,255,.1);
margin: 18px 0;
}
.delete-zone {
display: grid;
gap: 8px;
margin-top: 18px;
padding: 15px;
border: 1px solid rgba(215,92,78,.28);
border-radius: 13px;
background: rgba(215,92,78,.08);
}
.btn-delete {
justify-self: start;
min-height: 36px;
padding: 0 14px;
border: 1px solid rgba(215,92,78,.55);
border-radius: 10px;
background: transparent;
color: #ffb7ae;
font: inherit;
font-size: 12.5px;
font-weight: 850;
cursor: pointer;
}
.settings-billing-account-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 10px;
margin-bottom: 16px;
}
.settings-billing-account-summary > div {
min-width: 0;
padding: 11px;
border-radius: 10px;
background: rgba(255,255,255,.055);
}
.settings-billing-account-summary strong,
.settings-billing-account-summary small,
.settings-billing-account-summary em {
display: block;
}
.settings-billing-account-summary strong {
color: #fff;
font-size: 21px;
line-height: 1;
font-weight: 920;
}
.settings-billing-account-summary strong span {
color: rgba(255,255,255,.48);
font-size: 14px;
}
.settings-billing-account-summary small,
.settings-billing-account-summary em {
color: rgba(255,255,255,.58);
font-size: 11.5px;
font-style: normal;
font-weight: 750;
}
.settings-billing-account-summary small {
margin-top: 7px;
}
.settings-billing-account-actions {
margin-bottom: 16px;
}
.settings-plan-list {
display: grid;
gap: 10px;
}
.settings-plan-list {
margin-bottom: 16px;
}
.settings-plan-list article {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
width: 100%;
padding: 12px;
color: #fff;
}
.settings-plan-list article.is-current {
border-color: rgba(31,115,212,.45);
background: rgba(31,115,212,.12);
}
.settings-plan-list article.is-recommended {
border-color: rgba(17,122,85,.45);
}
.settings-plan-list strong,
.settings-plan-list span {
display: block;
}
.settings-plan-list span {
margin-top: 3px;
color: rgba(255,255,255,.6);
font-size: 12px;
font-weight: 750;
}
.settings-plan-list b {
color: #9ed7ff;
font-size: 12px;
}
.settings-plan-list button {
border: 0;
font: inherit;
cursor: pointer;
}
.settings-plan-list form {
margin: 0;
}
.settings-plan-list button {
min-height: 32px;
padding: 0 12px;
border-radius: 9px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 850;
}
.billing-market {
display: grid;
gap: 20px;
}
.billing-market .eyebrow {
margin: 0 0 7px;
color: var(--green);
font-size: 10px;
font-weight: 950;
letter-spacing: .13em;
text-transform: uppercase;
}
.billing-market-hero {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
gap: 18px;
align-items: stretch;
padding: 18px;
border-radius: 18px;
background:
radial-gradient(circle at 4% 0%, rgba(17, 122, 85, .14), transparent 36%),
linear-gradient(135deg, #f7fbf8 0%, #eef7f2 100%);
box-shadow: inset 0 0 0 1px rgba(190, 210, 199, .72);
}
.billing-market-hero-copy {
display: grid;
align-content: center;
min-width: 0;
}
.billing-market-hero h2 {
max-width: 720px;
margin: 0;
color: var(--ink);
font-size: clamp(24px, 3.2vw, 42px);
line-height: .98;
font-weight: 950;
letter-spacing: -.035em;
text-wrap: balance;
}
.billing-market-hero p:not(.eyebrow) {
max-width: 58ch;
margin: 12px 0 0;
color: #5f6d65;
font-size: 14px;
line-height: 1.45;
font-weight: 750;
}
.billing-market-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.billing-market-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 0 16px;
border: 1px solid transparent;
border-radius: 12px;
font-size: 13px;
font-weight: 900;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.billing-market-btn:hover {
transform: translateY(-1px);
}
.billing-market-btn:active {
transform: translateY(0) scale(.99);
}
.billing-market-btn.is-primary {
background: linear-gradient(180deg, #10a36d 0%, #07824f 100%);
color: #fff;
box-shadow: 0 12px 24px rgba(5, 127, 79, .18);
}
.billing-market-btn.is-primary:hover {
box-shadow: 0 15px 30px rgba(5, 127, 79, .24);
}
.billing-market-btn.is-secondary {
border-color: #dbe8e1;
background: #fff;
color: var(--ink);
}
.billing-market-btn.is-secondary:hover {
border-color: #b9d5c5;
background: #f7fbf8;
}
.billing-market-stats {
display: grid;
gap: 10px;
}
.billing-market-stats article {
min-width: 0;
padding: 14px;
border: 1px solid rgba(211, 226, 218, .92);
border-radius: 15px;
background: rgba(255,255,255,.82);
box-shadow: 0 10px 28px rgba(30, 57, 45, .06);
}
.billing-market-stats article.is-warning {
border-color: #f0d7ad;
background: #fff7e8;
}
.billing-market-stats strong,
.billing-market-stats span,
.billing-market-stats small,
.billing-market-stats a {
display: block;
}
.billing-market-stats strong {
color: var(--ink);
font-size: 21px;
line-height: 1.05;
font-weight: 950;
letter-spacing: -.02em;
}
.billing-market-stats span,
.billing-market-stats small {
margin-top: 4px;
color: #64736b;
font-size: 11.5px;
font-weight: 850;
}
.billing-market-stats a {
width: max-content;
margin-top: 10px;
color: #9b5f07;
font-size: 12px;
font-weight: 950;
text-decoration: none;
}
.billing-market-stats .ui-progress {
margin-top: 10px;
height: 7px;
}
.billing-market-section {
display: grid;
gap: 14px;
}
.billing-market-section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
}
.billing-market-section-head h3 {
margin: 0;
color: var(--ink);
font-size: 23px;
line-height: 1.08;
font-weight: 950;
letter-spacing: -.025em;
}
.billing-market-section-head p:not(.eyebrow) {
max-width: 62ch;
margin: 7px 0 0;
color: #64736b;
font-size: 13px;
font-weight: 750;
}
.billing-market-section-head a {
flex: 0 0 auto;
color: var(--green);
font-size: 12px;
font-weight: 950;
text-decoration: none;
}
.billing-plan-market {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.billing-plan-card {
position: relative;
display: grid;
grid-template-rows: auto auto auto 1fr auto;
gap: 14px;
min-width: 0;
min-height: 388px;
padding: 17px;
border: 1px solid #dbe7e0;
border-radius: 18px;
background: #fff;
box-shadow: 0 18px 38px rgba(27, 48, 39, .06);
}
.billing-plan-card.is-recommended {
border-color: #49b583;
background:
radial-gradient(circle at 100% 0%, rgba(11, 151, 94, .12), transparent 34%),
#f5fbf7;
}
.billing-plan-card.is-current {
border-color: #a8cdf8;
background:
radial-gradient(circle at 100% 0%, rgba(31, 115, 212, .12), transparent 34%),
#f3f8ff;
}
.billing-plan-topline {
min-height: 24px;
}
.billing-plan-badge {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 9px;
border-radius: 999px;
font-size: 10px;
font-weight: 950;
letter-spacing: .06em;
text-transform: uppercase;
}
.billing-plan-badge.is-recommended {
background: #0a8f5a;
color: #fff;
}
.billing-plan-badge.is-current {
background: #e6f1ff;
color: #126aa8;
}
.billing-plan-card h4 {
margin: 0;
color: var(--ink);
font-size: 20px;
line-height: 1.08;
font-weight: 950;
letter-spacing: -.02em;
}
.billing-plan-copy p {
margin: 7px 0 0;
color: #64736b;
font-size: 12.5px;
line-height: 1.36;
font-weight: 750;
}
.billing-plan-price {
color: var(--ink);
font-size: 36px;
line-height: .95;
font-weight: 950;
letter-spacing: -.04em;
font-variant-numeric: tabular-nums;
}
.billing-plan-price span {
margin-right: 2px;
font-size: 18px;
}
.billing-plan-price small {
color: #66756c;
font-size: 12px;
font-weight: 850;
letter-spacing: 0;
}
.billing-plan-card ul {
display: grid;
align-content: start;
gap: 9px;
margin: 0;
padding: 0;
list-style: none;
}
.billing-plan-card li {
position: relative;
padding-left: 20px;
color: #384a41;
font-size: 12.5px;
line-height: 1.25;
font-weight: 800;
}
.billing-plan-card li::before {
content: "";
position: absolute;
left: 0;
top: .1em;
width: 14px;
height: 14px;
border-radius: 50%;
background: #e5f6ee;
}
.billing-plan-card li::after {
content: "";
position: absolute;
left: 4px;
top: calc(.1em + 3px);
width: 5px;
height: 3px;
border-left: 2px solid #0a8f5a;
border-bottom: 2px solid #0a8f5a;
transform: rotate(-45deg);
}
.billing-plan-actions {
display: grid;
gap: 8px;
align-self: end;
}
.billing-plan-actions form {
display: block;
margin: 0;
}
.billing-plan-actions .billing-market-btn {
width: 100%;
}
.billing-plan-current {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
border: 1px solid #b8d5f8;
border-radius: 12px;
background: #fff;
color: #126aa8;
font-size: 13px;
font-weight: 950;
}
.billing-market-reassurance {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.billing-market-reassurance article {
padding: 15px;
border-radius: 16px;
background: #f4faf6;
}
.billing-market-reassurance strong {
color: var(--ink);
font-size: 14px;
font-weight: 950;
}
.billing-market-reassurance p {
margin: 6px 0 0;
color: #627168;
font-size: 12.5px;
line-height: 1.45;
font-weight: 750;
}
@media (max-width: 760px) {
.settings-modal-layer {
padding: 0;
place-items: stretch;
}
.settings-modal {
width: 100%;
max-height: none;
min-height: 100dvh;
grid-template-columns: 1fr;
border: 0;
border-radius: 0;
}
.settings-modal-sidebar {
grid-template-rows: auto auto;
padding: 12px;
border-right: 0;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.settings-modal-brand {
padding-bottom: 10px;
}
.settings-modal-nav {
display: flex;
gap: 7px;
overflow-x: auto;
padding-bottom: 2px;
}
.settings-modal-nav button {
grid-template-columns: 18px max-content;
flex: 0 0 auto;
min-height: 38px;
padding: 0 11px;
font-size: 13px;
}
.settings-modal-main {
padding: 20px 16px 110px;
}
.settings-billing-account-summary,
.settings-limits-grid {
grid-template-columns: 1fr;
}
.billing-market-hero,
.billing-plan-market,
.billing-market-reassurance {
grid-template-columns: 1fr;
}
.billing-market-section-head {
display: grid;
}
.billing-plan-card {
min-height: 0;
}
.settings-actions-split {
grid-template-columns: 1fr;
}
}
.settings-modal-backdrop {
background: rgba(18, 30, 24, .28);
backdrop-filter: blur(6px);
}
.settings-modal {
border-color: #dfe8e3;
background: #fff;
box-shadow: 0 30px 90px rgba(25, 42, 34, .18);
color: var(--ink);
}
.settings-modal-sidebar {
border-right-color: #e1e9e4;
background: #f8fbf9;
}
.settings-modal-close {
background: #edf3ef;
color: #26362f;
}
.settings-modal-close:hover {
background: #e4eee8;
}
.settings-modal-brand strong {
color: var(--ink);
}
.settings-modal-brand span {
color: #6b7770;
}
.settings-modal-nav button {
color: #5e6b64;
}
.settings-modal-nav button:hover,
.settings-modal-nav button.is-active {
background: #eaf5ef;
color: var(--green-dark);
}
.settings-modal-main {
background: #fff;
}
.settings-modal-head {
border-bottom-color: #e4ebe7;
}
.settings-modal-head .eyebrow {
color: var(--green);
}
.settings-modal-head h2,
.settings-modal-panel h2,
.settings-modal-panel h3,
.settings-readonly-note strong,
.settings-status-list strong,
.settings-safety-envelope-list strong,
.settings-ticket-list strong,
.settings-billing-account-summary strong,
.settings-plan-list article {
color: var(--ink);
}
.settings-modal-panel .eyebrow {
color: var(--green);
}
.settings-modal-panel p,
.settings-modal-panel .help-text,
.settings-readonly-note span,
.settings-status-list span,
.settings-safety-envelope-list span,
.settings-ticket-list span,
.settings-billing-account-summary small,
.settings-billing-account-summary em,
.settings-plan-list span {
color: #65736b;
}
.settings-modal-panel label,
.settings-modal-panel .account-health-label {
color: #304139;
}
.settings-modal-panel input[type="text"],
.settings-modal-panel input[type="email"],
.settings-modal-panel input[type="password"],
.settings-modal-panel input[type="url"],
.settings-modal-panel input[type="number"],
.settings-modal-panel select,
.settings-modal-panel textarea,
.settings-modal-panel .field-control {
border-color: #dfe8e3;
background: #fbfdfb;
color: var(--ink);
}
.settings-modal-panel input[readonly] {
color: #53625a;
}
.settings-modal-panel .settings-lock-field > svg {
color: #7b8981;
}
.settings-readonly-note,
.settings-safety-envelope,
.settings-status-list,
.settings-billing-account-summary,
.settings-plan-list article,
.settings-ticket-list div {
border-color: #dfe8e3;
background: #fbfdfb;
}
.settings-readonly-note.tone-danger {
border-color: #f1c2ba;
background: #fff4f2;
}
.settings-status-list div,
.settings-safety-envelope-list div,
.settings-ticket-list div,
.settings-safety-envelope-head,
.settings-divider {
border-color: #e5ece8;
}
.settings-toggle-row,
.settings-checkline,
.settings-checkbox-grid label {
color: #384a41;
}
.delete-zone {
border-color: #f1c2ba;
background: #fff7f5;
}
.btn-delete {
color: #b23a2f;
}
.settings-billing-account-summary > div {
background: #f6faf8;
}
.settings-billing-account-summary strong span {
color: #7b8981;
}
.settings-plan-list article.is-current {
border-color: #b8d5f8;
background: #f2f7ff;
}
.settings-plan-list article.is-recommended {
border-color: #b9dccb;
background: #f4fbf7;
}
.settings-plan-list b {
color: #126aa8;
}
.settings-plan-list button {
background: var(--green);
color: #fff;
}
.settings-linkedin-profile {
overflow: hidden;
margin: 0 0 18px;
border: 1px solid #dfe8e3;
border-radius: 16px;
background: #fff;
}
.settings-linkedin-cover {
height: 74px;
background:
radial-gradient(circle at 18% 0%, rgba(10, 102, 194, .22), transparent 34%),
linear-gradient(135deg, #0a66c2 0%, #117a55 100%);
}
.settings-linkedin-body {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
gap: 16px;
padding: 0 20px 18px;
}
.settings-linkedin-avatar {
display: grid;
width: 76px;
height: 76px;
place-items: center;
margin-top: -30px;
border: 4px solid #fff;
border-radius: 50%;
background: #e8f1fb;
color: #064f9d;
box-shadow: 0 10px 24px rgba(20, 42, 34, .12);
font-size: 25px;
font-weight: 950;
line-height: 1;
}
.settings-linkedin-main {
min-width: 0;
padding-top: 16px;
}
.settings-linkedin-title-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: start;
}
.settings-linkedin-title-row h3 {
margin: 0;
color: var(--ink);
font-size: 20px;
line-height: 1.14;
letter-spacing: 0;
}
.settings-linkedin-title-row p {
margin: 5px 0 0;
color: #5f6d66;
font-size: 13.5px;
font-weight: 720;
line-height: 1.35;
}
.settings-linkedin-badge {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 11px;
border: 1px solid #dfe8e3;
border-radius: 999px;
background: #f5f8f6;
color: #65736b;
font-size: 11.5px;
font-weight: 900;
white-space: nowrap;
}
.settings-linkedin-badge.is-connected {
border-color: #b9dccb;
background: #eaf8ef;
color: var(--green-dark);
}
.settings-linkedin-url {
display: inline-block;
max-width: 100%;
margin-top: 10px;
color: #0a66c2;
font-size: 13.5px;
font-weight: 850;
overflow-wrap: anywhere;
text-decoration: none;
}
.settings-linkedin-url:hover {
text-decoration: underline;
}
.settings-linkedin-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
border-top: 1px solid #e5ece8;
}
.settings-linkedin-meta div {
display: grid;
gap: 3px;
padding: 13px 20px;
}
.settings-linkedin-meta div + div {
border-left: 1px solid #e5ece8;
}
.settings-linkedin-meta span {
color: #6b7770;
font-size: 11.5px;
font-weight: 850;
}
.settings-linkedin-meta strong {
color: var(--ink);
font-size: 12.5px;
font-weight: 900;
}
.settings-linkedin-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin: 12px 0 14px;
}
.settings-modal-panel .settings-linkedin-actions form {
display: contents;
margin: 0;
}
.settings-linkedin-actions .button {
justify-self: auto;
min-height: 44px;
}
.button-warning {
border-color: #f2bf8e;
background: #fff5eb;
color: #a94f0a;
}
.button-warning:hover {
border-color: #e09a50;
background: #ffe8d3;
color: #803a05;
}
/* Compact density for the settings dialog. */
.settings-modal {
grid-template-columns: 220px minmax(0, 1fr);
width: min(900px, calc(100vw - 56px));
height: min(760px, calc(100dvh - 56px));
border-radius: 16px;
}
.settings-modal-sidebar {
padding: 12px 9px;
}
.settings-modal-close {
width: 36px;
height: 36px;
margin-bottom: 12px;
border-radius: 11px;
}
.settings-modal-close svg {
width: 18px;
height: 18px;
}
.settings-modal-brand {
gap: 9px;
padding: 0 8px 13px;
}
.settings-modal-brand img {
width: 28px;
height: 28px;
border-radius: 8px;
}
.settings-modal-brand strong {
font-size: 15px;
}
.settings-modal-brand span {
font-size: 10px;
}
.settings-modal-nav {
gap: 3px;
}
.settings-modal-nav button {
grid-template-columns: 18px minmax(0, 1fr);
gap: 9px;
min-height: 36px;
padding: 0 10px;
border-radius: 9px;
font-size: 12.5px;
}
.settings-modal-nav svg {
width: 17px;
height: 17px;
}
.settings-modal-main {
padding: 20px 22px 76px;
scroll-padding-bottom: 76px;
}
.settings-modal-head {
padding-bottom: 14px;
margin-bottom: 14px;
}
.settings-modal-head .eyebrow,
.settings-modal-panel .eyebrow {
font-size: 9.5px;
}
.settings-modal-head h2 {
font-size: 18px;
}
.settings-modal-panel {
max-width: 640px;
}
.settings-modal-panel .settings-panel-head {
margin-bottom: 16px;
}
.settings-modal-panel .settings-panel-kicker {
gap: 10px;
margin-bottom: 10px;
}
.settings-modal-panel .settings-panel-icon,
.settings-modal-panel .settings-safety-envelope-icon {
width: 34px;
height: 34px;
flex-basis: 34px;
border-radius: 10px;
}
.settings-modal-panel .settings-panel-icon svg,
.settings-modal-panel .settings-safety-envelope-icon svg {
width: 17px;
height: 17px;
}
.settings-modal-panel h2 {
font-size: 17px;
}
.settings-modal-panel h3 {
font-size: 14.5px;
}
.settings-modal-panel p,
.settings-modal-panel .help-text {
font-size: 12px;
line-height: 1.4;
}
.settings-modal-panel form {
gap: 11px;
margin-bottom: 14px;
}
.settings-modal-panel label,
.settings-modal-panel .account-health-label {
font-size: 11.5px;
}
.settings-modal-panel input[type="text"],
.settings-modal-panel input[type="email"],
.settings-modal-panel input[type="password"],
.settings-modal-panel input[type="url"],
.settings-modal-panel input[type="number"],
.settings-modal-panel select,
.settings-modal-panel textarea,
.settings-modal-panel .field-control {
min-height: 34px;
padding: 7px 9px;
border-radius: 9px;
font-size: 12px;
}
.settings-modal-panel textarea {
min-height: 92px;
}
.settings-modal-panel .button {
min-height: 34px;
padding: 0 14px;
border-radius: 10px;
font-size: 12.5px;
}
.settings-copy-row {
gap: 7px;
}
.settings-readonly-note,
.settings-safety-envelope,
.settings-billing-account-summary,
.settings-plan-list article {
border-radius: 11px;
}
.settings-readonly-note {
padding: 11px 12px;
margin-bottom: 14px;
}
.settings-linkedin-profile {
margin-bottom: 14px;
border-radius: 13px;
}
.settings-linkedin-cover {
height: 54px;
}
.settings-linkedin-body {
grid-template-columns: 58px minmax(0, 1fr);
gap: 13px;
padding: 0 16px 14px;
}
.settings-linkedin-avatar {
width: 58px;
height: 58px;
margin-top: -21px;
border-width: 3px;
font-size: 19px;
}
.settings-linkedin-main {
padding-top: 12px;
}
.settings-linkedin-title-row {
gap: 12px;
}
.settings-linkedin-title-row h3 {
font-size: 17px;
}
.settings-linkedin-title-row p,
.settings-linkedin-url {
font-size: 12px;
}
.settings-linkedin-badge {
min-height: 24px;
padding: 0 9px;
font-size: 10.5px;
}
.settings-linkedin-meta div {
padding: 10px 16px;
}
.settings-linkedin-meta span {
font-size: 10.5px;
}
.settings-linkedin-meta strong {
font-size: 11.5px;
}
.settings-linkedin-actions {
gap: 8px;
margin: 10px 0 12px;
}
.settings-linkedin-actions .button {
min-height: 38px;
}
.settings-billing-account-summary {
gap: 8px;
padding: 8px;
margin-bottom: 13px;
}
.settings-billing-account-summary > div {
padding: 9px;
}
.settings-billing-account-summary strong {
font-size: 18px;
}
.settings-billing-account-summary small,
.settings-billing-account-summary em,
.settings-plan-list span {
font-size: 11px;
}
.settings-history-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 14px;
}
.settings-history-metrics div,
.settings-empty-state {
border: 1px solid #dfe8e3;
border-radius: 11px;
background: #fbfdfb;
padding: 11px;
}
.settings-history-metrics strong,
.settings-history-metrics span,
.settings-empty-state strong,
.settings-empty-state p {
display: block;
}
.settings-history-metrics strong {
color: var(--ink);
font-size: 18px;
line-height: 1;
font-weight: 920;
}
.settings-history-metrics span {
margin-top: 5px;
color: #65736b;
font-size: 10.5px;
font-weight: 820;
}
.settings-history-list {
display: grid;
gap: 9px;
}
.settings-history-item {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr) auto;
gap: 12px;
align-items: center;
padding: 12px;
border: 1px solid #dfe8e3;
border-radius: 12px;
background: #fff;
}
.settings-history-item h3 {
margin: 6px 0 0;
color: var(--ink);
font-size: 13.5px;
}
.settings-history-item p {
margin: 4px 0 0;
font-size: 11.5px;
}
.settings-history-item dl {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
margin: 0;
}
.settings-history-item dl div {
display: grid;
gap: 2px;
min-width: 0;
}
.settings-history-item dt {
color: #748179;
font-size: 9.5px;
font-weight: 850;
}
.settings-history-item dd {
margin: 0;
color: var(--ink);
font-size: 13px;
font-weight: 900;
}
.settings-empty-state {
display: grid;
gap: 4px;
}
.settings-empty-state strong {
color: var(--ink);
font-size: 13px;
}
.settings-empty-state p {
margin: 0;
color: #65736b;
font-size: 11.5px;
}
/* Product-settings layout: closer to ChatGPT/Claude settings UX. */
.settings-modal {
grid-template-columns: 210px minmax(0, 1fr);
width: min(820px, calc(100vw - 64px));
height: min(700px, calc(100dvh - 64px));
border-radius: 14px;
}
.settings-modal-sidebar {
padding: 10px 8px;
background: #fbfdfb;
}
.settings-modal-brand {
display: none;
}
.settings-modal-close {
width: 34px;
height: 34px;
margin: 0 0 8px;
border-radius: 9px;
}
.settings-modal-nav {
gap: 1px;
}
.settings-modal-nav button {
min-height: 34px;
padding: 0 9px;
border-radius: 8px;
color: #516059;
font-size: 12.5px;
font-weight: 650;
}
.settings-modal-nav button.is-active {
background: #edf4f0;
color: #14231c;
}
.settings-modal-main {
padding: 0 18px 54px;
background: #fff;
}
.settings-modal-head {
display: none;
}
.settings-modal-panel {
max-width: none;
}
.settings-modal-panel .settings-panel-head {
min-height: 58px;
margin: 0 0 2px;
padding: 16px 0 12px;
border-bottom: 1px solid #e5ece8;
}
.settings-modal-panel .settings-panel-kicker {
display: none;
}
.settings-modal-panel h2 {
font-size: 18px;
font-weight: 650;
line-height: 1.2;
}
.settings-modal-panel .settings-panel-head p {
max-width: 58ch;
margin: 8px 0 0;
color: #6a766f;
font-size: 12px;
font-weight: 560;
}
.settings-modal-panel form {
gap: 0;
margin: 0 0 14px;
}
.settings-modal-panel .field {
gap: 7px;
padding: 12px 0;
border-bottom: 1px solid #eef2ef;
}
.settings-modal-panel label,
.settings-modal-panel .account-health-label {
color: #23342c;
font-size: 12px;
font-weight: 650;
}
.settings-modal-panel input[type="text"],
.settings-modal-panel input[type="email"],
.settings-modal-panel input[type="password"],
.settings-modal-panel input[type="url"],
.settings-modal-panel input[type="number"],
.settings-modal-panel select,
.settings-modal-panel textarea,
.settings-modal-panel .field-control {
min-height: 36px;
border-radius: 9px;
font-size: 12.5px;
}
.settings-toggle-row,
.settings-checkline,
.settings-checkbox-grid label {
min-height: 48px;
padding: 9px 0;
border-bottom: 1px solid #eef2ef;
font-size: 12.5px;
font-weight: 650;
}
.settings-checkbox-grid {
gap: 0;
padding: 6px 0;
}
.settings-modal-panel .button {
min-height: 36px;
border-radius: 9px;
font-size: 12.5px;
font-weight: 750;
}
.settings-readonly-note,
.settings-safety-envelope,
.settings-billing-account-summary,
.settings-plan-list article,
.settings-history-metrics div,
.settings-history-item,
.settings-empty-state {
border-radius: 10px;
box-shadow: none;
}
.settings-linkedin-profile {
margin-top: 14px;
border-radius: 10px;
}
.settings-linkedin-cover {
height: 42px;
}
.settings-linkedin-body {
grid-template-columns: 48px minmax(0, 1fr);
gap: 12px;
padding: 0 14px 12px;
}
.settings-linkedin-avatar {
width: 48px;
height: 48px;
margin-top: -17px;
font-size: 17px;
}
.settings-linkedin-main {
padding-top: 10px;
}
.settings-linkedin-title-row h3 {
font-size: 15.5px;
font-weight: 720;
}
.settings-linkedin-title-row p,
.settings-linkedin-url {
font-size: 11.5px;
}
.settings-linkedin-meta div {
padding: 9px 14px;
}
.extension-setup {
margin-top: 14px;
}
.settings-connect-box {
display: grid;
gap: 8px;
margin: 0 0 14px;
}
.settings-connect-box .button {
width: fit-content;
}
.settings-connect-box .button span {
display: inline-grid;
width: 22px;
height: 22px;
margin-right: 8px;
place-items: center;
}
.settings-connect-box svg {
width: 16px;
height: 16px;
}
.settings-connect-status,
.settings-connect-install {
margin: 0;
color: #66736c;
font-size: 12px;
font-weight: 650;
}
.settings-connect-status[data-state="ready"],
.settings-connect-status[data-state="pending"] {
color: #08784f;
}
.settings-connect-status[data-state="error"],
.settings-connect-status[data-state="claimed"] {
color: #9a4314;
}
.account-health-connect {
margin: 0 0 10px;
font-size: 13px;
}
.settings-history-item {
grid-template-columns: minmax(0, 1fr) minmax(220px, .85fr) auto;
padding: 10px;
}
@media (max-width: 760px) {
.settings-modal-layer {
padding: 0;
place-items: stretch;
}
.settings-modal {
width: 100%;
height: 100dvh;
max-height: none;
grid-template-columns: 1fr;
border: 0;
border-radius: 0;
}
.settings-modal-sidebar {
grid-template-rows: auto auto;
padding: 11px;
border-right: 0;
border-bottom-color: #e1e9e4;
}
.settings-modal-brand {
padding-bottom: 9px;
}
.settings-modal-nav {
display: flex;
gap: 6px;
overflow-x: auto;
padding-bottom: 2px;
}
.settings-modal-nav button {
grid-template-columns: 17px max-content;
flex: 0 0 auto;
min-height: 36px;
padding: 0 10px;
}
.settings-modal-main {
padding: 18px 14px 108px;
}
.settings-billing-account-summary,
.settings-limits-grid,
.settings-history-metrics,
.settings-history-item,
.settings-history-item dl {
grid-template-columns: 1fr;
}
.settings-linkedin-body,
.settings-linkedin-title-row,
.settings-linkedin-meta {
grid-template-columns: 1fr;
}
.settings-linkedin-avatar {
margin-bottom: -6px;
}
.settings-linkedin-meta div + div {
border-left: 0;
border-top: 1px solid #e5ece8;
}
.settings-linkedin-actions {
display: grid;
grid-template-columns: 1fr;
}
.settings-linkedin-actions .button {
width: 100%;
}
}
.billing-help-open { overflow: hidden; }
.billing-help-layer[hidden] { display: none; }
.billing-help-layer {
position: fixed;
inset: 0;
z-index: 125;
display: grid;
justify-items: end;
}
.billing-help-backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(9, 20, 15, .32);
cursor: pointer;
}
.billing-help-drawer {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(480px, 100%);
min-height: 100vh;
padding: 0;
border-left: 1px solid #dfe8e3;
background: #fff;
box-shadow: -28px 0 80px rgba(12, 32, 20, .16);
overflow: hidden;
}
.billing-help-grip { display: none; }
.billing-help-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 26px 28px 22px;
border-bottom: 1px solid #e5ece7;
}
.billing-help-head p {
margin: 0 0 8px;
color: var(--green);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .02em;
}
.billing-help-head h2 {
margin: 0;
color: #102018;
font-size: 28px;
line-height: 1.1;
letter-spacing: 0;
}
.billing-help-close {
display: grid;
width: 44px;
height: 44px;
flex: 0 0 44px;
place-items: center;
border: 1px solid #dfe8e3;
border-radius: 12px;
background: #fff;
color: #16241d;
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.billing-help-form {
display: grid;
gap: 12px;
margin-top: 24px;
}
.billing-help-form label {
color: #233129;
font-size: 13px;
font-weight: 850;
}
.billing-help-form textarea {
min-height: 150px;
resize: vertical;
padding: 14px;
border: 1px solid #dfe8e3;
border-radius: 8px;
color: #16231d;
font: inherit;
font-size: 14px;
line-height: 1.45;
}
.billing-help-form textarea:focus {
border-color: rgba(17, 122, 85, .55);
box-shadow: 0 0 0 3px rgba(17, 122, 85, .11);
outline: none;
}
.billing-help-note {
display: grid;
gap: 6px;
margin-top: 18px;
padding: 16px;
border-radius: 8px;
background: #f1f8f4;
color: #5b6861;
font-size: 13px;
line-height: 1.45;
}
.billing-help-note strong { color: #12231b; }
/* Notifications */
.coach-trigger {
position: relative;
display: grid;
width: 40px;
height: 40px;
flex: 0 0 40px;
place-items: center;
border: 1px solid #dfe8e3;
border-radius: 8px;
background: #fff;
color: #25322c;
cursor: pointer;
}
.coach-trigger:hover { border-color: #b8d7c5; color: var(--green); }
.coach-trigger > span {
position: absolute;
top: -6px;
right: -6px;
display: grid;
min-width: 19px;
height: 19px;
padding: 0 5px;
place-items: center;
border: 2px solid #fff;
border-radius: 10px;
background: #d83b32;
color: #fff;
font-size: 10px;
font-weight: 900;
}
.coach-trigger.has-urgent > span { background: #c93428; }
.coach-open { overflow: hidden; }
.coach-layer[hidden] { display: none; }
.coach-layer { position: fixed; inset: 0; z-index: 130; display: grid; justify-items: end; }
.coach-backdrop { position: absolute; inset: 0; border: 0; background: rgba(9,20,15,.34); cursor: pointer; }
.coach-drawer {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(500px, 100%);
height: 100dvh;
border: 0;
background: #f7faf8;
box-shadow: -24px 0 70px rgba(12, 32, 20, .14);
overflow: hidden;
}
.coach-grip { display: none; }
.coach-head {
position: relative;
display: grid;
align-items: center;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 14px;
padding: 24px 24px 22px;
border: 0;
background:
radial-gradient(circle at 10% 0%, rgba(53, 191, 114, .14), transparent 36%),
radial-gradient(circle at 88% 100%, rgba(57, 120, 246, .09), transparent 32%),
#fff;
}
.coach-head-icon {
display: grid;
width: 58px;
height: 58px;
flex: 0 0 auto;
place-items: center;
border-radius: 18px;
background: #effaf4;
box-shadow:
0 12px 26px rgba(37, 134, 83, .12),
inset 0 1px 0 rgba(255, 255, 255, .92);
}
.coach-head-icon img {
width: 52px;
height: 52px;
object-fit: contain;
filter: drop-shadow(0 7px 9px rgba(30, 90, 58, .12));
transition: transform .28s cubic-bezier(.2, .72, .25, 1);
}
.coach-head:hover .coach-head-icon img {
transform: translateY(-2px) rotate(-3deg) scale(1.04);
}
.coach-head-copy {
display: grid;
min-width: 0;
gap: 4px;
}
.coach-head p {
margin: 0;
color: #69766f;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
}
.coach-head h2 {
margin: 0;
color: #102018;
font-size: 26px;
line-height: 1.05;
letter-spacing: -.035em;
}
.coach-close {
display: grid;
width: 46px;
height: 46px;
flex: 0 0 46px;
place-items: center;
border: 0;
border-radius: 15px;
background: rgba(255, 255, 255, .8);
color: #16241d;
cursor: pointer;
box-shadow: 0 7px 20px rgba(20, 48, 33, .07);
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.coach-close:hover {
background: #edf7f1;
color: var(--green-dark);
transform: rotate(3deg);
}
.coach-close:active {
transform: scale(.96);
}
.coach-close svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2.8;
stroke-linecap: round;
}
.coach-content {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
background:
radial-gradient(circle at 100% 12%, rgba(57, 120, 246, .05), transparent 28%),
#f7faf8;
}
.coach-tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
margin: 18px 24px 0;
padding: 5px;
border: 0;
border-radius: 14px;
background: #eaf2ed;
}
.coach-tabs button {
min-height: 42px;
border: 0;
border-radius: 10px;
background: transparent;
color: #64726a;
font: inherit;
font-size: 12.5px;
font-weight: 780;
cursor: pointer;
transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.coach-tabs button:hover {
color: var(--green-dark);
transform: translateY(-1px);
}
.coach-tabs button.is-active {
background: #fff;
color: var(--green-dark);
box-shadow: 0 8px 20px rgba(28, 65, 44, .08);
}
.coach-tabs button:focus-visible,
.coach-item:focus-visible,
.coach-close:focus-visible,
.coach-activity-link:focus-visible {
outline: 3px solid rgba(57, 120, 246, .24);
outline-offset: 2px;
}
.coach-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 26px 9px;
color: #69766f;
font-size: 12.5px;
font-weight: 780;
}
.coach-toolbar button,
.coach-text-action,
.coach-detail-actions button,
.coach-back {
border: 0;
background: transparent;
color: var(--green-dark);
font: inherit;
font-weight: 850;
cursor: pointer;
}
.coach-toolbar button:hover,
.coach-text-action:hover,
.coach-detail-actions button:hover,
.coach-back:hover {
color: var(--green);
}
.coach-list {
display: grid;
gap: 10px;
padding: 7px 20px 20px;
}
.coach-item {
--coach-surface: #fff;
--coach-unread-surface: #f2f7f4;
--coach-accent: #258653;
position: relative;
display: grid;
min-width: 0;
width: 100%;
align-items: center;
grid-template-columns: 58px minmax(0, 1fr) 18px;
gap: 12px;
padding: 12px 13px 12px 11px;
border: 0;
border-radius: 18px;
background: var(--coach-surface);
color: #17231d;
text-align: left;
cursor: pointer;
box-shadow:
0 10px 26px rgba(23, 58, 39, .055),
inset 0 1px 0 rgba(255, 255, 255, .78);
transition: box-shadow .22s ease, transform .22s ease;
animation: coachRowIn .42s cubic-bezier(.2, .72, .25, 1) both;
animation-delay: var(--coach-delay, 0ms);
}
.coach-item:first-child { border: 0; }
.coach-item:hover {
background: #f9fbfa;
box-shadow:
0 16px 32px rgba(23, 58, 39, .095),
inset 0 1px 0 rgba(255, 255, 255, .92);
transform: translateY(-2px);
}
.coach-item.is-unread::before {
position: absolute;
z-index: 2;
top: 9px;
left: 9px;
width: 9px;
height: 9px;
border: 2px solid #fff;
border-radius: 50%;
background: var(--coach-accent);
box-shadow: 0 3px 8px color-mix(in srgb, var(--coach-accent) 32%, transparent);
content: "";
}
.coach-item.is-unread {
padding-left: 11px;
background: var(--coach-unread-surface);
}
.coach-item.is-unread:hover {
background: var(--coach-unread-surface);
}
.coach-item.is-read {
background: #fff;
box-shadow:
0 4px 14px rgba(23, 58, 39, .035),
inset 0 1px 0 rgba(255, 255, 255, .9);
}
.coach-item.is-read .coach-topic,
.coach-item.is-read .coach-item-arrow {
color: #7c8881;
}
.coach-item.tone-green { --coach-unread-surface: #eff9f3; --coach-accent: #2eb96d; }
.coach-item.tone-blue { --coach-unread-surface: #f0f5ff; --coach-accent: #3978f6; }
.coach-item.tone-cyan { --coach-unread-surface: #eefafd; --coach-accent: #35b8e8; }
.coach-item.tone-orange { --coach-unread-surface: #fff6eb; --coach-accent: #f59a2b; }
.coach-item.tone-purple { --coach-unread-surface: #f5f1ff; --coach-accent: #7657e7; }
.coach-item.tone-rose { --coach-unread-surface: #fff1f6; --coach-accent: #e76494; }
.coach-item.tone-red { --coach-unread-surface: #fff0f1; --coach-accent: #e45161; }
.coach-item.tone-mint { --coach-unread-surface: #eef9f5; --coach-accent: #119f72; }
.coach-item-icon,
.coach-detail-icon,
.coach-empty-icon,
.coach-activity-icon {
display: grid;
place-items: center;
overflow: hidden;
background: rgba(255, 255, 255, .84);
box-shadow:
0 9px 20px rgba(30, 64, 47, .09),
inset 0 1px 0 #fff;
}
.coach-item-icon {
width: 58px;
height: 58px;
border-radius: 17px;
}
.coach-item-icon img {
width: 52px;
height: 52px;
object-fit: contain;
filter: drop-shadow(0 7px 9px rgba(25, 74, 45, .12));
transition: transform .26s cubic-bezier(.2, .72, .25, 1);
}
.coach-item:hover .coach-item-icon img {
transform: translateY(-2px) rotate(-3deg) scale(1.06);
}
.coach-item-copy {
display: grid;
min-width: 0;
gap: 5px;
}
.coach-item-meta {
display: flex;
min-width: 0;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.coach-item-meta time {
flex: 0 0 auto;
color: #85918a;
font-size: 9.5px;
font-weight: 720;
white-space: nowrap;
}
.coach-item strong {
color: var(--ink);
font-size: 13.5px;
font-weight: 860;
line-height: 1.28;
text-wrap: pretty;
}
.coach-item-body {
display: -webkit-box;
overflow: hidden;
color: #5f6c65;
font-size: 11.5px;
line-height: 1.4;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.coach-topic {
overflow: hidden;
color: var(--coach-accent, #5f796b);
font-size: 9px;
font-weight: 850;
letter-spacing: .055em;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.coach-item-arrow {
display: grid;
width: 18px;
height: 30px;
place-items: center;
color: color-mix(in srgb, var(--coach-accent) 72%, #6b776f);
opacity: .7;
transition: opacity .2s ease, transform .2s ease;
}
.coach-item-arrow svg,
.coach-activity-link b svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.coach-item:hover .coach-item-arrow {
opacity: 1;
transform: translateX(2px);
}
.coach-empty {
display: grid;
justify-items: center;
gap: 9px;
margin: 8px 4px 0;
padding: 34px 22px 38px;
border: 0;
border-radius: 22px;
background:
radial-gradient(circle at 50% 12%, rgba(57, 120, 246, .1), transparent 32%),
#f1f7f4;
text-align: center;
}
.coach-empty-icon {
width: 82px;
height: 82px;
margin-bottom: 3px;
border-radius: 24px;
}
.coach-empty-icon img {
width: 76px;
height: 76px;
object-fit: contain;
filter: drop-shadow(0 10px 14px rgba(34, 78, 52, .13));
}
.coach-activity-link {
position: relative;
display: grid;
min-width: 0;
align-items: center;
grid-template-columns: 46px minmax(0, 1fr) 20px;
gap: 11px;
margin: 0 20px 24px;
padding: 11px 13px 11px 10px;
border: 0;
border-radius: 17px;
background: #edf5ff;
color: var(--ink);
text-decoration: none;
box-shadow: 0 10px 24px rgba(45, 87, 145, .08);
transition: box-shadow .2s ease, transform .2s ease;
}
.coach-activity-link:hover {
box-shadow: 0 15px 30px rgba(45, 87, 145, .13);
transform: translateY(-2px);
}
.coach-activity-icon {
width: 46px;
height: 46px;
border-radius: 14px;
}
.coach-activity-icon img {
width: 42px;
height: 42px;
object-fit: contain;
}
.coach-activity-copy {
display: grid;
min-width: 0;
gap: 2px;
}
.coach-activity-copy strong {
font-size: 12.5px;
font-weight: 840;
}
.coach-activity-copy small {
color: #748078;
font-size: 10.5px;
}
.coach-activity-link b {
display: grid;
place-items: center;
color: var(--green-dark);
transition: transform .2s ease;
}
.coach-activity-link:hover b {
transform: translateX(2px);
}
.coach-empty strong {
color: var(--ink);
font-size: 16px;
font-weight: 900;
}
.coach-empty p {
max-width: 300px;
margin: 0;
color: #69766f;
font-size: 14px;
line-height: 1.5;
}
.coach-detail {
--coach-detail-surface: #eef7f2;
--coach-detail-accent: #258653;
display: grid;
gap: 15px;
padding: 22px 28px 28px;
}
.coach-detail.tone-green { --coach-detail-surface: #eff9f3; --coach-detail-accent: #2eb96d; }
.coach-detail.tone-blue { --coach-detail-surface: #f0f5ff; --coach-detail-accent: #3978f6; }
.coach-detail.tone-cyan { --coach-detail-surface: #eefafd; --coach-detail-accent: #35b8e8; }
.coach-detail.tone-orange { --coach-detail-surface: #fff6eb; --coach-detail-accent: #f59a2b; }
.coach-detail.tone-purple { --coach-detail-surface: #f5f1ff; --coach-detail-accent: #7657e7; }
.coach-detail.tone-rose { --coach-detail-surface: #fff1f6; --coach-detail-accent: #e76494; }
.coach-detail.tone-red { --coach-detail-surface: #fff0f1; --coach-detail-accent: #e45161; }
.coach-detail.tone-mint { --coach-detail-surface: #eef9f5; --coach-detail-accent: #119f72; }
.coach-detail-hero {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 18px;
background: var(--coach-detail-surface);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
}
.coach-detail-icon {
width: 62px;
height: 62px;
flex: 0 0 auto;
border-radius: 18px;
}
.coach-detail-icon img {
width: 56px;
height: 56px;
object-fit: contain;
filter: drop-shadow(0 8px 10px rgba(30, 70, 46, .12));
}
.coach-detail-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
}
.coach-detail .coach-topic {
color: var(--coach-detail-accent);
}
@keyframes coachRowIn {
from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); }
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.coach-item {
animation: none;
}
.coach-head-icon img,
.coach-item,
.coach-item-icon img,
.coach-item-arrow,
.coach-activity-link,
.coach-activity-link b {
transition: none;
}
}
.coach-back {
width: fit-content;
min-height: 36px;
padding: 0 12px;
border: 1px solid #dfe8e3;
border-radius: 999px;
background: #fff;
color: #4e5a54;
font-size: 13px;
}
.coach-detail h3 {
margin: 2px 0 0;
color: var(--ink);
font-size: 22px;
line-height: 1.16;
letter-spacing: 0;
}
.coach-detail > p {
margin: 0;
color: #526059;
font-size: 14px;
line-height: 1.6;
}
.coach-priority {
width: fit-content;
padding: 5px 9px;
border-radius: 999px;
background: #edf7f1;
color: var(--green-dark);
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
}
.coach-priority.p0 { background: #fff0ee; color: #b72e24; }
.coach-evidence {
padding: 16px;
border: 1px solid #dce9e1;
border-radius: 14px;
background: #f7faf8;
}
.coach-evidence p { margin: 6px 0; color: #526059; }
.coach-evidence span { color: #7b8881; font-size: 12px; }
.coach-detail form { margin: 0; }
.coach-detail .ui-btn {
width: 100%;
min-height: 42px;
border-radius: 999px;
font-size: 13px;
box-shadow: none;
}
.coach-detail .ui-btn-primary {
border-color: #0b8f5a;
background: #0b8f5a;
color: #fff;
}
.coach-detail .ui-btn-primary:hover {
border-color: #08784c;
background: #08784c;
}
.coach-detail-actions {
display: flex;
gap: 14px;
padding-top: 14px;
border-top: 1px solid #e8eee9;
}
.coach-detail-actions button,
.coach-text-action,
.coach-back {
display: inline-flex;
min-height: 34px;
align-items: center;
justify-content: center;
padding: 0 13px;
border: 1px solid #d9dfdc;
border-radius: 999px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 850;
line-height: 1;
text-decoration: none;
white-space: nowrap;
box-shadow: none;
}
.coach-detail-actions button:hover,
.coach-text-action:hover,
.coach-back:hover {
border-color: #c8d0cc;
background: #f4f6f5;
color: var(--ink);
}
.coach-loading {
padding: 60px 24px;
color: #69766f;
text-align: center;
}
.coach-inline { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 18px clamp(20px,4vw,52px) 0; padding: 15px 18px; border: 1px solid #cfe7d8; border-radius: 8px; background: #edf8f1; }
.coach-inline-p0 { border-color: #efc3bd; background: #fff3f1; }
.coach-inline p { margin: 3px 0 0; color: #5b6861; font-size: 13px; }
.coach-inline button { flex: 0 0 auto; border: 0; background: transparent; color: var(--green-dark); font-weight: 850; cursor: pointer; }
.campaign-coach-rules { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.campaign-coach-rules strong { width: 100%; color: var(--green-dark); font-size: 11px; text-transform: uppercase; }
.campaign-coach-rules span { padding: 5px 8px; border-radius: 6px; background: var(--green-soft); color: var(--green-dark); font-size: 11px; font-weight: 750; }
.support-messenger {
display: flex;
flex: 1 1 auto;
min-height: 0;
padding: 0;
}
.support-ticket-list,
.support-new-form,
.support-thread {
width: 100%;
min-height: 0;
}
.support-new-form[hidden],
.support-thread[hidden],
.support-ticket-list[hidden] {
display: none;
}
.support-ticket-list {
display: flex;
flex-direction: column;
gap: 12px;
padding: 22px 28px 28px;
}
.support-messenger-intro {
display: grid;
gap: 4px;
margin-bottom: 4px;
padding: 16px;
border: 1px solid #dfe8e3;
border-radius: 14px;
background: #f7faf8;
}
.support-messenger-intro strong {
color: var(--ink);
font-size: 14px;
font-weight: 850;
}
.support-messenger-intro span {
color: var(--muted);
font-size: 13px;
line-height: 1.4;
}
.support-primary-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 18px;
border: 0;
border-radius: 12px;
background: var(--green-gradient);
color: #fff;
font: inherit;
font-size: 14px;
font-weight: 850;
text-decoration: none;
cursor: pointer;
box-shadow: 0 12px 24px rgba(5, 114, 69, .14);
}
.support-primary-action:hover { background: var(--green-gradient-hover); }
.support-empty {
margin: 8px 0 0;
padding: 18px;
border: 1px dashed #d6e0da;
border-radius: 14px;
color: #66736c;
font-size: 14px;
text-align: center;
}
.support-ticket-row {
position: relative;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 66px;
padding: 14px 44px 14px 16px;
border: 1px solid #e1e9e4;
border-radius: 14px;
background: #fff;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.support-ticket-row:hover {
border-color: #c7d9ce;
background: #fbfdfb;
box-shadow: 0 10px 24px rgba(20,35,28,.05);
}
.support-ticket-copy {
display: grid;
gap: 3px;
min-width: 0;
}
.support-ticket-copy strong {
overflow: hidden;
color: var(--ink);
font-size: 14px;
font-weight: 850;
text-overflow: ellipsis;
white-space: nowrap;
}
.support-ticket-copy small {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.support-ticket-row b {
position: absolute;
top: 50%;
right: 14px;
display: grid;
min-width: 22px;
height: 22px;
padding: 0 6px;
place-items: center;
transform: translateY(-50%);
border-radius: 999px;
background: var(--green);
color: #fff;
font-size: 10px;
font-weight: 900;
}
.support-back {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
min-height: 36px;
padding: 0 12px;
border: 1px solid #dfe8e3;
border-radius: 999px;
background: #fff;
color: #4e5a54;
font: inherit;
font-size: 13px;
font-weight: 800;
cursor: pointer;
}
.support-back:hover {
border-color: #bfd4c7;
color: var(--green-dark);
}
.support-thread {
display: flex;
flex-direction: column;
gap: 14px;
padding: 22px 28px 24px;
}
.support-thread-messages {
display: flex;
flex: 1 1 auto;
min-height: 220px;
gap: 10px;
flex-direction: column;
overflow-y: auto;
padding: 2px 2px 8px;
}
.support-bubble {
max-width: 86%;
padding: 12px 14px;
border: 1px solid #e4ebe6;
border-radius: 14px 14px 14px 4px;
background: #f6f8f7;
color: var(--ink);
}
.support-bubble.user {
align-self: flex-end;
border-color: #c9e6d4;
border-radius: 14px 14px 4px 14px;
background: var(--green-soft);
}
.support-bubble.sending { opacity: .55; }
.support-bubble strong {
display: block;
color: #506058;
font-size: 11px;
font-weight: 850;
}
.support-bubble p {
margin: 4px 0 0;
color: #1d2c24;
font-size: 13.5px;
line-height: 1.45;
white-space: pre-wrap;
}
.support-compose,
.support-new-form {
display: grid;
gap: 12px;
}
.support-compose {
padding-top: 14px;
border-top: 1px solid #e6ede8;
}
.support-new-form {
padding: 22px 28px 28px;
}
.support-thread textarea,
.support-new-form textarea,
.support-new-form input,
.support-new-form select {
width: 100%;
min-height: 48px;
padding: 13px 14px;
border: 1px solid #dce5df;
border-radius: 12px;
background: #fff;
color: var(--ink);
font: inherit;
font-size: 14px;
outline: none;
}
.support-thread textarea:focus,
.support-new-form textarea:focus,
.support-new-form input:focus,
.support-new-form select:focus {
border-color: rgba(17, 122, 85, .5);
box-shadow: 0 0 0 3px rgba(17, 122, 85, .1);
}
.support-thread textarea,
.support-new-form textarea {
min-height: 118px;
resize: vertical;
}
.support-compose-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.support-attach {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
color: var(--muted);
font-size: 12.5px;
font-weight: 750;
}
.support-attach input {
max-width: 190px;
color: #617068;
font-size: 12px;
}
.support-send {
min-width: 96px;
}
.support-bubble a {
display: block;
margin-top: 8px;
color: var(--green-dark);
font-weight: 800;
}
.support-bubble.failed {
border-color: #d79a91;
background: #fff3f1;
}
.launch-skip:hover { color: var(--ink); }
@media (max-width: 560px) {
.launch-card { padding: 36px 24px 28px; }
.launch-title { font-size: 20px; }
}
@media (max-width: 1180px) {
.ui-app-frame { grid-template-columns: 1fr; }
.ui-sidebar {
position: static;
height: auto;
border-right: 0;
border-bottom: 1px solid #e7ece8;
}
.ui-sidebar-section { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 20px; }
.ui-sidebar-label,
.ui-sidebar-bottom { display: none; }
.billing-top-summary,
.billing-workspace { grid-template-columns: 1fr; }
.billing-metrics,
.billing-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.ui-topbar {
justify-content: space-between;
padding: 10px 16px;
gap: 10px;
}
.ui-topbar-link,
.ui-topbar-icon { display: none; }
.billing-screen .ui-topbar-link { display: inline-flex; }
.ui-account-menu { padding-left: 0; border-left: 0; }
.ui-page { padding: 24px 16px 40px; }
.ui-sidebar { padding: 14px 16px; }
.ui-sidebar-brand { font-size: 24px; }
.ui-sidebar-section,
.billing-metrics,
.billing-plans { grid-template-columns: 1fr; }
.ui-nav-item { min-height: 42px; }
.billing-top-summary { min-height: auto; }
.billing-summary-lead,
.billing-summary-cell,
.billing-summary-cta { padding: 22px; border-left: 0; border-top: 1px solid #e3ebe6; }
.billing-summary-lead { border-top: 0; }
.ui-alert {
grid-template-columns: 1fr;
padding: 18px;
}
.ui-alert-actions { display: grid; gap: 10px; }
.billing-section-head { align-items: stretch; flex-direction: column; }
.billing-plan { min-height: auto; }
.billing-identity-strip { align-items: start; flex-direction: column; padding: 16px; }
.billing-identity-strip a { margin-left: 0; }
.billing-help-layer {
align-items: end;
justify-items: stretch;
}
.billing-help-drawer {
width: 100%;
min-height: 100vh;
max-height: 100vh;
padding: 0;
border-left: 0;
border-radius: 0;
box-shadow: none;
}
.billing-help-grip {
display: none;
}
.billing-help-head {
padding: 18px 18px 16px;
}
.billing-help-head h2 { font-size: 24px; }
.billing-help-close {
width: 40px;
height: 40px;
flex-basis: 40px;
font-size: 26px;
}
.support-ticket-list,
.support-thread,
.support-new-form {
padding: 18px;
}
.support-compose-actions {
align-items: stretch;
flex-direction: column;
}
.support-attach {
display: grid;
gap: 7px;
}
.support-attach input {
max-width: 100%;
}
.support-primary-action,
.support-send {
width: 100%;
}
.support-thread-messages {
min-height: 260px;
}
.coach-layer { align-items: end; justify-items: stretch; }
.coach-drawer {
width: 100%;
height: 100dvh;
border-left: 0;
border-radius: 0;
box-shadow: none;
}
.coach-grip { display: none; }
.coach-head {
gap: 11px;
padding: 16px 18px 15px;
}
.coach-head-icon {
width: 50px;
height: 50px;
border-radius: 15px;
}
.coach-head-icon img {
width: 45px;
height: 45px;
}
.coach-head h2 {
font-size: 23px;
}
.coach-close {
width: 40px;
height: 40px;
flex-basis: 40px;
}
.coach-content { height: auto; }
.coach-tabs {
margin: 14px 18px 0;
}
.coach-toolbar {
padding: 14px 18px 8px;
}
.coach-list,
.coach-detail {
padding: 8px 18px 22px;
}
.coach-list {
gap: 9px;
}
.coach-item {
grid-template-columns: 50px minmax(0, 1fr) 16px;
gap: 10px;
padding: 10px 11px 10px 9px;
border-radius: 16px;
}
.coach-item.is-unread {
padding-left: 9px;
}
.coach-item-icon {
width: 50px;
height: 50px;
border-radius: 15px;
}
.coach-item-icon img {
width: 45px;
height: 45px;
}
.coach-empty {
margin: 16px 18px 0;
padding: 34px 18px;
}
.coach-detail-actions {
align-items: stretch;
flex-direction: column;
}
.coach-inline { align-items: flex-start; flex-direction: column; margin-inline: 16px; }
}
@media (max-width: 1100px) {
.onboarding-card {
grid-template-columns: 1fr;
gap: 26px;
}
.onboarding-head p,
.onboarding-help-callout {
max-width: none;
}
}
@media (max-width: 820px) {
.kipdo-focus-body {
background: #fff;
}
.kipdo-focus-topbar {
min-height: 94px;
padding: 0 12px;
}
.kipdo-focus-brand {
gap: 9px;
}
.kipdo-focus-brand img,
.kipdo-focus-topbar .onboarding-brand img {
width: 132px;
height: auto;
border-radius: 0;
}
.kipdo-focus-brand .brand-mascot,
.kipdo-focus-topbar .onboarding-brand .brand-mascot {
width: 36px;
height: 36px;
border-radius: 10px;
}
.kipdo-focus-brand .brand-wordmark,
.kipdo-focus-topbar .onboarding-brand .brand-wordmark {
width: auto;
height: 29px;
}
.kipdo-focus-brand span {
font-size: 30px;
}
.onboarding-shell {
width: calc(100% - 14px);
padding: 0 0 26px;
}
.onboarding-experience.kipdo-panel {
gap: 0;
overflow: visible;
border: 0;
background: transparent;
box-shadow: none;
}
.kipdo-panel-top,
.onboarding-card {
border: 1px solid #e0e6eb;
border-radius: 6px;
background: rgba(255, 255, 255, .96);
box-shadow: 0 6px 18px rgba(20, 35, 28, .04);
}
.kipdo-panel-top {
padding: 20px 18px 22px;
}
.onboarding-experience.kipdo-panel .kipdo-panel-top {
display: none;
}
.onboarding-hero {
padding: 0;
}
.onboarding-hero .eyebrow,
.onboarding-head > span {
font-size: 12px;
}
.onboarding-hero h1 {
margin: 8px 0 6px;
font-size: 22px;
line-height: 1.15;
letter-spacing: 0;
}
.onboarding-hero > p:not(.eyebrow) {
font-size: 15px;
line-height: 1.42;
}
.onboarding-progress {
margin-top: 24px;
overflow: visible;
}
.onboarding-progress ol {
min-width: 0;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.onboarding-progress li,
.onboarding-step-link {
gap: 7px;
}
.onboarding-progress li:not(:last-child)::after {
top: 18px;
left: calc(50% + 20px);
width: calc(100% - 40px);
background: repeating-linear-gradient(90deg, #dce4df 0 4px, transparent 4px 10px);
}
.onboarding-step-number {
width: 36px;
height: 36px;
border-width: 1.5px;
font-size: 16px;
}
.onboarding-progress li.is-current .onboarding-step-number {
box-shadow: 0 4px 10px rgba(17, 122, 85, .2);
}
.onboarding-progress li strong {
overflow-wrap: normal;
white-space: nowrap;
font-size: 11px;
line-height: 1.15;
}
.onboarding-progress li small {
display: none;
}
.onboarding-card {
grid-template-columns: 1fr;
gap: 16px;
padding: 22px 18px 22px;
}
.onboarding-head {
position: static;
}
.mobile-onboarding-back {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin: -4px 0 12px;
border: 1px solid #dfe6e1;
border-radius: 999px;
background: #fff;
color: #0f172a;
box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}
.mobile-onboarding-back svg {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 2.4;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.onboarding-head h2 {
margin: 8px 0 9px;
font-size: 22px;
line-height: 1.14;
}
.onboarding-head p {
font-size: 15px;
line-height: 1.45;
}
.onboarding-help-callout {
grid-template-columns: 18px minmax(0, 1fr) 18px;
gap: 12px;
margin-top: 18px;
padding: 13px 14px;
font-size: 13px;
}
.onboarding-help-callout svg {
width: 17px;
height: 17px;
}
.onboarding-help-overlay {
background: rgba(5, 11, 24, .42);
}
.onboarding-help-drawer {
top: auto;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: auto;
max-height: min(86dvh, 720px);
border-top: 1px solid #dfe6e1;
border-left: 0;
border-radius: 18px 18px 0 0;
box-shadow: 0 -18px 45px rgba(18, 36, 28, .18);
transform: translateY(104%);
overflow: hidden;
}
.onboarding-help-drawer.is-open {
transform: translateY(0);
}
.onboarding-help-drawer::before {
content: "";
position: absolute;
top: 8px;
left: 50%;
width: 44px;
height: 4px;
border-radius: 999px;
background: #d8e1dc;
transform: translateX(-50%);
}
.onboarding-help-drawer-head {
position: sticky;
top: 0;
z-index: 2;
padding: 24px 18px 14px;
border-radius: 18px 18px 0 0;
}
.onboarding-help-drawer-head h3 {
font-size: 20px;
}
.onboarding-help-close {
width: 34px;
height: 34px;
flex-basis: 34px;
}
.onboarding-help-drawer-body {
max-height: calc(min(86dvh, 720px) - 91px);
padding: 18px 18px calc(26px + env(safe-area-inset-bottom));
}
.onboarding-help-lead {
font-size: 14px;
}
.onboarding-help-note {
margin: 14px 0;
padding: 12px;
}
.onboarding-help-section {
padding: 15px 0;
}
.onboarding-help-section h4 {
font-size: 15px;
}
.onboarding-help-section li {
font-size: 13px;
}
.onboarding-card .field {
gap: 6px;
margin-bottom: 15px;
}
.onboarding-card .field label {
font-size: 12.5px;
}
.onboarding-card .field-control {
min-height: 44px;
padding: 9px 12px;
border-width: 1px;
font-size: 14px;
}
.onboarding-card .has-field-icon .field-control {
padding-left: 43px;
}
.onboarding-card .has-password-toggle .field-control {
padding-right: 42px;
}
.field-input-icon {
left: 14px;
width: 16px;
height: 16px;
}
.field-password-toggle {
right: 7px;
width: 32px;
height: 32px;
}
.field-password-toggle svg {
width: 18px;
height: 18px;
}
.onboarding-card .field small {
font-size: 12px;
}
.onboarding-actions {
margin-top: 22px;
}
.onboarding-actions .button {
min-height: 48px;
border-radius: 6px;
font-size: 16px;
}
.onboarding-actions .button-primary svg {
margin-left: 8px;
}
.onboarding-actions .button-with-icon svg {
width: 19px;
height: 19px;
}
}
/* Billing marketplace keeps a sales-page hierarchy inside the compact settings modal. */
.settings-modal-panel .billing-market {
gap: 20px;
}
.settings-modal-panel .billing-market-hero h2 {
font-size: clamp(24px, 3vw, 38px);
line-height: 1;
font-weight: 950;
letter-spacing: -.035em;
}
.settings-modal-panel .billing-market-section-head h3 {
font-size: 22px;
line-height: 1.08;
font-weight: 950;
letter-spacing: -.025em;
}
.settings-modal-panel .billing-plan-card h4 {
font-size: 19px;
line-height: 1.08;
font-weight: 950;
}
.settings-modal-panel .billing-plan-price {
font-size: 34px;
}
.settings-modal-panel .billing-plan-market {
gap: 12px;
}
@media (max-width: 760px) {
.settings-modal-panel .billing-market-hero h2 {
font-size: 27px;
}
.settings-modal-panel .billing-market-section-head h3 {
font-size: 20px;
}
}
/* Compact SaaS billing marketplace: this lives inside a settings modal, not a landing page. */
.settings-modal-panel[data-settings-panel="billing"] .billing-market {
gap: 14px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market .eyebrow {
margin-bottom: 5px;
font-size: 9px;
letter-spacing: .14em;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-hero {
grid-template-columns: 1fr;
gap: 12px;
padding: 14px;
border-radius: 14px;
background:
radial-gradient(circle at 100% 0%, rgba(17, 122, 85, .08), transparent 36%),
#f7fbf8;
box-shadow: inset 0 0 0 1px #dbe9e2;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-hero-copy {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"eyebrow actions"
"title actions"
"copy actions";
column-gap: 16px;
align-items: end;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-hero-copy .eyebrow {
grid-area: eyebrow;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-hero h2 {
grid-area: title;
max-width: 520px;
font-size: clamp(21px, 2.1vw, 26px);
line-height: 1.05;
letter-spacing: -.025em;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-hero p:not(.eyebrow) {
grid-area: copy;
max-width: 54ch;
margin-top: 7px;
font-size: 12px;
line-height: 1.35;
font-weight: 720;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-actions {
grid-area: actions;
display: grid;
gap: 7px;
width: 150px;
margin: 0;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-btn {
min-height: 31px;
padding: 0 11px;
border-radius: 9px;
font-size: 11.5px;
font-weight: 850;
white-space: nowrap;
box-shadow: none;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-btn.is-primary {
box-shadow: 0 7px 16px rgba(5, 127, 79, .14);
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-stats article {
min-height: 86px;
padding: 10px;
border-radius: 11px;
box-shadow: none;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-stats strong {
font-size: 18px;
line-height: 1.05;
letter-spacing: -.015em;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-stats span,
.settings-modal-panel[data-settings-panel="billing"] .billing-market-stats small {
margin-top: 3px;
font-size: 10.5px;
line-height: 1.25;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-stats a {
margin-top: 7px;
font-size: 10.5px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-stats .ui-progress {
height: 5px;
margin-top: 7px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-section {
gap: 10px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-section-head {
align-items: start;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-section-head h3 {
max-width: 560px;
font-size: 18px;
line-height: 1.1;
letter-spacing: -.018em;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-section-head p:not(.eyebrow) {
max-width: 58ch;
margin-top: 5px;
font-size: 11.5px;
line-height: 1.34;
font-weight: 700;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-section-head a {
padding-top: 18px;
font-size: 11px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-market {
gap: 9px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-card {
min-height: 268px;
gap: 8px;
padding: 12px;
border-radius: 13px;
box-shadow: 0 8px 20px rgba(27, 48, 39, .04);
}
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-topline {
min-height: 20px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-badge {
min-height: 20px;
padding: 0 8px;
font-size: 8.5px;
letter-spacing: .07em;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-card h4 {
font-size: 15.5px;
line-height: 1.08;
letter-spacing: -.015em;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-copy p {
margin-top: 5px;
font-size: 10.8px;
line-height: 1.28;
font-weight: 700;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-price {
font-size: 25px;
line-height: 1;
letter-spacing: -.03em;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-price span {
font-size: 13px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-price small {
font-size: 10.5px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-card ul {
gap: 6px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-card li {
padding-left: 16px;
font-size: 10.8px;
line-height: 1.18;
font-weight: 740;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-card li::before {
width: 11px;
height: 11px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-card li::after {
left: 3px;
top: calc(.1em + 2px);
width: 4px;
height: 3px;
border-width: 1.6px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-actions {
gap: 6px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-current {
min-height: 31px;
border-radius: 9px;
font-size: 11.5px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-reassurance {
gap: 9px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-reassurance article {
padding: 11px;
border-radius: 12px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-reassurance strong {
font-size: 12.5px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-reassurance p {
margin-top: 4px;
font-size: 10.8px;
line-height: 1.35;
}
@media (max-width: 760px) {
.settings-modal-panel[data-settings-panel="billing"] .billing-market-hero-copy {
grid-template-columns: 1fr;
grid-template-areas:
"eyebrow"
"title"
"copy"
"actions";
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-actions {
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 10px;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-market-stats,
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-market,
.settings-modal-panel[data-settings-panel="billing"] .billing-market-reassurance {
grid-template-columns: 1fr;
}
.settings-modal-panel[data-settings-panel="billing"] .billing-plan-card {
min-height: 0;
}
}
/* Compact account-style billing tab */
.settings-billing-account {
display: grid;
gap: 14px;
max-width: 760px;
padding-top: 14px;
}
.settings-billing-ledger-summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: start;
padding-bottom: 14px;
margin-bottom: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
background: transparent;
}
.settings-billing-ledger-summary > div {
min-width: 0;
padding: 0;
border-radius: 0;
background: transparent;
}
.settings-billing-ledger-summary h2 {
margin: 4px 0 5px;
color: var(--ink);
font-size: 20px;
line-height: 1.12;
letter-spacing: -.025em;
}
.settings-billing-ledger-summary p:not(.eyebrow) {
max-width: 54ch;
margin: 0;
color: var(--muted);
font-size: 12px;
font-weight: 700;
line-height: 1.45;
}
.settings-billing-ledger-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 7px;
margin-bottom: 0;
}
.settings-billing-ledger-actions form {
margin: 0;
}
.settings-billing-ledger-actions .button {
min-height: 30px;
padding: 0 11px;
border-radius: 999px;
font-size: 11px;
font-weight: 850;
white-space: nowrap;
box-shadow: none;
}
.settings-billing-ledger-actions .button-primary {
border: 1px solid #0b8f5a;
background: #0b8f5a;
color: #fff;
}
.settings-billing-ledger-actions .button-primary:hover {
background: #08784c;
border-color: #08784c;
transform: none;
}
.settings-billing-ledger-actions .button-secondary {
border: 1px solid #dce7df;
background: #fff;
color: var(--ink);
}
.settings-billing-ledger-actions .button-secondary:hover {
border-color: #c9d9d0;
background: #f6faf8;
transform: none;
}
.settings-billing-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.settings-billing-metrics article {
min-height: 82px;
padding: 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
}
.settings-billing-metrics article.is-warning {
border-color: #f1c988;
background: #fff8ea;
}
.settings-billing-metrics span,
.settings-billing-metrics small {
display: block;
color: var(--muted);
font-size: 11px;
font-weight: 800;
line-height: 1.25;
}
.settings-billing-metrics strong {
display: block;
margin-top: 5px;
color: var(--ink);
font-size: 16px;
line-height: 1.1;
}
.settings-billing-metrics a {
display: inline-block;
margin-top: 8px;
color: var(--orange);
font-size: 11px;
font-weight: 850;
text-decoration: none;
}
.settings-billing-metrics .ui-progress {
height: 6px;
margin-top: 10px;
}
.settings-billing-list {
border: 1px solid var(--line);
border-radius: 13px;
overflow: hidden;
background: #fff;
}
.settings-billing-list > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
min-height: 52px;
padding: 13px 15px;
border-bottom: 1px solid #edf2ee;
}
.settings-billing-list > div:last-child {
border-bottom: 0;
}
.settings-billing-list span {
color: var(--muted);
font-size: 12px;
font-weight: 800;
}
.settings-billing-list strong {
color: var(--ink);
font-size: 13px;
}
.settings-billing-list form {
margin: 0;
}
.settings-billing-list button,
.settings-billing-list a {
border: 0;
background: transparent;
color: var(--green);
font: inherit;
font-size: 12px;
font-weight: 900;
text-decoration: none;
cursor: pointer;
}
/* Shared SaaS button treatment: compact, pill-shaped, low-shadow controls. */
.app-shell .button,
.settings-modal .button {
min-height: 34px;
padding: 0 13px;
border-radius: 999px;
font-size: 12px;
font-weight: 850;
letter-spacing: 0;
box-shadow: none;
transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.app-shell .button:hover,
.settings-modal .button:hover {
transform: none;
}
.app-shell .panel-action,
.app-shell .range-menu summary,
.app-shell .campaign-overview-actions a,
.app-shell .campaign-card-edit,
.app-shell .campaign-history-actions a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 13px;
border: 1px solid #d9dfdc;
border-radius: 999px;
background: #fff;
color: var(--ink);
font-size: 12px;
font-weight: 850;
letter-spacing: 0;
text-decoration: none;
box-shadow: none;
transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.app-shell .campaign-card-edit {
gap: 8px;
align-self: flex-start;
margin-top: auto;
}
.app-shell .campaign-history-actions a {
min-height: 28px;
padding: 0 10px;
font-size: 11px;
}
.app-shell .range-menu summary {
gap: 8px;
cursor: pointer;
}
.app-shell .insight-grid .panel-head,
.app-shell .insight-grid .funnel-head,
.app-shell .insight-grid .campaign-overview-head {
align-items: start;
}
.app-shell .insight-grid .panel-head .range-menu,
.app-shell .insight-grid .funnel-head .range-menu,
.app-shell .campaign-overview-actions {
margin-top: 0;
}
.app-shell .panel-action:hover,
.app-shell .range-menu[open] summary,
.app-shell .range-menu summary:hover,
.app-shell .campaign-overview-actions a:hover,
.app-shell .campaign-card-edit:hover,
.app-shell .campaign-history-actions a:hover {
border-color: #c8d0cc;
background: #f4f6f5;
color: var(--ink);
box-shadow: none;
}
.app-shell .range-menu a:hover,
.app-shell .range-menu a[aria-current="page"] {
background: #f4f6f5;
color: var(--ink);
}
.app-shell .button-primary,
.settings-modal .button-primary {
border: 1px solid #0b8f5a;
background: #0b8f5a;
color: #fff;
}
.app-shell .button-primary:hover,
.settings-modal .button-primary:hover {
border-color: #08784c;
background: #08784c;
}
.app-shell .button-secondary,
.settings-modal .button-secondary {
border: 1px solid #dce7df;
background: #fff;
color: var(--ink);
}
.app-shell .button-secondary:hover,
.settings-modal .button-secondary:hover {
border-color: #c9d9d0;
background: #f6faf8;
}
.app-shell .button-danger,
.settings-modal .button-danger {
border-color: #f0b7a0;
background: #fff4ec;
color: #9d3f09;
}
.app-shell .button-danger:hover,
.settings-modal .button-danger:hover {
border-color: #e59863;
background: #ffe8d7;
color: #7d3104;
}
.app-shell .button-warning,
.settings-modal .button-warning {
border-color: #f1c988;
background: #fff7e8;
color: #9d5b00;
}
.app-shell .button-warning:hover,
.settings-modal .button-warning:hover {
border-color: #e4ad50;
background: #fff0d3;
}
.settings-modal-panel .button,
.settings-linkedin-actions .button {
min-height: 32px;
padding: 0 12px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 850;
}
.settings-billing-list button {
min-height: 30px;
padding: 0 12px;
border: 1px solid #dce7df;
border-radius: 999px;
background: #fff;
color: var(--green);
font: inherit;
font-size: 11.5px;
font-weight: 900;
cursor: pointer;
}
.settings-billing-list button:hover {
border-color: #c9d9d0;
background: #f6faf8;
color: var(--green-dark);
}
.btn-delete {
min-height: 32px;
padding: 0 13px;
border-radius: 999px;
box-shadow: none;
}
.app-shell .control-center-card .control-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
gap: 10px;
}
.app-shell .control-center-card .control-actions form,
.app-shell .control-center-card .control-actions > a {
display: flex;
width: 100%;
min-width: 0;
}
.app-shell .control-center-card .control-actions .button {
width: 100%;
min-width: 0;
justify-content: flex-start;
gap: 10px;
min-height: 46px;
padding: 0 13px;
border-radius: 11px;
font-size: 13px;
font-weight: 880;
line-height: 1.12;
white-space: normal;
overflow: hidden;
}
.app-shell .control-center-card .control-actions .button-icon > span {
width: 26px;
height: 26px;
flex: 0 0 26px;
border-radius: 8px;
}
.app-shell .control-center-card .control-actions .button-icon svg {
width: 15px;
height: 15px;
}
.app-shell .control-center-card .control-actions .button-icon b {
width: 14px;
flex: 0 0 14px;
margin-left: auto;
}
.app-shell .leads-command-card .button {
width: 100%;
justify-content: center;
min-height: 44px;
padding: 0 18px;
border-radius: 13px;
font-size: 13px;
font-weight: 900;
white-space: nowrap;
}
.app-shell .leads-command-card .button svg {
width: 17px;
height: 17px;
}
/* Standalone pricing route */
.pricing-route {
min-height: 100dvh;
background: #f4f7f5;
color: var(--ink);
}
.pricing-page-nav {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 72px;
padding: 0 max(24px, calc((100vw - 1240px) / 2));
border-bottom: 1px solid rgba(27, 45, 37, .08);
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(14px);
}
.pricing-page-brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--ink);
font-size: 22px;
font-weight: 900;
letter-spacing: -.035em;
text-decoration: none;
}
.pricing-page-brand .brand-mascot {
width: 38px;
height: 38px;
border-radius: 11px;
object-fit: contain;
}
.pricing-page-brand .brand-wordmark {
width: auto;
height: 31px;
max-width: 132px;
border-radius: 0;
}
.pricing-page-brand em {
color: var(--green);
font-style: normal;
}
.pricing-page-nav nav {
display: flex;
align-items: center;
gap: 10px;
}
.pricing-page-nav nav a {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 13px;
border-radius: 10px;
color: var(--muted);
font-size: 13px;
font-weight: 850;
text-decoration: none;
}
.pricing-page-nav nav a:hover {
background: #edf5f0;
color: var(--ink);
}
.pricing-page-nav-cta {
background: var(--green) !important;
color: #fff !important;
}
.pricing-page {
max-width: 1240px;
margin: 0 auto;
padding: clamp(44px, 6vw, 76px) 24px 70px;
}
.pricing-page-hero {
display: grid;
justify-items: center;
text-align: center;
margin: 0 auto 34px;
}
.pricing-page-pill {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 0 12px;
border: 1px solid #d9e6dd;
border-radius: 999px;
background: #fff;
color: var(--green);
font-size: 11px;
font-weight: 950;
letter-spacing: .13em;
text-transform: uppercase;
}
.pricing-page-hero h1 {
max-width: 780px;
margin: 16px auto 12px;
color: var(--ink);
font-size: clamp(34px, 5vw, 62px);
line-height: .98;
letter-spacing: -.055em;
}
.pricing-page-hero p {
max-width: 620px;
margin: 0;
color: var(--muted);
font-size: 16px;
font-weight: 700;
line-height: 1.55;
}
.pricing-page-toggle {
display: inline-flex;
gap: 4px;
margin-top: 24px;
padding: 5px;
border: 1px solid #dce7df;
border-radius: 999px;
background: #eaf1ed;
}
.pricing-page-toggle button {
min-height: 36px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--muted);
font-size: 13px;
font-weight: 900;
cursor: pointer;
}
.pricing-page-toggle button.is-active {
background: #fff;
color: var(--ink);
box-shadow: 0 2px 12px rgba(25, 44, 34, .08);
}
.pricing-page-toggle span {
color: var(--green);
}
.pricing-page-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
align-items: stretch;
}
.pricing-page-card {
position: relative;
display: flex;
min-height: 610px;
flex-direction: column;
padding: 28px;
border: 1px solid #dce7df;
border-radius: 20px;
background: #fff;
box-shadow: 0 10px 34px rgba(24, 45, 35, .05);
}
.pricing-page-card.is-popular {
border: 2px solid var(--green);
background: linear-gradient(180deg, #f4fbf7 0%, #fff 64%);
box-shadow: 0 18px 46px rgba(17, 122, 85, .12);
}
.pricing-page-card.is-current {
border-color: #98c7ff;
background: linear-gradient(180deg, #eef6ff 0%, #fff 66%);
}
.pricing-page-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 0 22px;
border-radius: 999px;
background: var(--green);
color: #fff;
font-size: 11px;
font-weight: 950;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
}
.pricing-page-badge.is-current {
background: #dfeeff;
color: #0f63a8;
}
.pricing-page-card-top h2 {
margin: 24px 0 8px;
color: var(--ink);
font-size: 24px;
line-height: 1.05;
letter-spacing: -.035em;
}
.pricing-page-card-top p {
min-height: 48px;
margin: 0;
color: var(--muted);
font-size: 14px;
font-weight: 760;
line-height: 1.35;
}
.pricing-page-price {
display: flex;
align-items: baseline;
gap: 4px;
margin-top: 28px;
color: var(--ink);
}
.pricing-page-price span {
font-size: 20px;
font-weight: 950;
}
.pricing-page-price strong {
font-size: 54px;
line-height: .9;
letter-spacing: -.06em;
}
.pricing-page-price small {
color: var(--muted);
font-size: 16px;
font-weight: 850;
}
.pricing-page-billing-copy {
margin: 7px 0 20px;
color: var(--muted);
font-size: 13px;
font-weight: 760;
}
.pricing-page-features {
display: grid;
gap: 0;
margin: 0 0 24px;
padding: 0;
list-style: none;
}
.pricing-page-features li {
position: relative;
padding: 10px 0 10px 28px;
border-bottom: 1px solid #eef2ef;
color: var(--ink);
font-size: 14px;
font-weight: 760;
line-height: 1.25;
}
.pricing-page-features li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 18px;
height: 18px;
border-radius: 999px;
background: #dff4e8;
}
.pricing-page-features li::after {
content: "";
position: absolute;
left: 6px;
top: 15px;
width: 6px;
height: 4px;
border-left: 2px solid var(--green);
border-bottom: 2px solid var(--green);
transform: rotate(-45deg);
}
.pricing-page-card-action {
margin-top: auto;
}
.pricing-page-card-action form {
margin: 0;
}
.pricing-page-button,
.pricing-page-current {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
padding: 0 18px;
border: 2px solid #dce7df;
border-radius: 12px;
background: #fff;
color: var(--green);
font-size: 15px;
font-weight: 950;
text-decoration: none;
cursor: pointer;
}
.pricing-page-button.is-primary {
border-color: var(--green);
background: linear-gradient(180deg, #13a46d, #078352);
color: #fff;
box-shadow: 0 10px 24px rgba(17, 122, 85, .18);
}
.pricing-page-button:hover {
transform: translateY(-1px);
}
.pricing-page-current {
border-color: #a7cdf9;
background: #fff;
color: #0f63a8;
}
.pricing-page-note {
margin: 14px 0 0;
padding: 11px 13px;
border: 1px solid #e4ece7;
border-radius: 10px;
background: #f8fbf9;
color: var(--green);
font-size: 12px;
font-weight: 780;
line-height: 1.35;
}
@media (max-width: 960px) {
.pricing-page-grid {
grid-template-columns: 1fr;
}
.pricing-page-card {
min-height: 0;
}
}
@media (max-width: 760px) {
.settings-billing-ledger-summary,
.settings-billing-metrics {
grid-template-columns: 1fr;
}
.settings-billing-ledger-actions {
justify-content: stretch;
}
.settings-billing-ledger-actions .button {
width: 100%;
}
.pricing-page-nav {
padding: 0 16px;
}
.pricing-page-nav nav a:not(.pricing-page-nav-cta) {
display: none;
}
.pricing-page {
padding: 34px 16px 54px;
}
.pricing-page-hero h1 {
font-size: clamp(32px, 12vw, 44px);
}
.pricing-page-card {
padding: 20px;
border-radius: 16px;
}
}
/* Opportunity workflow */
.opportunity-shell,
.opportunity-form-shell,
.opportunity-detail-shell {
display: grid;
gap: 18px;
}
.opportunity-command,
.opportunity-detail-hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 22px;
border: 1px solid #dce5df;
border-radius: 16px;
background: #fff;
}
.opportunity-command h1,
.opportunity-detail-hero h1 {
margin: 8px 0 4px;
color: var(--ink);
font-size: 28px;
line-height: 1.1;
}
.opportunity-command p,
.opportunity-detail-hero p,
.muted {
margin: 0;
color: #5b6861;
}
.opportunity-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.opportunity-tabs a {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 12px;
border: 1px solid #dce5df;
border-radius: 999px;
background: #f8fbf9;
color: #405048;
font-size: 13px;
font-weight: 800;
text-decoration: none;
}
.opportunity-tabs a.is-active {
background: #18392b;
color: #fff;
border-color: #18392b;
}
.opportunity-kanban {
display: grid;
grid-template-columns: repeat(6, minmax(220px, 1fr));
gap: 12px;
overflow-x: auto;
padding-bottom: 10px;
}
.opportunity-column {
min-height: 420px;
border: 1px solid #dce5df;
border-radius: 14px;
background: #f8fbf9;
}
.opportunity-column > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 13px 14px;
border-bottom: 1px solid #dce5df;
}
.opportunity-column h2 {
margin: 0;
color: var(--ink);
font-size: 14px;
}
.opportunity-column header span {
display: inline-grid;
place-items: center;
min-width: 26px;
height: 26px;
border-radius: 999px;
background: #eaf2ed;
color: #244534;
font-size: 12px;
font-weight: 900;
}
.opportunity-column-body {
display: grid;
align-content: start;
gap: 10px;
padding: 10px;
}
.opportunity-card,
.opportunity-empty-column {
border: 1px solid #dde6e0;
border-radius: 12px;
background: #fff;
padding: 12px;
}
.opportunity-card.is-dragging {
opacity: .58;
}
.opportunity-card-main {
display: grid;
gap: 4px;
color: inherit;
text-decoration: none;
}
.opportunity-card-main strong {
color: var(--ink);
font-size: 15px;
line-height: 1.2;
}
.opportunity-card-main span,
.opportunity-card-main small,
.opportunity-card-meta {
color: #5b6861;
font-size: 12px;
}
.opportunity-card-meta {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 10px;
}
.opportunity-stage-fallback {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
margin-top: 10px;
}
.opportunity-stage-fallback select,
.opportunity-stage-control select,
.opportunity-inline-form select,
.opportunity-inline-form input,
.opportunity-form-card input,
.opportunity-form-card textarea,
.opportunity-form-card select,
.opportunity-contact-list select {
width: 100%;
min-height: 38px;
border: 1px solid #cfdad3;
border-radius: 8px;
background: #fff;
color: var(--ink);
}
.opportunity-stage-fallback button,
.opportunity-contact-list button {
min-height: 38px;
border: 1px solid #cfdad3;
border-radius: 8px;
background: #f8fbf9;
color: var(--ink);
font-weight: 800;
}
.opportunity-form-card,
.opportunity-panel {
display: grid;
gap: 12px;
padding: 20px;
border: 1px solid #dce5df;
border-radius: 14px;
background: #fff;
}
.opportunity-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
gap: 14px;
}
.opportunity-panel h2 {
margin: 0;
color: var(--ink);
font-size: 18px;
}
.opportunity-meta-list {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 8px 14px;
margin: 0;
}
.opportunity-meta-list dt {
color: #647169;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
}
.opportunity-meta-list dd {
margin: 0;
color: var(--ink);
overflow-wrap: anywhere;
}
.opportunity-inline-form {
display: grid;
grid-template-columns: minmax(0, 1fr) 160px auto;
gap: 8px;
}
.opportunity-contact-list {
display: grid;
gap: 10px;
}
.opportunity-contact-list article,
.opportunity-list-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
padding: 10px;
border: 1px solid #e5ece8;
border-radius: 10px;
color: inherit;
text-decoration: none;
}
.opportunity-contact-list article > div {
display: grid;
gap: 3px;
}
.opportunity-list-row {
grid-template-columns: minmax(0, 1fr) auto;
}
.text-danger {
color: #9b1c1c;
}
@media (max-width: 1100px) {
.opportunity-kanban {
grid-template-columns: repeat(6, 240px);
}
.opportunity-detail-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.opportunity-command,
.opportunity-detail-hero,
.opportunity-contact-list article,
.opportunity-inline-form {
grid-template-columns: 1fr;
display: grid;
}
.opportunity-command .button {
width: 100%;
}
.opportunity-kanban {
grid-template-columns: repeat(6, 82vw);
}
.opportunity-stage-control {
width: 100%;
}
}
/* Get Hired directories: discovery, committed opportunities, and people are
intentionally separate surfaces. Jobs and Recruiters share one master/detail
grammar so users learn the interaction once. */
.career-directory {
--career-green: #087a48;
--career-green-dark: #075537;
--career-ink: #10241b;
--career-copy: #607069;
--career-line: #e1e9e4;
--career-soft: #f3f8f5;
display: grid;
gap: 22px;
width: min(100%, 1680px);
margin: 0 auto;
color: var(--career-ink);
}
.career-directory-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding: 16px 2px 2px;
}
.career-eyebrow,
.career-search-summary small {
display: block;
margin-bottom: 5px;
color: var(--career-green);
font-size: 11px;
font-weight: 850;
letter-spacing: .1em;
text-transform: uppercase;
}
.career-directory-head h1 {
margin: 0;
font-size: clamp(34px, 3vw, 48px);
line-height: 1;
letter-spacing: -.055em;
}
.career-directory-head p {
margin: 10px 0 0;
color: var(--career-copy);
font-size: 15px;
}
.career-secondary-action,
.career-primary-action,
.career-saved-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 46px;
padding: 0 18px;
border: 1px solid #cfdcd4;
border-radius: 13px;
background: #fff;
color: var(--career-green-dark);
font-size: 13px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.career-secondary-action svg,
.career-primary-action svg,
.career-saved-button svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.career-secondary-action:hover,
.career-saved-button:hover {
border-color: #9cc9af;
box-shadow: 0 8px 22px rgba(15, 64, 42, .08);
transform: translateY(-1px);
}
.career-primary-action {
min-width: 118px;
border-color: var(--career-green);
background: linear-gradient(135deg, #096f45, #079356);
color: #fff;
box-shadow: 0 10px 22px rgba(8, 122, 72, .18);
}
.career-primary-action:hover {
color: #fff;
box-shadow: 0 13px 28px rgba(8, 122, 72, .26);
transform: translateY(-1px);
}
.career-saved-button.is-complete {
border-color: #cfe7d8;
background: #edf8f2;
color: #147044;
}
.career-search-summary {
display: grid;
grid-template-columns: 58px minmax(220px, .8fr) minmax(300px, 1.2fr);
align-items: center;
gap: 18px;
padding: 18px 20px;
border-radius: 18px;
background: linear-gradient(105deg, #edf8f2 0%, #f7faf8 64%, #fff 100%);
box-shadow: 0 10px 30px rgba(23, 62, 44, .045);
}
.career-visual {
display: grid;
place-items: center;
width: 58px;
height: 58px;
flex: 0 0 58px;
border-radius: 17px;
background: #fff;
box-shadow:
0 1px 2px rgba(17, 44, 31, .08),
0 8px 22px rgba(17, 78, 49, .09);
}
.career-visual img {
width: 46px;
height: 46px;
object-fit: contain;
}
.career-visual svg {
width: 27px;
height: 27px;
fill: none;
stroke: var(--career-green);
stroke-width: 2;
}
.career-search-summary strong {
display: block;
font-size: 17px;
line-height: 1.22;
}
.career-search-summary p {
margin: 5px 0 0;
color: var(--career-copy);
font-size: 13px;
}
.career-search-summary p span {
margin: 0 6px;
color: #55a47b;
}
.career-directory-search {
display: grid;
grid-template-columns: 20px minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
min-height: 48px;
padding: 0 15px;
border: 1px solid #dce6e0;
border-radius: 14px;
background: #fff;
}
.career-directory-search:focus-within {
border-color: #86bda1;
box-shadow: 0 0 0 3px rgba(8, 122, 72, .08);
}
.career-directory-search svg {
width: 18px;
height: 18px;
fill: none;
stroke: #77877f;
stroke-width: 2;
}
.career-directory-search input {
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--career-ink);
font-size: 14px;
}
.career-directory-search a {
color: #84928b;
font-size: 23px;
line-height: 1;
text-decoration: none;
}
.career-browser {
display: grid;
grid-template-columns: minmax(390px, 38fr) minmax(570px, 62fr);
min-height: 680px;
overflow: hidden;
border-radius: 22px;
background: #fff;
box-shadow:
0 1px 2px rgba(15, 40, 29, .04),
0 18px 48px rgba(15, 40, 29, .075);
}
.career-master-panel {
min-width: 0;
border-right: 1px solid var(--career-line);
background: #fbfcfb;
}
.career-panel-head {
display: grid;
gap: 5px;
padding: 22px 24px 18px;
border-bottom: 1px solid var(--career-line);
background: #fff;
}
.career-panel-head > div {
display: flex;
align-items: center;
gap: 10px;
}
.career-panel-head strong {
font-size: 19px;
letter-spacing: -.025em;
}
.career-panel-head span {
display: inline-grid;
place-items: center;
min-width: 29px;
height: 29px;
padding: 0 8px;
border-radius: 999px;
background: #eaf6ef;
color: var(--career-green);
font-size: 12px;
font-weight: 850;
}
.career-panel-head small {
color: #7a8881;
font-size: 12px;
}
.career-master-list {
max-height: 720px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #cbd9d1 transparent;
}
.career-job-row,
.career-recruiter-row {
position: relative;
display: grid;
grid-template-columns: 58px minmax(0, 1fr) 18px;
align-items: center;
gap: 16px;
min-height: 130px;
padding: 20px 22px;
border-bottom: 1px solid var(--career-line);
color: inherit;
text-decoration: none;
transition: background .16s ease;
}
.career-job-row::before,
.career-recruiter-row::before {
content: "";
position: absolute;
inset: 15px auto 15px 0;
width: 4px;
border-radius: 0 5px 5px 0;
background: transparent;
}
.career-job-row:hover,
.career-recruiter-row:hover {
background: #f5faf7;
}
.career-job-row.is-selected,
.career-recruiter-row.is-selected {
background: #eef8f2;
}
.career-job-row.is-selected::before,
.career-recruiter-row.is-selected::before {
background: var(--career-green);
}
.career-job-visual {
width: 58px;
height: 58px;
}
.career-row-copy {
display: block;
min-width: 0;
}
.career-row-kicker {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 7px;
}
.career-state {
display: inline-flex;
align-items: center;
min-height: 25px;
padding: 0 9px;
border-radius: 999px;
background: #edf2ef;
color: #627169;
font-size: 10px;
font-weight: 850;
letter-spacing: .035em;
text-transform: uppercase;
}
.career-state.is-saved,
.career-state.is-replied {
background: #e8f6ee;
color: #147044;
}
.career-state.is-applied {
background: #eaf1ff;
color: #2b64bd;
}
.career-row-kicker time {
color: #839089;
font-size: 11px;
white-space: nowrap;
}
.career-row-copy > strong {
display: block;
overflow: hidden;
margin-bottom: 3px;
color: var(--career-ink);
font-size: 17px;
line-height: 1.22;
letter-spacing: -.018em;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-row-copy > span:not(.career-row-kicker) {
display: block;
overflow: hidden;
color: #46584f;
font-size: 13px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-row-copy > small {
display: block;
overflow: hidden;
margin-top: 2px;
color: #7b8982;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-row-copy > em {
display: block;
overflow: hidden;
margin-top: 7px;
color: #74827b;
font-size: 12px;
font-style: normal;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-row-chevron {
width: 17px;
height: 17px;
fill: none;
stroke: #8c9992;
stroke-width: 2;
}
.career-detail-panel {
min-width: 0;
background: #fff;
}
.career-job-detail-head,
.career-recruiter-detail-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 26px;
padding: 30px 32px 26px;
border-bottom: 1px solid var(--career-line);
}
.career-detail-source {
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 14px;
color: var(--career-green);
font-size: 11px;
font-weight: 850;
letter-spacing: .07em;
text-transform: uppercase;
}
.career-detail-source svg {
width: 17px;
height: 17px;
fill: currentColor;
}
.career-detail-source img {
width: 34px;
height: 34px;
margin-right: 2px;
border-radius: 10px;
object-fit: cover;
box-shadow: 0 4px 12px rgba(11, 83, 49, .12);
}
.career-jobs-directory > .career-directory-head .career-secondary-action {
color: #101c16;
}
/* Shared workspace-page shell: the same quiet enterprise hierarchy used by
Jobs and Recruiters, without decorative top borders. */
.workspace-system-page {
border: 0;
box-shadow:
0 2px 8px rgba(15, 40, 29, .025),
0 20px 54px rgba(15, 40, 29, .055);
}
.workspace-system-page > .leads-command-card,
.workspace-system-page > .meetings-command-card,
.workspace-system-page > .campaign-command-card,
.workspace-system-page > .content-command-card {
grid-template-columns: 58px minmax(0, 1fr) auto;
gap: 18px;
align-items: start;
}
.workspace-command-icon {
display: grid;
width: 58px;
height: 58px;
place-items: center;
flex: 0 0 auto;
overflow: hidden;
border-radius: 18px;
background: #f4faf6;
box-shadow:
0 8px 22px rgba(15, 92, 58, .08),
inset 0 0 0 1px rgba(15, 92, 58, .07);
}
.workspace-command-icon img {
display: block;
width: 52px;
height: 52px;
object-fit: contain;
}
.workspace-system-page .leads-command-copy,
.workspace-system-page .meetings-command-copy,
.workspace-system-page .campaign-command-copy,
.workspace-system-page .content-command-copy {
gap: 10px;
padding-top: 3px;
}
.workspace-system-page .leads-command-copy p,
.workspace-system-page .meetings-command-copy p,
.workspace-system-page .campaign-command-copy p,
.workspace-system-page .content-command-copy p {
max-width: 760px;
color: #697770;
font-size: 15px;
font-weight: 600;
line-height: 1.55;
}
@media (max-width: 980px) {
.workspace-system-page > .leads-command-card,
.workspace-system-page > .meetings-command-card,
.workspace-system-page > .campaign-command-card,
.workspace-system-page > .content-command-card {
grid-template-columns: 52px minmax(0, 1fr);
}
.workspace-system-page .leads-command-controls,
.workspace-system-page .meetings-command-controls,
.workspace-system-page .campaign-command-controls,
.workspace-system-page .content-command-controls {
grid-column: 1 / -1;
}
}
@media (max-width: 620px) {
.workspace-system-page > .leads-command-card,
.workspace-system-page > .meetings-command-card,
.workspace-system-page > .campaign-command-card,
.workspace-system-page > .content-command-card {
grid-template-columns: 44px minmax(0, 1fr);
gap: 13px;
padding: 20px;
}
.workspace-command-icon {
width: 44px;
height: 44px;
border-radius: 14px;
}
.workspace-command-icon img {
width: 40px;
height: 40px;
}
}
/* Semantic product color system
Blue = LinkedIn destination/action, orange = an application progressed,
green = KipDo-owned workflow, charcoal = configuration. */
:root {
--linkedin-blue: #0a66c2;
--linkedin-blue-dark: #004182;
--linkedin-blue-soft: #eaf4fb;
--linkedin-blue-line: #c9dff2;
--career-applied: #c96d0b;
--career-applied-dark: #9f4f05;
--career-applied-soft: #fff3e3;
--career-applied-line: #f1ce9f;
}
body.saas-app-page a[href*="linkedin.com"] {
color: var(--linkedin-blue);
}
.messaging-profile-link,
.messaging-inline-link {
color: var(--linkedin-blue);
}
.messaging-profile-link:hover,
.messaging-inline-link:hover {
color: var(--linkedin-blue-dark);
}
.messaging-profile-link:hover {
background: var(--linkedin-blue-soft);
}
.messaging-profile-link svg,
.messaging-inline-link svg,
.career-linkedin-link svg,
.is-linkedin-profile svg,
.is-linkedin-action svg,
.career-linkedin-action svg,
.career-linkedin-text-link svg {
stroke-width: 2.4;
}
.kipdo-inbox-page .messaging-message-stream {
background: #fff;
scrollbar-color: #d9e1dd transparent;
}
.kipdo-inbox-page .messaging-message p {
border-color: #e1e7e4;
background: #fff;
box-shadow: none;
}
.kipdo-inbox-page .messaging-message.is-outgoing p {
border-color: #d5e2ea;
background: #eef5f9;
box-shadow: none;
}
.career-primary-action.is-linkedin-action,
.career-linkedin-action,
.career-job-actions button {
border-color: var(--linkedin-blue);
background: var(--linkedin-blue);
color: #fff;
box-shadow: none;
}
.career-primary-action.is-linkedin-action:hover,
.career-linkedin-action:hover,
.career-job-actions button:hover {
border-color: var(--linkedin-blue-dark);
background: var(--linkedin-blue-dark);
color: #fff;
box-shadow: none;
}
.career-primary-action.is-linkedin-action:focus-visible,
.career-linkedin-action:focus-visible,
.career-job-actions button:focus-visible {
outline: 3px solid rgba(10, 102, 194, .22);
outline-offset: 3px;
}
.career-saved-button.is-linkedin-profile,
.career-linkedin-text-link {
border-color: var(--linkedin-blue-line);
background: var(--linkedin-blue-soft);
color: var(--linkedin-blue);
}
.career-saved-button.is-linkedin-profile:hover,
.career-linkedin-text-link:hover {
border-color: #9fc6e7;
background: #deedf8;
color: var(--linkedin-blue-dark);
}
.career-saved-button.is-linkedin-profile svg {
fill: var(--linkedin-blue);
stroke: none;
}
.career-detail-source,
.career-job-meta > .career-job-source {
color: var(--linkedin-blue);
}
.career-job-meta > .career-job-source {
background: var(--linkedin-blue-soft);
}
.career-job-search-settings-action {
background: #111c17;
color: #fff;
box-shadow: none;
}
.career-job-search-settings:hover .career-job-search-settings-action {
background: #020705;
}
.career-state.is-applied,
.career-stage-badge.is-applied,
.career-job-meta > .career-job-recorded {
background: var(--career-applied-soft);
color: var(--career-applied-dark);
}
/* Career context strips use LinkedIn's blue as an orientation cue. */
.career-jobs-directory > .career-search-summary,
.career-opportunities-directory > .opportunity-workflow-summary,
.career-recruiters-directory > .recruiter-search-summary {
background:
radial-gradient(circle at 5% 15%, rgba(10, 102, 194, .09), transparent 28%),
linear-gradient(105deg, #eaf4fb 0%, #f5f9fd 66%, #fff 100%);
box-shadow:
0 2px 6px rgba(10, 102, 194, .025),
0 12px 34px rgba(10, 102, 194, .065);
}
.career-jobs-directory > .career-search-summary small,
.career-opportunities-directory > .opportunity-workflow-summary small,
.career-recruiters-directory > .recruiter-search-summary small {
color: var(--linkedin-blue);
}
.career-jobs-directory > .career-search-summary .career-visual,
.career-opportunities-directory > .opportunity-workflow-summary .career-visual,
.career-recruiters-directory > .recruiter-search-summary .career-visual {
box-shadow:
0 1px 2px rgba(10, 102, 194, .06),
0 9px 24px rgba(10, 102, 194, .11);
}
.career-jobs-directory > .career-search-summary .career-visual svg,
.career-recruiters-directory > .recruiter-search-summary .career-visual svg {
stroke: var(--linkedin-blue);
}
.career-jobs-directory > .career-search-summary p span {
color: #6ba6d7;
}
.career-jobs-directory > .career-search-summary .career-directory-search:focus-within,
.career-recruiters-directory > .recruiter-search-summary .career-directory-search:focus-within {
border-color: #8bbce3;
box-shadow: 0 0 0 3px rgba(10, 102, 194, .1);
}
/* Premium manual opportunity creation */
.opportunity-create-page {
gap: 24px;
}
.opportunity-create-header {
--page-header-orb: rgba(10, 102, 194, .14);
--page-header-start: #edf6fc;
--page-header-end: #f2faf7;
--page-header-shadow: rgba(10, 102, 194, .075);
}
.opportunity-create-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(310px, 380px);
align-items: start;
gap: 22px;
}
.opportunity-create-card {
overflow: hidden;
border-radius: 22px;
background: #fff;
box-shadow:
0 2px 7px rgba(15, 40, 29, .025),
0 20px 52px rgba(15, 40, 29, .065);
}
.opportunity-create-card-head {
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
align-items: center;
gap: 17px;
padding: 26px 28px 22px;
background:
radial-gradient(circle at 7% 10%, rgba(10, 102, 194, .08), transparent 30%),
#fff;
}
.opportunity-create-card-head > div {
min-width: 0;
}
.opportunity-create-card-head small,
.opportunity-create-guide > small {
display: block;
margin-bottom: 5px;
color: var(--linkedin-blue);
font-size: 11px;
font-weight: 850;
letter-spacing: .09em;
text-transform: uppercase;
}
.opportunity-create-card-head h2,
.opportunity-create-guide h2 {
margin: 0;
color: #10241b;
font-size: 24px;
line-height: 1.08;
letter-spacing: -.035em;
text-wrap: balance;
}
.opportunity-create-card-head p,
.opportunity-create-guide > p {
max-width: 680px;
margin: 7px 0 0;
color: #66756e;
font-size: 13px;
line-height: 1.5;
}
.opportunity-create-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 18px;
padding: 24px 28px 28px;
}
.opportunity-field {
display: grid;
min-width: 0;
align-content: start;
gap: 8px;
}
.opportunity-field--wide {
grid-column: 1 / -1;
}
.opportunity-field > label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: #263c32;
font-size: 13px;
font-weight: 800;
}
.opportunity-field > label span {
padding: 4px 7px;
border-radius: 7px;
background: #eaf4fb;
color: var(--linkedin-blue);
font-size: 9px;
font-weight: 850;
letter-spacing: .045em;
text-transform: uppercase;
}
.opportunity-field input,
.opportunity-field select,
.opportunity-field textarea {
box-sizing: border-box;
width: 100%;
min-height: 50px;
padding: 0 14px;
border: 1px solid #d7e3dc;
border-radius: 13px;
outline: 0;
background: #fbfdfc;
color: #10241b;
font: inherit;
font-size: 14px;
line-height: 1.45;
transition:
border-color .18s ease,
background .18s ease,
box-shadow .18s ease;
}
.opportunity-field textarea {
min-height: 136px;
padding-block: 13px;
resize: vertical;
}
.opportunity-field select[multiple] {
min-height: 136px;
padding-block: 8px;
}
.opportunity-field input::placeholder,
.opportunity-field textarea::placeholder {
color: #94a19a;
}
.opportunity-field input:focus,
.opportunity-field select:focus,
.opportunity-field textarea:focus {
border-color: #82b7df;
background: #fff;
box-shadow: 0 0 0 4px rgba(10, 102, 194, .09);
}
.opportunity-field > small {
color: #7b8982;
font-size: 11px;
line-height: 1.45;
}
.opportunity-form-alert,
.opportunity-field .field-error {
color: #b52f45;
font-size: 11px;
font-weight: 750;
}
.opportunity-form-alert {
display: grid;
gap: 4px;
margin: 0 28px;
padding: 12px 14px;
border-radius: 12px;
background: #fff1f4;
}
.opportunity-create-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 20px 28px 24px;
background: #f8fbf9;
}
.opportunity-create-actions > a {
display: inline-flex;
min-height: 44px;
align-items: center;
padding: 0 16px;
color: #5e6d66;
font-size: 13px;
font-weight: 750;
text-decoration: none;
}
.opportunity-create-actions > button {
display: inline-flex;
min-height: 46px;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 19px;
border: 0;
border-radius: 13px;
background: linear-gradient(135deg, #075f3c, #079356);
color: #fff;
font: inherit;
font-size: 13px;
font-weight: 850;
cursor: pointer;
box-shadow: 0 10px 23px rgba(8, 122, 72, .2);
transition: transform .18s ease, box-shadow .18s ease;
}
.opportunity-create-actions > button:hover {
box-shadow: 0 14px 28px rgba(8, 122, 72, .27);
transform: translateY(-1px);
}
.opportunity-create-actions > button:active {
transform: translateY(1px);
}
.opportunity-create-actions svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
}
.opportunity-create-guide {
position: sticky;
top: 92px;
overflow: hidden;
padding: 28px;
border-radius: 22px;
background:
radial-gradient(circle at 90% 5%, rgba(10, 102, 194, .12), transparent 34%),
linear-gradient(145deg, #eaf4fb 0%, #f5f9fd 64%, #fff 100%);
box-shadow:
0 2px 7px rgba(10, 102, 194, .025),
0 20px 48px rgba(10, 102, 194, .07);
}
.opportunity-create-guide-visual {
display: grid;
width: 72px;
height: 72px;
margin-bottom: 22px;
place-items: center;
border-radius: 20px;
background: rgba(255, 255, 255, .88);
box-shadow:
0 1px 2px rgba(10, 102, 194, .06),
0 10px 24px rgba(10, 102, 194, .1);
}
.opportunity-create-guide-visual img {
width: 64px;
height: 64px;
object-fit: contain;
}
.opportunity-create-guide ul {
display: grid;
gap: 10px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.opportunity-create-guide li {
display: grid;
gap: 3px;
padding: 13px 14px;
border-radius: 13px;
background: rgba(255, 255, 255, .78);
box-shadow: 0 6px 18px rgba(10, 102, 194, .035);
}
.opportunity-create-guide li b {
color: #17392a;
font-size: 12px;
}
.opportunity-create-guide li span {
color: #6c7b74;
font-size: 11px;
line-height: 1.45;
}
@media (max-width: 1060px) {
.opportunity-create-layout {
grid-template-columns: 1fr;
}
.opportunity-create-guide {
position: static;
}
}
@media (max-width: 640px) {
.opportunity-create-fields {
grid-template-columns: 1fr;
padding: 20px;
}
.opportunity-field--wide {
grid-column: auto;
}
.opportunity-create-card-head {
padding: 22px 20px 18px;
}
.opportunity-create-actions {
align-items: stretch;
padding: 18px 20px 21px;
flex-direction: column-reverse;
}
.opportunity-create-actions > a,
.opportunity-create-actions > button {
width: 100%;
justify-content: center;
}
.opportunity-create-guide {
padding: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
.opportunity-field input,
.opportunity-field select,
.opportunity-field textarea,
.opportunity-create-actions > button {
transition: none;
}
}
.opportunity-field--contacts {
position: relative;
}
.opportunity-contact-picker {
position: relative;
display: grid;
gap: 8px;
}
.opportunity-contact-selected {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.opportunity-contact-selected:empty {
display: none;
}
.opportunity-contact-chip {
display: grid;
min-width: 0;
max-width: 100%;
grid-template-columns: 30px minmax(0, 1fr) 24px;
align-items: center;
gap: 8px;
padding: 6px 7px;
border-radius: 12px;
background: #eaf4fb;
color: #123b5b;
box-shadow: inset 0 0 0 1px rgba(10, 102, 194, .08);
animation: opportunityContactIn .18s ease both;
}
.opportunity-contact-avatar {
position: relative;
display: grid;
width: 30px;
height: 30px;
overflow: hidden;
place-items: center;
border-radius: 9px;
background: #d8e9f6;
color: #0a66c2;
font-size: 12px;
font-style: normal;
font-weight: 850;
}
.opportunity-contact-avatar i {
font-style: normal;
}
.opportunity-contact-avatar img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.opportunity-contact-chip-copy {
display: grid;
min-width: 0;
gap: 1px;
}
.opportunity-contact-chip-copy b,
.opportunity-contact-chip-copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.opportunity-contact-chip-copy b {
font-size: 12px;
}
.opportunity-contact-chip-copy small {
color: #5c7b91;
font-size: 10px;
}
.opportunity-contact-picker .opportunity-contact-chip button {
display: grid;
width: 24px;
min-height: 24px;
padding: 0;
border: 0;
border-radius: 8px;
place-items: center;
background: transparent;
color: #557387;
font: inherit;
font-size: 19px;
cursor: pointer;
transition: background .18s ease, color .18s ease, transform .18s ease;
}
.opportunity-contact-picker .opportunity-contact-chip button:hover {
background: rgba(10, 102, 194, .1);
color: #084f92;
}
.opportunity-contact-picker .opportunity-contact-chip button:active {
transform: scale(.92);
}
.opportunity-contact-search {
display: grid;
min-height: 50px;
grid-template-columns: 20px minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 0 14px;
border: 1px solid #d7e3dc;
border-radius: 13px;
background: #fbfdfc;
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.opportunity-contact-search:focus-within {
border-color: #82b7df;
background: #fff;
box-shadow: 0 0 0 4px rgba(10, 102, 194, .09);
}
.opportunity-contact-search svg {
width: 18px;
height: 18px;
fill: none;
stroke: #6f8178;
stroke-width: 2;
}
.opportunity-contact-picker .opportunity-contact-search input {
min-height: 48px;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.opportunity-contact-picker .opportunity-contact-search input:focus {
border: 0;
background: transparent;
box-shadow: none;
}
.opportunity-contact-suggestions {
position: absolute;
z-index: 20;
top: calc(100% - 24px);
right: 0;
left: 0;
display: grid;
max-height: 288px;
overflow: auto;
padding: 7px;
border-radius: 15px;
background: #fff;
box-shadow:
0 2px 8px rgba(10, 49, 77, .07),
0 18px 42px rgba(10, 49, 77, .15);
}
.opportunity-contact-suggestions[hidden] {
display: none;
}
.opportunity-contact-picker .opportunity-contact-result {
display: grid;
width: 100%;
min-height: 58px;
grid-template-columns: 38px minmax(0, 1fr) 28px;
align-items: center;
gap: 11px;
padding: 9px 10px;
border: 0;
border-radius: 11px;
background: #fff;
color: #183027;
text-align: left;
cursor: pointer;
transition: background .16s ease, transform .16s ease;
}
.opportunity-contact-picker .opportunity-contact-result:hover,
.opportunity-contact-picker .opportunity-contact-result.is-active {
background: #eef6fb;
transform: translateX(2px);
}
.opportunity-contact-result .opportunity-contact-avatar {
width: 38px;
height: 38px;
border-radius: 11px;
}
.opportunity-contact-result > span:nth-child(2) {
display: grid;
min-width: 0;
gap: 3px;
}
.opportunity-contact-result b,
.opportunity-contact-result small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.opportunity-contact-result b {
font-size: 13px;
}
.opportunity-contact-result small {
color: #708078;
font-size: 11px;
}
.opportunity-contact-result-action {
display: grid;
width: 26px;
height: 26px;
place-items: center;
border-radius: 8px;
background: #dcecf8;
color: #0a66c2;
font-size: 18px;
font-weight: 750;
}
.opportunity-contact-status {
min-height: 16px;
margin: 0;
color: #87948e;
font-size: 10px;
line-height: 1.4;
}
.opportunity-contact-picker.is-searching .opportunity-contact-search svg {
animation: opportunitySearchPulse .8s ease-in-out infinite alternate;
}
@keyframes opportunityContactIn {
from { opacity: 0; transform: translateY(4px) scale(.98); }
to { opacity: 1; transform: none; }
}
@keyframes opportunitySearchPulse {
to { opacity: .45; transform: scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
.opportunity-contact-chip {
animation: none;
}
.opportunity-contact-picker.is-searching .opportunity-contact-search svg {
animation: none;
}
}
/* One header contract for every authenticated workspace page. The same icon,
title, campaign badge, subtitle, spacing, and action baseline are reused
across Activity, Review, Jobs, Opportunities, Recruiters, Meetings,
Campaign, Content, and the generic people directory. */
.workspace-page-header {
--page-header-orb: rgba(91, 112, 232, .11);
--page-header-start: #f7f8ff;
--page-header-end: #f3f9f6;
--page-header-shadow: rgba(91, 112, 232, .065);
display: grid !important;
min-height: 174px !important;
grid-template-columns: 76px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 24px !important;
padding: 28px 30px !important;
border: 0 !important;
border-radius: 24px;
background:
radial-gradient(circle at 13% 15%, var(--page-header-orb), transparent 27%),
linear-gradient(115deg, var(--page-header-start) 0%, #fff 52%, var(--page-header-end) 100%) !important;
box-shadow:
0 2px 8px rgba(15, 40, 29, .025),
0 22px 58px var(--page-header-shadow) !important;
}
/* One geometry, one type scale, distinct page identities. These restrained
ambient tints make orientation immediate without turning the product into
a collection of unrelated dashboards. */
.review-workspace-header {
--page-header-orb: rgba(91, 112, 232, .13);
--page-header-start: #f5f6ff;
--page-header-end: #f1f8f5;
--page-header-shadow: rgba(91, 112, 232, .075);
}
.activity-command-card {
--page-header-orb: rgba(57, 120, 246, .12);
--page-header-start: #f2f7ff;
--page-header-end: #f0faf6;
--page-header-shadow: rgba(57, 120, 246, .07);
}
.career-jobs-directory > .workspace-page-header {
--page-header-orb: rgba(35, 177, 104, .14);
--page-header-start: #eefaf3;
--page-header-end: #f4f9ff;
--page-header-shadow: rgba(35, 177, 104, .075);
}
.career-opportunities-directory > .workspace-page-header {
--page-header-orb: rgba(242, 154, 46, .14);
--page-header-start: #fff7ec;
--page-header-end: #f3faf6;
--page-header-shadow: rgba(209, 126, 27, .075);
}
.career-recruiters-directory > .workspace-page-header {
--page-header-orb: rgba(180, 105, 57, .12);
--page-header-start: #ffd8be;
--page-header-end: #fff3ec;
--page-header-shadow: rgba(180, 105, 57, .11);
}
.meetings-command-card {
--page-header-orb: rgba(255, 193, 31, .2);
--page-header-start: #fff8df;
--page-header-end: #fffdf5;
--page-header-shadow: rgba(210, 154, 16, .075);
}
.campaign-command-card {
--page-header-orb: rgba(87, 136, 108, .18);
--page-header-start: rgba(87, 136, 108, .16);
--page-header-end: rgba(87, 136, 108, .06);
--page-header-shadow: rgba(87, 136, 108, .09);
}
.content-command-card {
--page-header-orb: rgba(237, 111, 150, .16);
--page-header-start: #fff0f5;
--page-header-end: #fff8ec;
--page-header-shadow: rgba(205, 82, 123, .075);
}
.leads-command-card {
--page-header-orb: rgba(32, 168, 134, .14);
--page-header-start: #eefaf7;
--page-header-end: #f5f8ff;
--page-header-shadow: rgba(32, 168, 134, .075);
}
.workspace-page-header-main {
display: contents;
}
.workspace-page-header-icon {
display: grid;
width: 76px;
height: 76px;
place-items: center;
overflow: hidden;
border: 2px solid #fff;
border-radius: 22px;
background: #fff;
box-shadow: none;
transition: transform .24s cubic-bezier(.2, .72, .25, 1);
}
.workspace-page-header:hover .workspace-page-header-icon {
transform: translateY(-2px) scale(1.055) rotate(-1.5deg);
}
.workspace-page-header-icon img {
display: block;
width: 88%;
height: 88%;
object-fit: contain;
}
.workspace-page-header-copy {
display: grid;
min-width: 0;
gap: 9px;
}
.workspace-page-header-title-row {
display: flex;
min-width: 0;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.workspace-page-header h1 {
margin: 0;
color: #10241b;
font-size: clamp(32px, 3vw, 48px);
font-weight: 800;
line-height: 1;
letter-spacing: -.052em;
text-wrap: balance;
}
.workspace-page-header p {
max-width: 780px;
margin: 0;
color: #64736b;
font-size: 15px;
font-weight: 500;
line-height: 1.55;
text-wrap: pretty;
}
.workspace-page-header .page-campaign-label {
min-height: 32px;
padding: 0 12px;
border-color: rgba(8, 122, 72, .15);
background: rgba(234, 247, 240, .88);
color: #147044;
font-size: 11.5px;
}
.workspace-page-header .page-campaign-label svg {
width: 14px;
height: 14px;
}
.workspace-page-header-actions {
display: flex;
min-width: 0;
align-items: center;
justify-content: flex-end;
gap: 10px;
align-self: center;
}
.workspace-page-header-actions > form {
margin: 0;
}
.workspace-page-header .workspace-config-action {
border-color: #111c17;
background: #111c17;
color: #fff;
box-shadow: 0 9px 20px rgba(9, 25, 17, .13);
}
.workspace-page-header .workspace-config-action:hover {
border-color: #020705;
background: #020705;
color: #fff;
}
.workspace-page-header .meetings-tabs,
.workspace-page-header .content-tabs {
align-self: center;
margin: 0;
}
.workspace-page-header .meetings-command-controls,
.workspace-page-header .campaign-command-controls,
.workspace-page-header .content-command-controls,
.workspace-page-header .leads-command-controls {
display: flex;
width: auto;
min-height: 0;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.workspace-page-header .leads-command-controls {
max-width: min(100%, 920px);
flex-wrap: wrap;
}
.career-saved-button.is-linkedin-profile svg {
fill: none;
stroke: currentColor;
stroke-width: 2.35;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (max-width: 1080px) {
.workspace-page-header {
grid-template-columns: 64px minmax(0, 1fr) !important;
gap: 18px !important;
}
.workspace-page-header-actions {
grid-column: 1 / -1;
justify-content: flex-start;
}
.workspace-page-header .meetings-command-controls,
.workspace-page-header .campaign-command-controls,
.workspace-page-header .content-command-controls,
.workspace-page-header .leads-command-controls {
justify-content: flex-start;
}
}
@media (max-width: 680px) {
.workspace-page-header {
min-height: 0;
padding: 21px 19px 23px !important;
border-radius: 18px;
grid-template-columns: 52px minmax(0, 1fr) !important;
}
.workspace-page-header-icon {
width: 52px;
height: 52px;
border-radius: 16px;
}
.workspace-page-header-icon img {
width: 88%;
height: 88%;
}
.workspace-page-header h1 {
font-size: clamp(27px, 9vw, 34px);
}
.workspace-page-header p {
font-size: 13px;
}
.workspace-page-header-actions {
align-items: stretch;
flex-direction: column;
}
.workspace-page-header-actions .career-secondary-action,
.workspace-page-header-actions .career-primary-action,
.workspace-page-header-actions .review-settings-action {
width: 100%;
}
.workspace-page-header .meetings-tabs,
.workspace-page-header .content-tabs {
width: 100%;
overflow-x: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.workspace-page-header-icon {
transition: none;
}
}
.career-pipeline-column[data-stage="applied"] {
background: linear-gradient(180deg, #fffaf3 0%, #fff 32%);
}
.career-pipeline-column[data-stage="applied"] > header {
border-color: var(--career-applied-line);
}
.career-pipeline-column[data-stage="applied"] > header b {
background: var(--career-applied-soft);
color: var(--career-applied-dark);
}
.career-pipeline-column[data-stage="applied"] .career-opportunity-card {
border-color: #f0d7b6;
}
/* Premium approval workspace */
.review-workspace {
--review-ink: #10241b;
--review-copy: #64736b;
--review-line: #e2eae5;
display: grid;
gap: 22px;
width: min(100%, 1560px);
margin: 0 auto;
padding: 8px 0 38px;
}
.review-workspace-hero {
display: grid;
min-height: 174px;
grid-template-columns: 76px minmax(0, 1fr) auto;
align-items: center;
gap: 24px;
padding: 28px 30px;
border-radius: 24px;
background:
radial-gradient(circle at 13% 15%, rgba(91, 112, 232, .11), transparent 27%),
linear-gradient(115deg, #f7f8ff 0%, #fff 52%, #f3f9f6 100%);
box-shadow:
0 2px 8px rgba(15, 40, 29, .025),
0 22px 58px rgba(15, 40, 29, .065);
}
.review-hero-visual,
.review-summary-card > span,
.review-item-visual {
display: grid;
place-items: center;
overflow: hidden;
background: rgba(255, 255, 255, .82);
box-shadow:
0 1px 2px rgba(22, 48, 35, .08),
0 10px 26px rgba(22, 48, 35, .1);
}
.review-hero-visual {
width: 76px;
height: 76px;
border-radius: 22px;
}
.review-hero-visual img,
.review-summary-card img,
.review-item-visual img {
width: 88%;
height: 88%;
object-fit: contain;
}
.review-hero-copy {
min-width: 0;
}
.review-eyebrow,
.review-workspace-meta > span,
.review-workspace-hero small {
color: #5b61d6;
font-size: 11px;
font-weight: 900;
letter-spacing: .085em;
text-transform: uppercase;
}
.review-workspace-hero h1 {
margin: 5px 0 7px;
color: var(--review-ink);
font-size: clamp(32px, 3vw, 48px);
line-height: 1;
letter-spacing: -.052em;
}
.review-workspace-hero p {
max-width: 760px;
margin: 0;
color: var(--review-copy);
font-size: 15px;
}
.review-settings-action {
display: inline-flex;
min-height: 46px;
align-items: center;
gap: 9px;
padding: 0 17px;
border: 0;
border-radius: 13px;
background: #111c17;
color: #fff;
font: inherit;
font-size: 13px;
font-weight: 850;
cursor: pointer;
box-shadow: 0 10px 24px rgba(9, 25, 17, .14);
}
.review-settings-action svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
}
.review-summary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(190px, .55fr)) minmax(300px, 1.2fr);
gap: 14px;
}
.review-summary-card {
display: grid;
min-height: 94px;
grid-template-columns: 54px minmax(0, 1fr);
align-items: center;
gap: 14px;
padding: 17px 19px;
border-radius: 18px;
background: #fff;
box-shadow:
0 1px 4px rgba(15, 40, 29, .035),
0 12px 34px rgba(15, 40, 29, .05);
}
.review-summary-card > span {
width: 54px;
height: 54px;
border-radius: 16px;
box-shadow: none;
}
.review-summary-card > span svg {
width: 25px;
height: 25px;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
.review-summary-card.is-pending > span,
.review-summary-card.is-approved > span {
background: #fff1e9;
color: #ed641e;
}
.review-summary-card.is-safe > span {
background: #e8f7ef;
color: #079357;
}
.review-summary-card > div {
display: grid;
gap: 2px;
}
.review-summary-card strong {
color: var(--review-ink);
font-size: 23px;
line-height: 1.1;
letter-spacing: -.035em;
}
.review-summary-card.is-safe strong {
font-size: 16px;
}
.review-summary-card small {
color: var(--review-copy);
font-size: 12px;
font-weight: 650;
}
.review-workspace-filter {
display: flex;
width: max-content;
max-width: 100%;
gap: 5px;
padding: 5px;
overflow-x: auto;
border-radius: 14px;
background: #f1f5f2;
}
.review-workspace-filter a {
display: inline-flex;
min-height: 40px;
align-items: center;
gap: 8px;
padding: 0 14px;
border-radius: 10px;
color: #67756e;
font-size: 12px;
font-weight: 820;
text-decoration: none;
white-space: nowrap;
}
.review-workspace-filter a.is-active {
background: #fff;
color: var(--review-ink);
box-shadow: 0 4px 14px rgba(15, 40, 29, .07);
}
.review-workspace-filter span {
display: inline-grid;
min-width: 22px;
height: 22px;
place-items: center;
padding: 0 6px;
border-radius: 999px;
background: #e7eeea;
color: #596961;
font-size: 10px;
}
.review-workspace-filter a.is-active span {
background: #eaf6ef;
color: #087a48;
}
.content-review-controls {
display: grid;
gap: 22px;
padding: 24px 34px 0;
}
.content-review-controls + .content-content-area {
padding-top: 28px;
}
.review-workspace-list {
display: grid;
gap: 14px;
}
.review-workspace-item {
display: grid;
min-height: 148px;
grid-template-columns: 68px minmax(0, 1fr) auto;
align-items: center;
gap: 20px;
padding: 22px 24px;
border-radius: 20px;
background: #fff;
box-shadow:
0 1px 4px rgba(15, 40, 29, .035),
0 13px 36px rgba(15, 40, 29, .055);
transition: box-shadow .2s ease, transform .2s ease;
}
.review-workspace-item:hover {
box-shadow:
0 2px 6px rgba(15, 40, 29, .04),
0 19px 46px rgba(15, 40, 29, .08);
transform: translateY(-2px);
}
.review-item-visual {
width: 68px;
height: 68px;
border-radius: 19px;
}
.review-workspace-copy {
display: grid;
min-width: 0;
gap: 5px;
}
.review-workspace-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.review-workspace-meta time {
color: #87938d;
font-size: 11px;
font-weight: 650;
}
.review-workspace-item h2 {
margin: 0;
color: var(--review-ink);
font-size: 20px;
line-height: 1.2;
letter-spacing: -.026em;
}
.review-workspace-item p {
margin: 0;
color: var(--review-copy);
font-size: 13px;
}
.review-workspace-item blockquote {
margin: 7px 0 0;
padding: 12px 14px;
border: 0;
border-radius: 12px;
background: #f5f8f6;
color: #34483e;
font-size: 13px;
line-height: 1.55;
white-space: pre-line;
}
.review-workspace-actions {
display: flex;
align-items: center;
gap: 8px;
}
.review-workspace-actions form {
margin: 0;
}
.review-reject-action,
.review-approve-action {
display: inline-flex;
min-height: 43px;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 15px;
border: 0;
border-radius: 11px;
font: inherit;
font-size: 12px;
font-weight: 850;
cursor: pointer;
}
.review-reject-action {
background: #f2f5f3;
color: #526259;
}
.review-approve-action {
background: linear-gradient(135deg, #075f3b, #079357);
color: #fff;
box-shadow: 0 9px 20px rgba(8, 122, 72, .17);
}
.review-approve-action svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
}
.review-workspace-status {
display: inline-flex;
min-height: 32px;
align-items: center;
padding: 0 11px;
border-radius: 999px;
background: #f1f4f2;
color: #5b6a62;
font-size: 11px;
font-weight: 850;
}
.review-workspace-status.is-approved,
.review-workspace-status.is-executed {
background: #e9f7ef;
color: #147044;
}
.review-workspace-status.is-rejected {
background: #fff0f1;
color: #b94755;
}
.review-workspace-empty {
display: grid;
min-height: 390px;
place-items: center;
align-content: center;
gap: 8px;
padding: 34px 44px 42px;
border-radius: 22px;
background: #fff;
text-align: center;
box-shadow:
0 1px 4px rgba(15, 40, 29, .025),
0 16px 42px rgba(15, 40, 29, .045);
}
.review-workspace-empty-art {
display: block;
width: min(100%, 500px);
max-height: 230px;
margin: 0 auto 8px;
object-fit: contain;
mix-blend-mode: multiply;
}
.review-workspace-empty h2,
.review-workspace-empty p {
margin: 0;
}
.review-workspace-empty h2 {
margin-top: 5px;
font-size: 22px;
}
.review-workspace-empty p {
max-width: 54ch;
color: var(--review-copy);
line-height: 1.55;
}
/* Opportunity detail is a durable application case file, not an admin form. */
.career-opportunity-workspace {
--op-ink: #10241b;
--op-copy: #65746c;
--op-line: #e2eae5;
display: grid;
gap: 18px;
width: min(100%, 1600px);
margin: 0 auto;
padding: 4px 0 42px;
color: var(--op-ink);
}
.career-opportunity-breadcrumb {
display: flex;
align-items: center;
gap: 9px;
color: #829089;
font-size: 12px;
font-weight: 700;
}
.career-opportunity-breadcrumb a {
display: inline-flex;
align-items: center;
gap: 6px;
color: #4d6057;
text-decoration: none;
}
.career-opportunity-breadcrumb a:hover {
color: #087a48;
}
.career-opportunity-breadcrumb svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
}
.career-opportunity-hero {
display: grid;
min-height: 214px;
grid-template-columns: 92px minmax(0, 1fr) minmax(260px, auto);
align-items: center;
gap: 26px;
padding: 30px 32px;
border-radius: 24px;
background:
radial-gradient(circle at 7% 18%, rgba(10, 102, 194, .1), transparent 23%),
radial-gradient(circle at 85% 110%, rgba(8, 122, 72, .08), transparent 30%),
#fff;
box-shadow:
0 2px 8px rgba(15, 40, 29, .025),
0 22px 58px rgba(15, 40, 29, .065);
}
.career-opportunity-visual {
display: grid;
width: 92px;
height: 92px;
place-items: center;
overflow: hidden;
border-radius: 25px;
background: #fff;
box-shadow:
0 1px 3px rgba(13, 44, 29, .08),
0 13px 30px rgba(10, 102, 194, .1);
}
.career-opportunity-visual img {
width: 78px;
height: 78px;
object-fit: contain;
}
.career-opportunity-hero-copy {
min-width: 0;
}
.career-opportunity-kicker {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 9px;
}
.career-opportunity-kicker > span {
color: var(--linkedin-blue);
font-size: 11px;
font-weight: 900;
letter-spacing: .085em;
text-transform: uppercase;
}
.career-opportunity-kicker b,
.career-stage-badge {
display: inline-flex;
min-height: 27px;
align-items: center;
padding: 0 10px;
border-radius: 999px;
background: #edf2ef;
color: #5d6c64;
font-size: 10px;
font-weight: 900;
letter-spacing: .035em;
text-transform: uppercase;
}
.career-opportunity-kicker b.is-applied {
background: var(--career-applied-soft);
color: var(--career-applied-dark);
}
.career-opportunity-hero h1 {
max-width: 900px;
margin: 0;
color: var(--op-ink);
font-size: clamp(31px, 3.2vw, 52px);
line-height: 1.03;
letter-spacing: -.055em;
text-wrap: balance;
}
.career-opportunity-hero-copy > p {
margin: 13px 0 3px;
color: #4f6258;
font-size: 16px;
}
.career-opportunity-hero-copy > small {
color: #839089;
font-size: 12px;
}
.career-opportunity-hero-actions {
display: grid;
justify-items: stretch;
gap: 10px;
}
.career-linkedin-action,
.career-kipdo-action,
.career-applied-action,
.career-neutral-action,
.career-opportunity-stage-control button {
display: inline-flex;
min-height: 46px;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 17px;
border: 0;
border-radius: 12px;
font: inherit;
font-size: 12.5px;
font-weight: 850;
text-decoration: none;
cursor: pointer;
transition: box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.career-linkedin-action svg,
.career-linkedin-text-link svg {
width: 18px;
height: 18px;
}
.career-linkedin-action:hover,
.career-kipdo-action:hover,
.career-applied-action:hover,
.career-neutral-action:hover,
.career-opportunity-stage-control button:hover {
transform: translateY(-1px);
}
.career-kipdo-action,
.career-opportunity-stage-control button {
background: linear-gradient(135deg, #075f3b, #079357);
color: #fff;
box-shadow: 0 9px 21px rgba(8, 122, 72, .17);
}
.career-applied-action {
background: linear-gradient(135deg, #a95505, #e08116);
color: #fff;
box-shadow: 0 9px 21px rgba(201, 109, 11, .2);
}
.career-neutral-action {
background: #eff3f1;
color: #53635b;
}
.career-opportunity-stage-control {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
margin: 0;
}
.career-opportunity-stage-control select {
min-width: 142px;
min-height: 46px;
padding: 0 32px 0 12px;
border: 1px solid #d8e2dc;
border-radius: 12px;
outline: 0;
background: #fff;
color: #405149;
font-size: 12px;
font-weight: 750;
}
.career-opportunity-stage-control select:focus {
border-color: #83b99e;
box-shadow: 0 0 0 3px rgba(8, 122, 72, .09);
}
.career-opportunity-journey {
display: grid;
gap: 15px;
padding: 17px 20px 19px;
overflow: hidden;
border: 1px solid #e7ece9;
border-radius: 14px;
background: #fff;
box-shadow: none;
}
.career-opportunity-journey-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.career-opportunity-journey-heading > strong {
color: var(--op-ink);
font-size: 14px;
font-weight: 850;
letter-spacing: -.02em;
}
.career-opportunity-journey-heading > span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
background: transparent;
color: #66756e;
font-size: 10px;
font-weight: 700;
}
.career-opportunity-journey-heading > span i {
width: 7px;
height: 7px;
border-radius: 999px;
background: #087a48;
box-shadow: none;
}
.career-opportunity-journey-heading > span b {
color: var(--op-ink);
font-weight: 850;
}
.career-opportunity-journey.is-current-applied .career-opportunity-journey-heading > span i {
background: var(--career-applied);
}
.career-opportunity-journey ol {
position: relative;
display: grid;
grid-template-columns: repeat(6, minmax(96px, 1fr));
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.career-opportunity-journey ol::before {
position: absolute;
z-index: 0;
top: 14px;
right: 8%;
left: 8%;
height: 1px;
border-radius: 999px;
background: #dde5e1;
content: "";
}
.career-opportunity-journey li {
position: relative;
display: grid;
z-index: 1;
min-width: 0;
grid-template-columns: 28px minmax(0, 1fr);
align-items: center;
gap: 8px;
padding: 0 10px;
color: #7a8780;
}
.career-journey-marker {
position: relative;
display: grid;
width: 28px;
height: 28px;
place-items: center;
border: 1px solid #d8e2dc;
border-radius: 8px;
background: #fff;
color: #8a9690;
box-shadow: none;
font-size: 10px;
font-variant-numeric: tabular-nums;
font-weight: 900;
transition:
border-color .2s ease,
background .2s ease,
color .2s ease,
box-shadow .2s ease,
transform .2s ease;
}
.career-opportunity-journey li > strong {
overflow: hidden;
color: #6f7d76;
font-size: 11px;
font-weight: 750;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-opportunity-journey li.is-current {
color: #087a48;
}
.career-opportunity-journey li.is-current .career-journey-marker {
border-color: #087a48;
background: #087a48;
color: #fff;
box-shadow: none;
transform: none;
}
.career-opportunity-journey li.is-current > strong {
color: var(--op-ink);
font-weight: 900;
}
.career-opportunity-journey li.is-current.is-applied {
color: var(--career-applied-dark);
}
.career-opportunity-journey li.is-current.is-applied .career-journey-marker {
border-color: var(--career-applied);
background: var(--career-applied);
box-shadow: none;
}
.career-opportunity-journey.is-current-applied li:nth-child(1) .career-journey-marker,
.career-opportunity-journey.is-current-interviewing li:nth-child(-n + 2) .career-journey-marker,
.career-opportunity-journey.is-current-offer li:nth-child(-n + 3) .career-journey-marker,
.career-opportunity-journey.is-current-accepted li:nth-child(-n + 4) .career-journey-marker {
border-color: #bcd8c8;
background: #f3f8f5;
color: transparent;
}
.career-opportunity-journey.is-current-applied li:nth-child(1) .career-journey-marker::before,
.career-opportunity-journey.is-current-interviewing li:nth-child(-n + 2) .career-journey-marker::before,
.career-opportunity-journey.is-current-offer li:nth-child(-n + 3) .career-journey-marker::before,
.career-opportunity-journey.is-current-accepted li:nth-child(-n + 4) .career-journey-marker::before {
position: absolute;
width: 11px;
height: 6px;
border-bottom: 2px solid #087a48;
border-left: 2px solid #087a48;
content: "";
transform: translateY(-2px) rotate(-45deg);
}
.career-opportunity-journey.is-current-applied li:nth-child(1) > strong,
.career-opportunity-journey.is-current-interviewing li:nth-child(-n + 2) > strong,
.career-opportunity-journey.is-current-offer li:nth-child(-n + 3) > strong,
.career-opportunity-journey.is-current-accepted li:nth-child(-n + 4) > strong {
color: #3e6552;
}
.career-opportunity-journey li.is-current.is-closed .career-journey-marker {
border-color: #7d8b84;
background: #69776f;
box-shadow: none;
}
@media (max-width: 980px) {
.career-opportunity-journey {
overflow-x: auto;
}
.career-opportunity-journey-heading,
.career-opportunity-journey ol {
min-width: 760px;
}
}
.career-opportunity-layout {
display: grid;
grid-template-columns: minmax(0, 1.34fr) minmax(330px, .66fr);
align-items: start;
gap: 18px;
}
.career-opportunity-main,
.career-opportunity-aside {
display: grid;
gap: 16px;
}
.career-opportunity-panel,
.career-opportunity-history {
padding: 24px;
border: 0;
border-radius: 20px;
background: #fff;
box-shadow:
0 1px 4px rgba(15, 40, 29, .03),
0 13px 38px rgba(15, 40, 29, .055);
}
.career-opportunity-panel > header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 15px;
}
.career-panel-3d-icon,
.career-panel-icon {
display: grid;
width: 52px;
height: 52px;
flex: 0 0 auto;
place-items: center;
overflow: hidden;
border-radius: 16px;
background: #eef8f3;
color: #087a48;
box-shadow: 0 7px 18px rgba(15, 70, 45, .08);
}
.career-panel-3d-icon {
background: #fff;
}
.career-panel-3d-icon img {
width: 48px;
height: 48px;
object-fit: contain;
}
.career-panel-icon.is-blue {
background: var(--linkedin-blue-soft);
color: var(--linkedin-blue);
}
.career-panel-icon.is-orange {
background: var(--career-applied-soft);
color: var(--career-applied);
}
.career-panel-icon svg {
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
}
.career-opportunity-panel header div {
min-width: 0;
}
.career-opportunity-panel header small {
display: block;
margin-bottom: 2px;
color: #087a48;
font-size: 9.5px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.career-opportunity-panel h2 {
margin: 0;
color: var(--op-ink);
font-size: 20px;
line-height: 1.16;
letter-spacing: -.03em;
}
.career-opportunity-panel > p,
.career-opportunity-panel li {
color: var(--op-copy);
font-size: 13.5px;
line-height: 1.65;
}
.career-opportunity-panel > p {
margin: 0 0 14px;
}
.career-next-action-panel {
background:
radial-gradient(circle at 93% 4%, rgba(8, 122, 72, .09), transparent 30%),
#fff;
}
.career-next-action-panel blockquote,
.career-conversation-panel > blockquote {
margin: 0 0 15px;
padding: 14px 16px;
border: 0;
border-radius: 13px;
background: #f4f8f6;
color: #41544a;
font-size: 13px;
line-height: 1.6;
}
.career-next-action-panel blockquote strong {
display: block;
margin-bottom: 3px;
color: #087a48;
font-size: 10px;
letter-spacing: .06em;
text-transform: uppercase;
}
.career-opportunity-action-row {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.career-opportunity-action-row form {
margin: 0;
}
.career-truth-summary,
.career-contact-context {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-bottom: 14px;
}
.career-truth-summary span,
.career-contact-context span {
padding: 11px 12px;
border-radius: 11px;
background: #f5f8f6;
color: #5e6e66;
font-size: 12px;
}
.career-truth-summary b,
.career-contact-context b {
display: block;
color: #354a40;
font-size: 9px;
letter-spacing: .06em;
text-transform: uppercase;
}
.career-truth-form {
display: grid;
gap: 10px;
}
.career-truth-form textarea {
width: 100%;
resize: vertical;
padding: 12px 14px;
border: 1px solid #d9e3dd;
border-radius: 12px;
outline: 0;
background: #fbfdfc;
color: var(--op-ink);
line-height: 1.5;
}
.career-truth-form textarea:focus {
border-color: #8bbba3;
box-shadow: 0 0 0 3px rgba(8, 122, 72, .08);
}
.career-truth-form label {
display: flex;
align-items: flex-start;
gap: 8px;
color: #627169;
font-size: 11.5px;
}
.career-truth-form .career-kipdo-action {
justify-self: start;
}
.career-change-panel ul {
display: grid;
gap: 7px;
margin: 0 0 14px;
padding-left: 20px;
}
.career-draft-box {
margin: 4px 0 14px;
padding: 15px 16px;
border-radius: 13px;
background: var(--linkedin-blue-soft);
color: #28475f;
font-size: 13px;
line-height: 1.6;
}
.career-opportunity-notice {
padding: 10px 12px;
border-radius: 10px;
background: #fff7e9;
color: #92520d !important;
font-size: 11px !important;
font-weight: 700;
}
.career-opportunity-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 16px 0 0;
}
.career-opportunity-facts.is-stacked {
grid-template-columns: 1fr;
margin: 0;
}
.career-opportunity-facts > div {
min-width: 0;
padding: 12px 13px;
border-radius: 12px;
background: #f5f8f6;
}
.career-opportunity-facts dt {
margin-bottom: 3px;
color: #829089;
font-size: 9px;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.career-opportunity-facts dd {
margin: 0;
overflow-wrap: anywhere;
color: #35483e;
font-size: 12.5px;
font-weight: 700;
}
.career-linkedin-text-link {
display: inline-flex;
min-height: 42px;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 12px;
padding: 0 13px;
border: 1px solid var(--linkedin-blue-line);
border-radius: 11px;
font-size: 12px;
font-weight: 850;
text-decoration: none;
}
.career-contact-attach-form {
display: grid;
grid-template-columns: minmax(0, 1fr) 130px auto;
align-items: start;
gap: 7px;
margin-bottom: 13px;
}
.career-contact-picker {
min-width: 0;
}
.career-contact-picker .opportunity-contact-search {
min-height: 38px;
border-radius: 9px;
}
.career-contact-picker .opportunity-contact-search input {
min-height: 36px;
font-size: 11px;
font-weight: 650;
}
.career-contact-picker .opportunity-contact-status {
padding-left: 2px;
}
.career-contact-attach-form select,
.career-contact-attach-form button,
.career-contact-list select,
.career-contact-list button {
min-width: 0;
min-height: 38px;
padding: 0 9px;
border: 1px solid #d8e2dc;
border-radius: 9px;
background: #fff;
color: #45574e;
font: inherit;
font-size: 10.5px;
font-weight: 750;
}
.career-contact-attach-form button,
.career-contact-list button {
border-color: #c5ddcf;
background: #edf7f1;
color: #136d43;
cursor: pointer;
}
.career-contact-attach-form button:disabled {
border-color: #dfe7e2;
background: #f4f7f5;
color: #9aa6a0;
cursor: not-allowed;
}
.career-contact-list {
display: grid;
gap: 8px;
}
.career-contact-list article {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 7px;
padding: 10px;
border-radius: 11px;
background: #f7f9f8;
}
.career-contact-list article > div {
display: grid;
min-width: 0;
}
.career-contact-list strong {
overflow: hidden;
color: var(--op-ink);
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-contact-list small {
overflow: hidden;
color: #77857e;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-contact-list form {
margin: 0;
}
.career-contact-list button.is-danger {
border-color: #f0d4d8;
background: #fff2f3;
color: #ae4653;
}
.career-opportunity-list {
display: grid;
gap: 8px;
}
.career-opportunity-list > a,
.career-opportunity-list > article {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
padding: 11px 12px;
border-radius: 11px;
background: #f6f9f7;
color: inherit;
text-decoration: none;
}
.career-opportunity-list strong {
color: #30443a;
font-size: 12px;
}
.career-opportunity-list span {
color: #819089;
font-size: 10px;
}
.career-empty-copy {
margin: 0;
padding: 12px 13px;
border-radius: 11px;
background: #f7f9f8;
color: #7a8881 !important;
font-size: 11.5px !important;
}
.career-opportunity-history {
padding: 0;
overflow: hidden;
}
.career-opportunity-history summary {
display: flex;
min-height: 58px;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 20px;
color: var(--op-ink);
font-size: 13px;
font-weight: 850;
cursor: pointer;
}
.career-opportunity-history summary span {
padding: 4px 7px;
border-radius: 999px;
background: #eff4f1;
color: #65756c;
font-size: 9px;
}
.career-opportunity-history > div {
display: grid;
padding: 0 14px 14px;
}
.career-opportunity-history article {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto;
gap: 8px;
padding: 10px 7px;
border-top: 1px solid #edf1ef;
}
.career-opportunity-history time,
.career-opportunity-history a {
color: #819089;
font-size: 9.5px;
font-weight: 750;
}
.career-opportunity-history a {
color: var(--linkedin-blue);
text-decoration: none;
}
.career-opportunity-history p {
margin: 0;
color: #55665d;
font-size: 10.5px;
line-height: 1.45;
}
@media (max-width: 1080px) {
.career-opportunity-hero {
grid-template-columns: 76px minmax(0, 1fr);
}
.career-opportunity-visual {
width: 76px;
height: 76px;
}
.career-opportunity-visual img {
width: 65px;
height: 65px;
}
.career-opportunity-hero-actions {
grid-column: 1 / -1;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.career-opportunity-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 820px) {
.review-workspace-hero {
grid-template-columns: 64px minmax(0, 1fr);
}
.review-hero-visual {
width: 64px;
height: 64px;
}
.review-settings-action {
grid-column: 1 / -1;
justify-self: start;
}
.review-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.review-summary-card.is-safe {
grid-column: 1 / -1;
}
.content-review-controls {
padding-inline: 22px;
}
.review-workspace-item {
grid-template-columns: 58px minmax(0, 1fr);
}
.review-item-visual {
width: 58px;
height: 58px;
}
.review-workspace-actions,
.review-workspace-status {
grid-column: 2;
justify-self: start;
}
.career-opportunity-journey {
grid-template-columns: repeat(6, 140px);
}
}
@media (max-width: 620px) {
.review-workspace-hero,
.career-opportunity-hero {
padding: 22px 19px;
border-radius: 19px;
}
.review-workspace-hero {
grid-template-columns: 52px minmax(0, 1fr);
gap: 15px;
}
.review-hero-visual {
width: 52px;
height: 52px;
border-radius: 15px;
}
.review-workspace-hero h1 {
font-size: 30px;
}
.review-summary-grid {
grid-template-columns: 1fr;
}
.review-summary-card.is-safe {
grid-column: auto;
}
.content-review-controls {
gap: 18px;
padding: 18px 18px 0;
}
.review-workspace-item {
grid-template-columns: 50px minmax(0, 1fr);
gap: 13px;
padding: 17px;
}
.review-item-visual {
width: 50px;
height: 50px;
border-radius: 14px;
}
.review-workspace-meta {
align-items: flex-start;
flex-direction: column;
gap: 3px;
}
.review-workspace-actions {
flex-wrap: wrap;
}
.review-workspace-empty {
min-height: 330px;
padding: 28px 18px 34px;
}
.review-workspace-empty-art {
max-height: 175px;
}
.review-workspace-empty h2 {
font-size: 19px;
}
.review-workspace-empty p {
font-size: 13px;
}
.career-opportunity-hero {
grid-template-columns: 60px minmax(0, 1fr);
gap: 15px;
}
.career-opportunity-visual {
width: 60px;
height: 60px;
border-radius: 18px;
}
.career-opportunity-visual img {
width: 52px;
height: 52px;
}
.career-opportunity-hero h1 {
font-size: 29px;
}
.career-opportunity-hero-actions {
display: grid;
grid-template-columns: 1fr;
}
.career-opportunity-stage-control {
grid-template-columns: 1fr;
}
.career-opportunity-panel {
padding: 19px;
}
.career-opportunity-facts,
.career-truth-summary,
.career-contact-context {
grid-template-columns: 1fr;
}
.career-contact-attach-form {
grid-template-columns: 1fr;
}
.career-contact-list article {
grid-template-columns: 1fr;
}
}
.career-job-detail-head h2,
.career-recruiter-detail-head h2 {
margin: 0;
max-width: 760px;
font-size: clamp(25px, 2.2vw, 34px);
line-height: 1.12;
letter-spacing: -.04em;
}
.career-job-detail-head p,
.career-recruiter-detail-head p {
margin: 10px 0 4px;
color: #4e5f56;
font-size: 15px;
}
.career-job-detail-head small,
.career-recruiter-detail-head small {
color: #7b8982;
font-size: 12px;
}
.career-detail-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
}
.career-detail-actions form {
margin: 0;
}
.career-detail-body {
display: grid;
padding: 4px 32px 20px;
}
.career-detail-section {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
gap: 17px;
padding: 26px 0;
border-bottom: 1px solid var(--career-line);
}
.career-detail-section:last-child {
border-bottom: 0;
}
.career-section-icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 14px;
background: #eaf7f0;
color: var(--career-green);
}
.career-section-icon.is-blue {
background: #edf3ff;
color: #3975ce;
}
.career-section-icon.is-orange {
background: #fff3e7;
color: #c57627;
}
.career-section-icon svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.career-detail-section h3 {
margin: 0 0 8px;
font-size: 17px;
letter-spacing: -.02em;
}
.career-detail-section p,
.career-detail-section blockquote {
margin: 0;
color: #5d6e65;
font-size: 14px;
line-height: 1.7;
}
.career-detail-section blockquote {
padding: 14px 16px;
border: 0;
border-radius: 13px;
background: #f5f8f6;
}
.career-detail-section > div > small {
display: block;
margin-top: 8px;
color: #849089;
font-size: 11px;
}
.career-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 0;
}
.career-facts div {
padding: 13px 15px;
border-radius: 12px;
background: #f6f9f7;
}
.career-facts dt {
margin-bottom: 3px;
color: #85928b;
font-size: 10px;
font-weight: 850;
letter-spacing: .06em;
text-transform: uppercase;
}
.career-facts dd {
overflow: hidden;
margin: 0;
color: #31443a;
font-size: 13px;
font-weight: 750;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-contact-chips,
.career-linked-list {
display: grid;
gap: 9px;
}
.career-contact-chips a,
.career-linked-list a {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
align-items: center;
gap: 11px;
padding: 11px 13px;
border-radius: 12px;
background: #f6f9f7;
color: inherit;
text-decoration: none;
}
.career-contact-chips img,
.career-contact-chips a > span {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
background: #dcebe3;
color: #15593a;
font-weight: 850;
}
.career-contact-chips b,
.career-contact-chips small {
grid-column: 2;
}
.career-contact-chips b {
align-self: end;
font-size: 13px;
}
.career-contact-chips small {
align-self: start;
color: #7a8780;
font-size: 11px;
}
.career-linked-list a {
grid-template-columns: minmax(0, 1fr) auto;
}
.career-linked-list span {
display: grid;
}
.career-linked-list strong {
font-size: 13px;
}
.career-linked-list small {
color: #7a8881;
font-size: 11px;
}
.career-linked-list b {
padding: 5px 9px;
border-radius: 999px;
background: #eaf6ef;
color: var(--career-green);
font-size: 10px;
text-transform: uppercase;
}
.career-avatar {
display: grid;
place-items: center;
width: 58px;
height: 58px;
overflow: hidden;
border-radius: 50%;
background: linear-gradient(145deg, #dcece3, #edf5f0);
color: #15593a;
font-size: 18px;
font-weight: 900;
box-shadow: 0 0 0 4px #fff, 0 8px 22px rgba(21, 89, 58, .1);
}
.career-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.career-avatar.is-large {
width: 84px;
height: 84px;
font-size: 25px;
}
.career-recruiter-detail-head {
grid-template-columns: 84px minmax(0, 1fr) auto;
align-items: center;
}
.career-recruiter-detail-head .career-detail-source {
margin-bottom: 7px;
}
.career-recruiter-detail-head h2 {
font-size: 28px;
}
.career-empty-state {
display: grid;
justify-items: center;
padding: 80px 24px;
border-radius: 22px;
background: linear-gradient(145deg, #f4faf6, #fff);
text-align: center;
box-shadow: 0 18px 48px rgba(15, 40, 29, .06);
}
.career-empty-state h2 {
margin: 20px 0 6px;
font-size: 24px;
}
.career-empty-state p {
max-width: 560px;
margin: 0 0 22px;
color: var(--career-copy);
}
.recruiters-empty-workspace {
overflow: hidden;
border-radius: 24px;
background: #fff;
box-shadow:
0 2px 8px rgba(15, 40, 29, .025),
0 22px 58px rgba(15, 40, 29, .065);
}
.recruiters-empty-head {
display: grid;
gap: 6px;
padding: 24px 26px 18px;
}
.recruiters-empty-head > div {
display: flex;
align-items: center;
gap: 10px;
}
.recruiters-empty-head strong {
color: var(--career-ink);
font-size: 20px;
line-height: 1.2;
letter-spacing: -.025em;
}
.recruiters-empty-head span {
display: inline-grid;
min-width: 28px;
height: 28px;
place-items: center;
padding-inline: 8px;
border-radius: 999px;
background: #eaf6ef;
color: var(--career-green);
font-size: 12px;
font-weight: 850;
}
.recruiters-empty-head p {
margin: 0;
color: #74827b;
font-size: 13px;
}
.recruiters-empty-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
padding: 0 22px 22px;
}
.recruiters-empty-pane {
display: grid;
min-width: 0;
min-height: 590px;
align-content: center;
justify-items: center;
gap: 22px;
padding: 42px 34px;
border-radius: 22px;
text-align: center;
}
.recruiters-empty-pane--network {
background:
radial-gradient(circle at 50% 38%, rgba(146, 180, 167, .13), transparent 38%),
#fbfdfc;
}
.recruiters-empty-pane--context {
background:
radial-gradient(circle at 50% 38%, rgba(124, 169, 231, .12), transparent 38%),
#fbfcfe;
}
.recruiters-empty-pane > img {
display: block;
width: min(100%, 350px);
height: auto;
margin-block: -22px -14px;
object-fit: contain;
}
.recruiters-empty-copy {
display: grid;
justify-items: center;
gap: 10px;
}
.recruiters-empty-copy h2 {
margin: 0;
color: var(--career-ink);
font-size: clamp(23px, 2vw, 30px);
line-height: 1.14;
letter-spacing: -.04em;
text-wrap: balance;
}
.recruiters-empty-copy p {
max-width: 560px;
margin: 0;
color: #697770;
font-size: 15px;
line-height: 1.55;
text-wrap: balance;
}
.recruiters-empty-actions {
display: grid;
justify-items: center;
gap: 12px;
}
.recruiters-empty-actions > span {
color: #8a9690;
font-size: 12px;
font-weight: 700;
}
.recruiters-empty-text-action {
display: inline-flex;
min-height: 42px;
align-items: center;
gap: 9px;
padding-inline: 13px;
color: var(--career-green);
font-size: 13px;
font-weight: 850;
text-decoration: none;
}
.recruiters-empty-text-action svg,
.recruiters-empty-actions .career-secondary-action svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.recruiters-empty-text-action:hover {
color: #055c38;
}
.recruiters-empty-capabilities {
display: grid;
width: min(100%, 540px);
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.recruiters-empty-capabilities > span {
display: grid;
min-height: 102px;
align-content: center;
justify-items: center;
gap: 10px;
padding: 15px 10px;
border-radius: 16px;
background: rgba(255, 255, 255, .82);
color: #5f6f67;
font-size: 11px;
font-weight: 750;
line-height: 1.3;
box-shadow:
0 2px 7px rgba(24, 82, 54, .025),
0 10px 25px rgba(24, 82, 54, .045);
}
.recruiters-empty-capabilities svg {
width: 29px;
height: 29px;
fill: none;
stroke: #2675cf;
stroke-width: 1.9;
}
.career-browser--jobs-empty {
grid-template-columns: repeat(2, minmax(0, 1fr));
min-height: 680px;
}
.career-jobs-empty-pane {
display: grid;
min-width: 0;
grid-template-rows: 44px minmax(0, 1fr);
padding: 24px 26px 34px;
background: #fff;
}
.career-jobs-empty-pane--detail {
background: #fcfefd;
}
.career-jobs-empty-head {
display: flex;
align-items: center;
gap: 10px;
align-self: start;
}
.career-jobs-empty-head strong {
color: var(--career-ink);
font-size: 19px;
font-weight: 850;
letter-spacing: -.025em;
}
.career-jobs-empty-head span {
display: inline-grid;
min-width: 29px;
height: 29px;
padding-inline: 8px;
place-items: center;
border-radius: 999px;
background: #eaf6ef;
color: var(--career-green);
font-size: 12px;
font-weight: 850;
}
.career-jobs-empty-content {
display: grid;
min-width: 0;
align-content: center;
justify-items: center;
gap: 10px;
padding: 8px 28px 46px;
text-align: center;
}
.career-jobs-empty-pane--detail .career-jobs-empty-content {
grid-row: 2;
}
.career-jobs-empty-content > img {
display: block;
width: min(90%, 440px);
max-height: 300px;
margin-bottom: 4px;
object-fit: contain;
}
.career-jobs-empty-content h2 {
margin: 0;
color: var(--career-ink);
font-size: clamp(22px, 1.65vw, 28px);
font-weight: 880;
letter-spacing: -.035em;
line-height: 1.15;
}
.career-jobs-empty-content p {
max-width: 520px;
margin: 0;
color: var(--career-copy);
font-size: 14px;
line-height: 1.55;
text-wrap: balance;
}
.career-jobs-empty-content p > span {
display: block;
}
.career-jobs-empty-content > .career-secondary-action {
margin-top: 16px;
font: inherit;
font-size: 13px;
font-weight: 800;
cursor: pointer;
}
.career-page-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
}
.career-page-actions .career-primary-action svg {
fill: none;
stroke: currentColor;
}
.opportunity-workflow-summary {
grid-template-columns: 58px minmax(230px, .7fr) minmax(480px, 1.3fr);
}
.opportunity-stage-summary {
display: grid;
grid-template-columns: repeat(6, minmax(68px, 1fr));
overflow: hidden;
border-radius: 14px;
background: rgba(255, 255, 255, .85);
}
.opportunity-stage-summary > span {
display: grid;
justify-items: center;
gap: 2px;
padding: 10px 8px;
border-right: 1px solid #e2ebe5;
}
.opportunity-stage-summary > span:last-child {
border-right: 0;
}
.opportunity-stage-summary b {
color: var(--career-ink);
font-size: 18px;
font-variant-numeric: tabular-nums;
}
.opportunity-stage-summary small {
overflow: hidden;
max-width: 100%;
margin: 0;
color: #7b8982;
font-size: 10px;
font-weight: 750;
letter-spacing: 0;
text-overflow: ellipsis;
text-transform: none;
white-space: nowrap;
}
.career-pipeline {
display: grid;
grid-template-columns: repeat(6, minmax(190px, 1fr));
gap: 14px;
overflow-x: auto;
padding: 2px 2px 18px;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: #cbd9d1 transparent;
}
.career-pipeline-column {
min-height: 600px;
overflow: hidden;
border-radius: 18px;
background: #f6f9f7;
box-shadow:
0 1px 2px rgba(15, 40, 29, .035),
0 12px 34px rgba(15, 40, 29, .055);
scroll-snap-align: start;
}
.career-pipeline-column > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 76px;
padding: 16px 17px;
background: #fff;
}
.career-pipeline-column > header span {
display: grid;
gap: 2px;
}
.career-pipeline-column > header small {
color: #8a9790;
font-size: 9px;
font-weight: 850;
letter-spacing: .1em;
text-transform: uppercase;
}
.career-pipeline-column > header h2 {
margin: 0;
font-size: 16px;
letter-spacing: -.02em;
}
.career-pipeline-column > header > b {
display: grid;
place-items: center;
min-width: 31px;
height: 31px;
padding: 0 8px;
border-radius: 10px;
background: #eaf6ef;
color: var(--career-green);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.career-pipeline-list {
display: grid;
align-content: start;
gap: 11px;
padding: 12px;
}
.career-opportunity-card {
display: grid;
gap: 12px;
padding: 14px;
border-radius: 15px;
background: #fff;
box-shadow:
0 1px 2px rgba(15, 40, 29, .03),
0 8px 20px rgba(15, 40, 29, .055);
transition: transform .18s ease, box-shadow .18s ease;
}
.career-opportunity-card:hover {
box-shadow:
0 2px 4px rgba(15, 40, 29, .04),
0 12px 28px rgba(15, 40, 29, .085);
transform: translateY(-2px);
}
.career-opportunity-card.is-dragging {
opacity: .55;
transform: scale(.98);
}
.career-opportunity-card-head {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
gap: 11px;
}
.career-opportunity-card-head .career-visual {
width: 46px;
height: 46px;
border-radius: 13px;
}
.career-opportunity-card-head .career-visual img {
width: 38px;
height: 38px;
}
.career-opportunity-card-head > span:last-child {
min-width: 0;
}
.career-opportunity-card-head strong,
.career-opportunity-card-head em {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.career-opportunity-card-head strong {
margin: 4px 0 1px;
color: var(--career-ink);
font-size: 14px;
line-height: 1.25;
}
.career-opportunity-card-head em {
color: #6b7972;
font-size: 11px;
font-style: normal;
white-space: nowrap;
}
.career-priority {
color: #718079;
font-size: 9px;
font-weight: 850;
letter-spacing: .05em;
text-transform: uppercase;
}
.career-priority.priority-act_now {
color: #b34b43;
}
.career-priority.priority-review_soon {
color: #a56a21;
}
.career-opportunity-card > p {
display: flex;
align-items: center;
gap: 7px;
margin: 0;
color: #718079;
font-size: 11px;
}
.career-opportunity-card > p svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.career-opportunity-card blockquote {
margin: 0;
padding: 10px 11px;
border: 0;
border-radius: 10px;
background: #f5f8f6;
color: #5e6d65;
font-size: 11px;
line-height: 1.5;
}
.career-opportunity-meta {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.career-opportunity-meta span {
display: inline-flex;
gap: 4px;
padding: 5px 8px;
border-radius: 8px;
background: #f0f5f2;
color: #77857e;
font-size: 9px;
font-weight: 700;
}
.career-opportunity-meta b {
color: #2e4438;
font-variant-numeric: tabular-nums;
}
.career-opportunity-actions {
display: grid;
grid-template-columns: 1fr minmax(100px, auto);
align-items: center;
gap: 8px;
padding-top: 4px;
}
.career-opportunity-actions > a {
color: var(--career-green);
font-size: 11px;
font-weight: 850;
text-decoration: none;
}
.career-opportunity-actions form,
.career-opportunity-actions label {
min-width: 0;
}
.career-opportunity-actions select {
width: 100%;
min-height: 32px;
border: 0;
border-radius: 9px;
outline: 0;
background: #edf5f0;
color: #294438;
font-size: 10px;
font-weight: 750;
}
.career-pipeline-empty {
display: grid;
justify-items: center;
gap: 7px;
padding: 42px 12px;
text-align: center;
}
.career-pipeline-empty > span {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 14px;
background: #eaf1ed;
color: #718079;
font-weight: 850;
}
.career-pipeline-empty p {
max-width: 180px;
margin: 0;
color: #7e8b84;
font-size: 11px;
line-height: 1.5;
}
.career-pipeline-empty a {
color: var(--career-green);
font-size: 10px;
font-weight: 850;
text-decoration: none;
}
.career-pipeline-empty--illustrated {
min-height: 500px;
align-content: center;
gap: 12px;
padding: 18px 14px 34px;
}
.career-pipeline-empty--illustrated > img {
display: block;
width: min(100%, 210px);
height: auto;
margin-bottom: 8px;
object-fit: contain;
}
.career-pipeline-empty--illustrated > p {
max-width: 190px;
color: #53635b;
font-size: 13px;
font-weight: 720;
line-height: 1.55;
text-wrap: balance;
}
.career-pipeline-empty--illustrated > small {
display: block;
max-width: 190px;
color: #7a8781;
font-size: 11.5px;
line-height: 1.55;
text-wrap: balance;
}
.career-pipeline-empty--illustrated > .career-pipeline-empty-action {
display: inline-flex;
min-height: 42px;
align-items: center;
justify-content: center;
margin-top: 8px;
padding-inline: 16px;
border: 1px solid #8bc9a6;
border-radius: 11px;
background: #fff;
color: var(--career-green);
font-size: 11px;
transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.career-pipeline-empty--illustrated > .career-pipeline-empty-action:hover {
background: #f3faf6;
box-shadow: 0 9px 22px rgba(8, 122, 72, .09);
transform: translateY(-1px);
}
@media (max-width: 1180px) {
.career-browser {
grid-template-columns: minmax(340px, 42fr) minmax(480px, 58fr);
}
.career-search-summary {
grid-template-columns: 58px minmax(0, 1fr);
}
.opportunity-workflow-summary {
grid-template-columns: 58px minmax(0, 1fr);
}
.opportunity-stage-summary {
grid-column: 1 / -1;
}
.career-directory-search {
grid-column: 1 / -1;
}
.career-detail-actions {
justify-content: flex-start;
}
.career-job-detail-head {
grid-template-columns: 1fr;
}
.career-recruiter-detail-head {
grid-template-columns: 74px minmax(0, 1fr);
}
.career-recruiter-detail-head .career-detail-actions {
grid-column: 1 / -1;
}
.career-opportunities-directory .career-pipeline {
grid-template-columns: repeat(6, minmax(230px, 1fr));
}
}
@media (max-width: 860px) {
.career-directory-head {
align-items: flex-start;
flex-direction: column;
}
.career-page-actions {
justify-content: flex-start;
}
.career-browser {
grid-template-columns: 1fr;
overflow: visible;
}
.career-browser--jobs-empty {
gap: 18px;
overflow: visible;
background: transparent;
box-shadow: none;
}
.career-jobs-empty-pane {
min-height: 540px;
grid-template-rows: auto minmax(0, 1fr);
border-radius: 22px;
box-shadow:
0 1px 2px rgba(15, 40, 29, .035),
0 16px 40px rgba(15, 40, 29, .06);
}
.career-jobs-empty-pane--detail .career-jobs-empty-content {
grid-row: auto;
}
.recruiters-empty-grid {
grid-template-columns: 1fr;
}
.recruiters-empty-pane {
min-height: 540px;
}
.career-opportunities-directory .career-pipeline {
margin-inline: -2px;
padding-inline: 2px 26px;
scroll-padding-inline: 2px;
}
.career-master-panel {
border-right: 0;
border-bottom: 1px solid var(--career-line);
}
.career-master-list {
max-height: 520px;
}
.career-detail-panel {
min-height: 0;
}
}
@media (max-width: 600px) {
.career-directory {
gap: 15px;
}
.career-directory-head h1 {
font-size: 36px;
}
.career-search-summary {
grid-template-columns: 48px minmax(0, 1fr);
gap: 13px;
padding: 15px;
}
.career-visual {
width: 48px;
height: 48px;
border-radius: 14px;
}
.career-visual img {
width: 39px;
height: 39px;
}
.career-job-row,
.career-recruiter-row {
grid-template-columns: 50px minmax(0, 1fr);
gap: 13px;
min-height: 116px;
padding: 16px;
}
.career-row-chevron {
display: none;
}
.career-row-kicker time {
display: none;
}
.career-job-detail-head,
.career-recruiter-detail-head {
padding: 23px 20px 20px;
}
.career-recruiter-detail-head {
grid-template-columns: 64px minmax(0, 1fr);
}
.career-avatar.is-large {
width: 64px;
height: 64px;
}
.career-detail-body {
padding: 2px 20px 14px;
}
.career-detail-section {
grid-template-columns: 38px minmax(0, 1fr);
gap: 13px;
padding: 21px 0;
}
.career-section-icon {
width: 38px;
height: 38px;
border-radius: 12px;
}
.career-facts {
grid-template-columns: 1fr;
}
.opportunity-stage-summary {
grid-template-columns: repeat(3, 1fr);
}
.opportunity-stage-summary > span:nth-child(3) {
border-right: 0;
}
.career-detail-actions,
.career-detail-actions form,
.career-primary-action,
.career-saved-button {
width: 100%;
}
.career-jobs-empty-pane {
min-height: 460px;
padding: 20px 16px 26px;
}
.career-jobs-empty-content {
padding: 8px 8px 24px;
}
.career-jobs-empty-content > img {
width: min(100%, 390px);
max-height: 250px;
}
.career-jobs-empty-content h2 {
font-size: 22px;
}
.recruiters-empty-head {
padding: 20px 18px 16px;
}
.recruiters-empty-grid {
gap: 14px;
padding: 0 14px 14px;
}
.recruiters-empty-pane {
min-height: 500px;
gap: 18px;
padding: 30px 18px;
}
.recruiters-empty-pane > img {
width: min(100%, 300px);
margin-block: -18px -12px;
}
.recruiters-empty-copy h2 {
font-size: 23px;
}
.recruiters-empty-copy p {
font-size: 14px;
}
.recruiters-empty-capabilities {
gap: 8px;
}
.recruiters-empty-capabilities > span {
min-height: 92px;
padding-inline: 6px;
font-size: 10px;
}
.career-pipeline-column {
min-height: 540px;
}
.career-pipeline-empty--illustrated {
min-height: 440px;
}
}
/* LinkedIn settings: account identity and connection tooling are separate.
A verified account gets a compact identity card; setup controls only exist
while the account still needs to be connected or verified. */
.settings-modal-panel[data-settings-panel="linkedin"] .settings-panel-head {
margin-bottom: 18px;
}
.settings-linkedin-api-route {
margin: 0 0 14px;
padding: 17px 18px;
border: 1px solid #dce5e2;
border-radius: 16px;
background: #f7faf9;
}
.settings-linkedin-api-route.is-connected {
border-color: #bedfd2;
background: #f2faf6;
}
.settings-linkedin-api-route-head {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
}
.settings-linkedin-api-logo {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 10px;
background: #0a66c2;
color: #fff;
font: 700 19px/1 Arial, sans-serif;
}
.settings-linkedin-api-kicker {
display: block;
color: #657670;
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
}
.settings-linkedin-api-route-head strong {
display: block;
margin-top: 2px;
color: #172720;
}
.settings-linkedin-api-route-head p {
margin: 3px 0 0;
color: #64726d;
font-size: 12px;
line-height: 1.45;
}
.settings-linkedin-api-route-state {
display: flex;
gap: 16px;
margin: 13px 0 0 50px;
padding-top: 11px;
border-top: 1px solid #dce5e2;
color: #4f605a;
font-size: 11px;
}
.settings-linkedin-api-route-state span {
display: inline-flex;
gap: 6px;
align-items: center;
}
@media (max-width: 680px) {
.settings-linkedin-api-route-head {
grid-template-columns: 38px minmax(0, 1fr);
}
.settings-linkedin-api-route-head > .button {
grid-column: 1 / 3;
}
.settings-linkedin-api-route-state {
flex-direction: column;
gap: 7px;
margin-left: 0;
}
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-profile {
overflow: hidden;
margin: 0;
border: 1px solid #dce7e1;
border-radius: 16px;
background: #fff;
box-shadow: 0 16px 42px rgba(20, 40, 31, .07);
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-profile.is-verified {
border-color: #cfe2d8;
box-shadow: 0 16px 42px rgba(11, 143, 90, .08);
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-body {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: 16px;
align-items: start;
padding: 22px 22px 18px;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-avatar {
display: grid;
width: 56px;
height: 56px;
place-items: center;
margin: 0;
border: 1px solid #cfe2d8;
border-radius: 15px;
background: #edf8f2;
color: #08784c;
box-shadow: none;
font-size: 20px;
font-weight: 900;
line-height: 1;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-profile.is-unverified .settings-linkedin-avatar {
border-color: #dce7e1;
background: #f4f7f5;
color: #66736c;
font-size: 16px;
text-transform: lowercase;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-main {
min-width: 0;
padding: 1px 0 0;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-title-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: start;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-title-row h3 {
margin: 0;
color: #14231c;
font-size: 18px;
font-weight: 760;
line-height: 1.25;
letter-spacing: -.015em;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-title-row p {
margin: 5px 0 0;
color: #66736c;
font-size: 12.5px;
font-weight: 560;
line-height: 1.45;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-badge {
display: inline-flex;
min-height: 28px;
align-items: center;
gap: 6px;
padding: 0 10px;
border: 1px solid #dce7e1;
border-radius: 9px;
background: #f5f8f6;
color: #65736b;
font-size: 11px;
font-weight: 820;
line-height: 1;
white-space: nowrap;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-badge.is-connected {
border-color: #bfe0cf;
background: #eaf7f0;
color: #08784c;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-badge svg,
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-meta-ok svg {
width: 13px;
height: 13px;
stroke: currentColor;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-url {
display: inline-flex;
max-width: 100%;
margin-top: 9px;
color: #0a66c2;
font-size: 12.5px;
font-weight: 700;
overflow-wrap: anywhere;
text-decoration: none;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-url:hover {
text-decoration: underline;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid #e7eee9;
background: #f8faf9;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-profile.is-unverified .settings-linkedin-meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-meta > div {
display: grid;
gap: 4px;
min-width: 0;
padding: 12px 22px;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-meta > div + div {
border-left: 1px solid #e2eae5;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-meta span {
color: #748078;
font-size: 10px;
font-weight: 800;
letter-spacing: .045em;
line-height: 1.2;
text-transform: uppercase;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-meta strong {
color: #1b2b23;
font-size: 12px;
font-weight: 720;
line-height: 1.35;
overflow-wrap: anywhere;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-meta-ok {
display: inline-flex;
align-items: center;
gap: 5px;
color: #08784c;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-automation-note {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 10px;
align-items: start;
margin: 14px 18px 0;
padding: 11px 12px;
border: 1px solid #efd9ae;
border-radius: 10px;
background: #fffaf0;
color: #7b5006;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-automation-note > svg {
width: 17px;
height: 17px;
margin: 2px 0 0 3px;
stroke: currentColor;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-automation-note div {
display: grid;
gap: 2px;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-automation-note strong {
font-size: 12px;
font-weight: 800;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-automation-note span {
font-size: 11.5px;
line-height: 1.4;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-connected-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
align-items: center;
padding: 14px 22px;
border-top: 1px solid #e7eee9;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-connected-actions form,
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-actions form {
display: block;
margin: 0;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-connected-actions .button,
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-actions .button,
.settings-modal-panel[data-settings-panel="linkedin"] .settings-connect-box .button,
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-advanced .button {
display: inline-flex;
min-height: 36px;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 13px;
border-radius: 9px;
font-size: 12px;
font-weight: 760;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-connected-actions .button svg {
width: 15px;
height: 15px;
stroke: currentColor;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-disconnect {
border: 1px solid transparent;
background: transparent;
color: #8c4a37;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-disconnect:hover {
border-color: #efd4ca;
background: #fff7f3;
color: #753624;
}
.settings-modal-panel[data-settings-panel="linkedin"] .extension-setup {
margin-top: 16px;
padding: 18px;
border: 1px solid #dfe8e3;
border-radius: 14px;
background: #fbfcfb;
}
.settings-modal-panel[data-settings-panel="linkedin"] .extension-setup-head {
margin-bottom: 14px;
}
.settings-modal-panel[data-settings-panel="linkedin"] .extension-setup-head > div {
display: grid;
gap: 3px;
}
.settings-modal-panel[data-settings-panel="linkedin"] .extension-setup-head strong {
color: #1b2b23;
font-size: 13px;
font-weight: 800;
}
.settings-modal-panel[data-settings-panel="linkedin"] .extension-setup-head span {
color: #6a766f;
font-size: 11.5px;
line-height: 1.45;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-connect-box {
display: grid;
gap: 8px;
margin: 0 0 12px;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-connect-box .button {
width: fit-content;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 0 0 12px;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-advanced {
margin-top: 12px;
border-top: 1px solid #e3eae6;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-advanced summary {
padding: 13px 0 0;
color: #536158;
font-size: 11.5px;
font-weight: 760;
cursor: pointer;
list-style-position: inside;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-advanced[open] summary {
color: #182820;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-advanced-body {
padding-top: 13px;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-advanced-body > p:first-child {
margin: 0 0 12px;
color: #6a766f;
font-size: 11.5px;
line-height: 1.45;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-advanced-body > .button {
margin-top: 2px;
}
.settings-modal-panel[data-settings-panel="linkedin"] #extension-token-result {
margin-top: 13px;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-legacy-form {
margin-top: 16px;
}
.settings-check-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border: 1px solid var(--border, #dce6e0);
border-radius: 14px;
background: #f8fbf9;
cursor: pointer;
}
.settings-check-row input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: #079761;
}
.settings-check-row span {
display: grid;
gap: 3px;
}
.settings-check-row small {
color: #627169;
line-height: 1.45;
}
@media (max-width: 760px) {
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-body {
grid-template-columns: 46px minmax(0, 1fr);
gap: 12px;
padding: 17px 16px 15px;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-avatar {
width: 46px;
height: 46px;
border-radius: 13px;
font-size: 17px;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-title-row {
grid-template-columns: 1fr;
gap: 10px;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-badge {
justify-self: start;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-meta,
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-profile.is-unverified .settings-linkedin-meta {
grid-template-columns: 1fr;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-meta > div {
padding: 11px 16px;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-meta > div + div {
border-top: 1px solid #e2eae5;
border-left: 0;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-connected-actions,
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-actions {
display: grid;
grid-template-columns: 1fr;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-connected-actions {
padding: 13px 16px;
}
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-connected-actions .button,
.settings-modal-panel[data-settings-panel="linkedin"] .settings-linkedin-actions .button,
.settings-modal-panel[data-settings-panel="linkedin"] .settings-connect-box .button {
width: 100%;
}
.settings-modal-panel[data-settings-panel="linkedin"] .extension-setup {
padding: 15px;
}
}
/* ── Goal-adaptive dashboard shell ────────────────────────────────── */
.goal-dashboard-shell {
display: grid;
gap: 16px;
margin-bottom: 22px;
}
.goal-dashboard-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 28px;
}
.goal-dashboard-heading > div {
max-width: 780px;
}
.goal-dashboard-heading h1 {
max-width: 760px;
margin: 4px 0 7px;
color: var(--ink);
font-size: clamp(31px, 4vw, 52px);
line-height: 1;
letter-spacing: -.048em;
text-wrap: balance;
}
.goal-dashboard-heading > div > p:last-child {
max-width: 650px;
margin: 0;
color: #65726b;
font-size: 14px;
line-height: 1.5;
}
.goal-dashboard-campaign {
display: grid;
grid-template-columns: minmax(0, 1fr) 18px;
gap: 2px 14px;
align-items: center;
min-width: 220px;
max-width: 330px;
padding: 12px 14px;
border: 1px solid #dce7e1;
border-radius: 13px;
background: #fff;
color: inherit;
text-decoration: none;
}
.goal-dashboard-campaign span {
grid-column: 1;
color: #748078;
font-size: 10px;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.goal-dashboard-campaign strong {
grid-column: 1;
overflow: hidden;
color: var(--ink);
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
}
.goal-dashboard-campaign svg {
grid-column: 2;
grid-row: 1 / 3;
width: 17px;
height: 17px;
fill: none;
stroke: var(--green-dark);
stroke-width: 2.2;
}
.goal-health-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
overflow: hidden;
border: 1px solid #dfe7e2;
border-radius: 13px;
background: #fff;
}
.goal-health-item {
display: grid;
grid-template-columns: 8px minmax(0, 1fr);
gap: 2px 10px;
align-items: center;
min-width: 0;
padding: 11px 14px;
color: inherit;
text-decoration: none;
}
.goal-health-item + .goal-health-item {
border-left: 1px solid #edf1ef;
}
.goal-health-item > i {
grid-row: 1 / 3;
width: 8px;
height: 8px;
border-radius: 50%;
background: #89938d;
box-shadow: 0 0 0 4px rgba(137, 147, 141, .1);
}
.goal-health-item.tone-success > i {
background: #0d9b63;
box-shadow: 0 0 0 4px rgba(13, 155, 99, .1);
}
.goal-health-item.tone-warning > i {
background: #cf8b1f;
box-shadow: 0 0 0 4px rgba(207, 139, 31, .11);
}
.goal-health-item.tone-danger > i {
background: #c75555;
box-shadow: 0 0 0 4px rgba(199, 85, 85, .1);
}
.goal-health-item span {
display: grid;
min-width: 0;
}
.goal-health-item small {
color: #78847d;
font-size: 10px;
font-weight: 800;
letter-spacing: .035em;
text-transform: uppercase;
}
.goal-health-item strong {
overflow: hidden;
color: #203028;
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
}
.goal-health-item em {
grid-column: 2;
overflow: hidden;
color: #7a857f;
font-size: 10px;
font-style: normal;
text-overflow: ellipsis;
white-space: nowrap;
}
.goal-action-layout {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(310px, .8fr);
gap: 16px;
}
.goal-primary-action {
position: relative;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 22px;
min-height: 290px;
overflow: hidden;
padding: clamp(22px, 3vw, 34px);
border: 1px solid #10231c;
border-radius: 19px;
background: #08120f;
color: #fff;
box-shadow: 0 20px 48px rgba(7, 20, 15, .13);
}
.goal-primary-action::after {
position: absolute;
right: -90px;
bottom: -125px;
width: 280px;
height: 280px;
border: 1px solid rgba(103, 224, 164, .12);
border-radius: 50%;
box-shadow:
0 0 0 38px rgba(103, 224, 164, .025),
0 0 0 76px rgba(103, 224, 164, .018);
content: "";
pointer-events: none;
}
.goal-primary-action.is-calm {
border-color: #ccdcd3;
background: #f7fbf8;
color: var(--ink);
box-shadow: none;
}
.goal-card-kicker {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.goal-card-kicker > span {
color: #7bdfad;
font-size: 11px;
font-weight: 900;
letter-spacing: .09em;
text-transform: uppercase;
}
.goal-primary-action.is-calm .goal-card-kicker > span {
color: var(--green-dark);
}
.goal-card-kicker em {
display: inline-flex;
align-items: center;
min-height: 25px;
padding: 0 9px;
border: 1px solid rgba(255, 255, 255, .13);
border-radius: 999px;
background: rgba(255, 255, 255, .06);
color: #dce9e2;
font-size: 10px;
font-style: normal;
font-weight: 850;
}
.goal-card-kicker em.tone-p0 {
border-color: rgba(251, 146, 146, .25);
background: rgba(145, 34, 34, .2);
color: #fecaca;
}
.goal-primary-copy {
position: relative;
z-index: 1;
align-self: center;
max-width: 720px;
}
.goal-primary-copy h2 {
margin: 0 0 10px;
color: inherit;
font-size: clamp(26px, 3.1vw, 43px);
line-height: 1.04;
letter-spacing: -.035em;
text-wrap: balance;
}
.goal-primary-copy p {
max-width: 620px;
margin: 0;
color: #b6c4bd;
font-size: 14px;
line-height: 1.55;
}
.goal-primary-action.is-calm .goal-primary-copy p {
color: #607068;
}
.goal-primary-cta {
position: relative;
z-index: 1;
display: flex;
}
.goal-primary-cta form {
display: flex;
}
.goal-primary-cta .button {
min-height: 45px;
border-radius: 10px;
}
.goal-attention-card {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 290px;
overflow: hidden;
border: 1px solid #dce6e0;
border-radius: 19px;
background: #fff;
}
.goal-attention-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 20px 20px 14px;
}
.goal-attention-head h2 {
margin: 3px 0 0;
color: var(--ink);
font-size: 18px;
letter-spacing: -.02em;
}
.goal-attention-head > span {
display: grid;
width: 32px;
height: 32px;
place-items: center;
border-radius: 10px;
background: #edf7f1;
color: var(--green-dark);
font-size: 13px;
font-weight: 900;
}
.goal-attention-list {
display: grid;
align-content: start;
padding: 0 10px 10px;
}
.goal-attention-list > a {
display: grid;
grid-template-columns: 7px minmax(0, 1fr) 16px;
gap: 11px;
align-items: center;
min-height: 59px;
padding: 10px;
border-top: 1px solid #edf1ef;
color: inherit;
text-decoration: none;
}
.goal-attention-list > a:hover {
border-radius: 10px;
background: #f7faf8;
}
.goal-attention-list i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #8d9892;
}
.goal-attention-list i.tone-p0 { background: #c75555; }
.goal-attention-list i.tone-p1 { background: #d18a18; }
.goal-attention-list span {
display: grid;
gap: 2px;
min-width: 0;
}
.goal-attention-list strong,
.goal-attention-list small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goal-attention-list strong {
color: #24332b;
font-size: 12px;
}
.goal-attention-list small {
color: #748078;
font-size: 10.5px;
}
.goal-attention-list svg,
.goal-attention-footer svg {
width: 15px;
height: 15px;
fill: none;
stroke: #819087;
stroke-width: 2;
}
.goal-attention-empty {
display: flex;
gap: 12px;
align-items: center;
align-self: center;
padding: 20px;
}
.goal-attention-empty > span {
display: grid;
width: 38px;
height: 38px;
flex: 0 0 auto;
place-items: center;
border-radius: 12px;
background: #edf7f1;
color: var(--green-dark);
}
.goal-attention-empty svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2.3;
}
.goal-attention-empty strong {
color: #25352c;
font-size: 13px;
}
.goal-attention-empty p {
margin: 3px 0 0;
color: #78847d;
font-size: 11px;
line-height: 1.4;
}
.goal-attention-footer {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 42px;
padding: 0 20px;
border-top: 1px solid #edf1ef;
border-right: 0;
border-bottom: 0;
border-left: 0;
background: transparent;
color: var(--green-dark);
cursor: pointer;
font-family: inherit;
font-size: 11px;
font-weight: 850;
text-align: left;
text-decoration: none;
}
.goal-fit-summary {
grid-column: 1 / -1;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
min-height: 0;
padding: 18px 22px;
}
.goal-progress-section {
display: grid;
gap: 14px;
padding: 18px 20px;
border: 1px solid #dfe7e2;
border-radius: 17px;
background: #fff;
}
.goal-progress-section > header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 22px;
}
.goal-progress-section h2,
.goal-focus-card h2,
.goal-recommendation-card h2 {
margin: 3px 0 0;
color: var(--ink);
font-size: 18px;
letter-spacing: -.022em;
}
.goal-progress-section > header > p {
max-width: 660px;
margin: 0;
color: #6c7972;
font-size: 12px;
line-height: 1.45;
text-align: right;
}
.goal-progress-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
overflow: hidden;
border: 1px solid #e5ebe8;
border-radius: 13px;
}
.goal-progress-metrics > a {
position: relative;
display: grid;
gap: 3px;
min-height: 92px;
padding: 14px 15px;
color: inherit;
text-decoration: none;
}
.goal-progress-metrics > a + a {
border-left: 1px solid #e9eeeb;
}
.goal-progress-metrics > a::before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 2px;
background: #7b8b82;
content: "";
}
.goal-progress-metrics > a.tone-green::before { background: #149463; }
.goal-progress-metrics > a.tone-blue::before { background: #4e75c8; }
.goal-progress-metrics > a.tone-amber::before { background: #c98a1e; }
.goal-progress-metrics small {
color: #6f7c74;
font-size: 10.5px;
font-weight: 800;
}
.goal-progress-metrics strong {
color: #17271f;
font-size: 28px;
line-height: 1;
}
.goal-progress-metrics span {
align-self: end;
color: #89938d;
font-size: 10px;
line-height: 1.25;
}
.goal-focus-layout {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
gap: 16px;
}
.goal-focus-card,
.goal-recommendation-card {
border: 1px solid #dfe7e2;
border-radius: 17px;
background: #fff;
}
.goal-focus-card {
display: grid;
gap: 18px;
padding: 20px;
}
.goal-focus-card > header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 22px;
}
.goal-focus-card > header p:not(.eyebrow) {
max-width: 560px;
margin: 5px 0 0;
color: #738078;
font-size: 11px;
}
.goal-focus-card > header > a,
.goal-recommendation-card a {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--green-dark);
font-size: 11px;
font-weight: 850;
text-decoration: none;
white-space: nowrap;
}
.goal-focus-card > header svg,
.goal-recommendation-card a svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.goal-focus-stages {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
gap: 9px;
}
.goal-focus-stages > div {
display: grid;
gap: 9px;
min-width: 0;
padding: 12px;
border: 1px solid #e6ece8;
border-radius: 11px;
background: #fafcfb;
}
.goal-focus-card.is-relationships .goal-focus-stages > div {
background: #f8fbfa;
}
.goal-focus-stages span {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.goal-focus-stages small {
overflow: hidden;
color: #6d7a72;
font-size: 9.5px;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.goal-focus-stages strong {
color: #213129;
font-size: 14px;
}
.goal-focus-stages > div > i {
display: block;
height: 4px;
overflow: hidden;
border-radius: 99px;
background: #e6ece8;
}
.goal-focus-stages > div > i > b {
display: block;
width: var(--focus-percent);
height: 100%;
border-radius: inherit;
background: #159562;
}
.goal-focus-card.is-relationships .goal-focus-stages > div > i > b {
background: #3d8171;
}
.goal-recommendation-card {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
gap: 13px;
align-content: start;
padding: 20px;
background: #f6faf7;
}
.goal-recommendation-card > span {
display: grid;
width: 40px;
height: 40px;
place-items: center;
border-radius: 12px;
background: #dff2e7;
color: var(--green-dark);
}
.goal-recommendation-card > span svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
}
.goal-recommendation-card > div > p:not(.eyebrow) {
margin: 7px 0 13px;
color: #66756d;
font-size: 11.5px;
line-height: 1.48;
}
.goal-real-activity {
display: grid;
gap: 16px;
padding: 20px;
border: 1px solid #dfe7e2;
border-radius: 17px;
background: #fff;
}
.goal-real-activity > header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
}
.goal-real-activity > header h2 {
margin: 2px 0 3px;
color: #17271f;
font-size: 19px;
letter-spacing: -.025em;
}
.goal-real-activity > header p:not(.eyebrow) {
max-width: 620px;
margin: 0;
color: #748078;
font-size: 11px;
}
.goal-real-activity > header > a {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 4px;
color: var(--green-dark);
font-size: 11px;
font-weight: 850;
text-decoration: none;
white-space: nowrap;
}
.goal-real-activity > header > a svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.goal-real-activity-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
border: 1px solid #e2e9e5;
border-radius: 13px;
background: #e2e9e5;
}
.goal-real-action {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 28px;
gap: 11px;
align-items: center;
min-width: 0;
min-height: 104px;
padding: 13px;
background: #fbfcfb;
transition: background-color .2s ease;
}
.goal-real-action:hover {
background: #f5faf7;
}
.goal-real-action-icon {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 11px;
background: #e6f4ec;
color: #137a54;
}
.goal-real-action-avatar {
position: relative;
display: grid;
width: 38px;
height: 38px;
overflow: hidden;
place-items: center;
border: 1px solid #d8e8df;
border-radius: 11px;
background: #e3f1e9;
color: #176d4c;
font-size: 10px;
font-weight: 900;
letter-spacing: .025em;
}
.goal-real-action-avatar img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
}
.goal-real-action-avatar img[hidden] {
display: none;
}
.goal-real-action.is-message_received .goal-real-action-icon,
.goal-real-action.is-connected .goal-real-action-icon {
background: #dff2e7;
color: #08764e;
}
.goal-real-action-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
}
.goal-real-action-copy {
display: grid;
gap: 3px;
min-width: 0;
color: inherit;
text-decoration: none;
}
.goal-real-action-copy > span {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.goal-real-action-copy small {
overflow: hidden;
color: #18805a;
font-size: 8.5px;
font-weight: 900;
letter-spacing: .055em;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.goal-real-action-copy time {
color: #8a948e;
font-size: 9px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.goal-real-action-copy strong {
overflow: hidden;
color: #22342a;
font-size: 11.5px;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.goal-real-action-copy p {
display: -webkit-box;
overflow: hidden;
margin: 0;
color: #718078;
font-size: 10px;
line-height: 1.35;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.goal-real-action-link {
display: grid;
width: 28px;
height: 28px;
place-items: center;
border-radius: 8px;
color: #5e776a;
text-decoration: none;
transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.goal-real-action-link:hover {
background: #e1f2e9;
color: var(--green-dark);
transform: translateX(1px);
}
.goal-real-action-link:active {
transform: translateX(1px) scale(.96);
}
.goal-real-action-link svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.goal-real-activity-empty {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 13px;
align-items: center;
min-height: 96px;
padding: 17px;
border: 1px dashed #dce7e1;
border-radius: 13px;
background: #fafcfb;
}
.goal-real-activity-empty > span {
display: grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 12px;
background: #e7f3ec;
color: #167653;
}
.goal-real-activity-empty svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
}
.goal-real-activity-empty strong {
color: #27382f;
font-size: 12px;
}
.goal-real-activity-empty p {
max-width: 680px;
margin: 3px 0 0;
color: #738078;
font-size: 10.5px;
}
@media (max-width: 1050px) {
.goal-health-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.goal-health-item:nth-child(3) {
border-top: 1px solid #edf1ef;
border-left: 0;
}
.goal-health-item:nth-child(4) {
border-top: 1px solid #edf1ef;
}
.goal-action-layout {
grid-template-columns: 1fr;
}
.goal-fit-summary {
grid-column: 1;
}
.goal-focus-layout {
grid-template-columns: 1fr;
}
.goal-real-activity-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.goal-dashboard-heading {
display: grid;
align-items: start;
}
.goal-real-activity {
padding: 17px;
}
.goal-real-activity > header {
display: grid;
gap: 8px;
}
.goal-real-action {
grid-template-columns: 36px minmax(0, 1fr) 26px;
min-height: 98px;
padding: 12px;
}
.goal-dashboard-campaign {
width: 100%;
max-width: none;
}
.goal-health-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.goal-health-item:nth-child(3),
.goal-health-item:nth-child(4) {
border-top: 1px solid #edf1ef;
}
.goal-health-item:nth-child(3) {
border-left: 0;
}
.goal-health-item em {
display: none;
}
.goal-primary-action {
min-height: 270px;
padding: 22px;
}
.goal-primary-copy h2 {
font-size: 28px;
}
.goal-primary-cta .button,
.goal-primary-cta form {
width: 100%;
}
.goal-primary-cta .button {
justify-content: center;
}
.goal-fit-summary {
grid-template-columns: 1fr;
}
.goal-progress-section > header,
.goal-focus-card > header {
display: grid;
align-items: start;
}
.goal-progress-section > header > p {
text-align: left;
}
.goal-progress-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.goal-progress-metrics > a:nth-child(3) {
border-top: 1px solid #e9eeeb;
border-left: 0;
}
.goal-progress-metrics > a:nth-child(4) {
border-top: 1px solid #e9eeeb;
}
.goal-focus-stages {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.campaign-safety-limits {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.campaign-safety-limits > span {
border-top: 1px solid #e7ece9;
}
.campaign-safety-limits > span:nth-child(-n+2) {
border-top: 0;
}
.campaign-safety-limits > span:nth-child(odd) {
border-left: 0;
}
}
/* ── Goal-aware operations: replaces the legacy dashboard stack ──── */
.command-grid.is-connection-only {
grid-template-columns: minmax(0, 760px);
justify-content: start;
}
.command-grid.is-connection-only .control-center-card {
width: 100%;
}
.goal-operations {
display: grid;
grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
gap: 16px;
margin: 2px 0 22px;
}
.goal-runtime-panel,
.goal-upcoming-panel,
.goal-automation-panel {
border: 1px solid #dfe7e2;
border-radius: 17px;
background: #fff;
}
.goal-runtime-panel {
display: grid;
gap: 19px;
padding: 22px;
}
.goal-runtime-panel > header,
.goal-upcoming-panel > header,
.goal-automation-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.goal-runtime-state {
display: flex;
align-items: center;
gap: 10px;
}
.goal-runtime-state > i {
width: 9px;
height: 9px;
border-radius: 50%;
background: #9ba69f;
box-shadow: 0 0 0 5px rgba(126, 140, 131, .1);
}
.goal-runtime-state.state-running > i,
.goal-runtime-state.state-starting > i {
background: #119764;
box-shadow: 0 0 0 5px rgba(17, 151, 100, .1);
}
.goal-runtime-state.state-error > i {
background: #c75555;
box-shadow: 0 0 0 5px rgba(199, 85, 85, .1);
}
.goal-runtime-state > span {
display: grid;
gap: 1px;
}
.goal-runtime-state small,
.goal-runtime-update {
color: #78847d;
font-size: 10px;
font-weight: 800;
}
.goal-runtime-state strong {
color: #213129;
font-size: 13px;
}
.goal-runtime-update {
padding-top: 2px;
}
.goal-runtime-copy {
max-width: 650px;
}
.goal-runtime-copy h2,
.goal-upcoming-panel h2 {
margin: 4px 0 7px;
color: var(--ink);
font-size: 23px;
line-height: 1.12;
letter-spacing: -.03em;
text-wrap: balance;
}
.goal-runtime-copy > p:last-child {
max-width: 590px;
margin: 0;
color: #66746c;
font-size: 12px;
line-height: 1.5;
}
.goal-runtime-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.goal-runtime-actions form {
display: flex;
}
.goal-runtime-actions .button {
min-height: 41px;
border-radius: 9px;
}
.goal-runtime-links {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow: hidden;
border: 1px solid #e4eae7;
border-radius: 12px;
}
.goal-runtime-links > a {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
gap: 9px;
align-items: center;
min-width: 0;
padding: 11px 12px;
color: inherit;
text-decoration: none;
transition: background .2s ease;
}
.goal-runtime-links > a + a {
border-left: 1px solid #e8edea;
}
.goal-runtime-links > a:hover {
background: #f6faf7;
}
.goal-runtime-links svg {
width: 17px;
height: 17px;
fill: none;
stroke: #168a5e;
stroke-width: 2;
}
.goal-runtime-links span {
display: grid;
min-width: 0;
}
.goal-runtime-links small {
overflow: hidden;
color: #7a867f;
font-size: 9px;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.goal-runtime-links strong {
overflow: hidden;
color: #23332a;
font-size: 10.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.goal-upcoming-panel {
display: grid;
grid-template-rows: auto 1fr;
min-height: 100%;
padding: 22px;
}
.goal-upcoming-panel > header a {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--green-dark);
font-size: 10.5px;
font-weight: 850;
text-decoration: none;
}
.goal-upcoming-panel > header a svg,
.goal-upcoming-list > a > svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.goal-upcoming-list {
display: grid;
align-content: start;
margin-top: 7px;
}
.goal-upcoming-list > a {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 15px;
gap: 11px;
align-items: center;
padding: 10px 0;
border-top: 1px solid #e9eeeb;
color: inherit;
text-decoration: none;
}
.goal-upcoming-list time {
display: grid;
width: 40px;
height: 40px;
place-items: center;
border-radius: 10px;
background: #edf7f2;
color: var(--green-dark);
}
.goal-upcoming-list time strong {
align-self: end;
font-size: 15px;
line-height: 1;
}
.goal-upcoming-list time small {
align-self: start;
font-size: 8px;
font-weight: 850;
text-transform: uppercase;
}
.goal-upcoming-list > a > span {
display: grid;
min-width: 0;
}
.goal-upcoming-list > a > span strong {
overflow: hidden;
color: #24342b;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.goal-upcoming-list > a > span small {
color: #78847d;
font-size: 10px;
}
.goal-upcoming-empty {
display: flex;
gap: 12px;
align-items: center;
align-self: center;
padding: 20px 0 6px;
}
.goal-upcoming-empty > span {
display: grid;
width: 40px;
height: 40px;
flex: 0 0 auto;
place-items: center;
border-radius: 11px;
background: #f0f5f2;
color: #718078;
}
.goal-upcoming-empty svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.goal-upcoming-empty strong {
color: #2b3b32;
font-size: 12px;
}
.goal-upcoming-empty p {
max-width: 330px;
margin: 3px 0 0;
color: #7a867f;
font-size: 10.5px;
line-height: 1.4;
}
.goal-automation-panel {
grid-column: 1 / -1;
overflow: hidden;
}
.goal-automation-panel > summary {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto 18px;
gap: 12px;
align-items: center;
min-height: 72px;
padding: 14px 18px;
cursor: pointer;
list-style: none;
}
.goal-automation-panel > summary::-webkit-details-marker {
display: none;
}
.goal-automation-summary-icon {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 11px;
background: #edf7f2;
color: var(--green-dark);
}
.goal-automation-summary-icon svg,
.goal-automation-caret {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.goal-automation-panel > summary > span:nth-child(2) {
display: grid;
min-width: 0;
}
.goal-automation-panel > summary small {
color: #78847d;
font-size: 9px;
font-weight: 850;
letter-spacing: .04em;
text-transform: uppercase;
}
.goal-automation-panel > summary strong {
overflow: hidden;
color: #203028;
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
}
.goal-automation-panel > summary em {
color: #65736b;
font-size: 10.5px;
font-style: normal;
font-weight: 800;
}
.goal-automation-caret {
color: #718078;
transition: transform .2s ease;
}
.goal-automation-panel[open] .goal-automation-caret {
transform: rotate(90deg);
}
.goal-automation-panel > form {
display: grid;
gap: 17px;
padding: 18px;
border-top: 1px solid #e9eeeb;
background: #fafcfb;
}
.goal-automation-head > p {
max-width: 620px;
margin: 0;
color: #69766f;
font-size: 11.5px;
line-height: 1.45;
}
.goal-automation-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
overflow: hidden;
border: 1px solid #e2e9e5;
border-radius: 12px;
background: #fff;
}
.goal-automation-grid > label {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
min-width: 0;
min-height: 88px;
padding: 13px;
}
.goal-automation-grid > label + label {
border-left: 1px solid #e7ece9;
}
.goal-automation-grid > label > span:first-child {
display: grid;
gap: 3px;
min-width: 0;
}
.goal-automation-grid strong {
color: #24342b;
font-size: 11px;
line-height: 1.25;
}
.goal-automation-grid small {
color: #7b8780;
font-size: 9.5px;
line-height: 1.3;
}
.goal-post-frequency .field-control {
width: 62px;
min-height: 39px;
padding: 6px;
border-radius: 9px;
text-align: center;
font-weight: 850;
}
.goal-safety-limits {
display: grid;
grid-template-columns: minmax(120px, 1.25fr) repeat(5, minmax(72px, .75fr)) auto;
overflow: hidden;
border: 1px solid #e2e9e5;
border-radius: 11px;
background: #fff;
}
.goal-safety-limits > div,
.goal-safety-limits > span,
.goal-safety-limits > a {
display: grid;
align-content: center;
min-height: 52px;
padding: 9px 11px;
}
.goal-safety-limits > * + * {
border-left: 1px solid #e7ece9;
}
.goal-safety-limits small {
color: #7a867f;
font-size: 8.5px;
font-weight: 800;
}
.goal-safety-limits strong {
color: #244031;
font-size: 10.5px;
}
.goal-safety-limits .tone-warning strong { color: #9e6714; }
.goal-safety-limits .tone-danger strong { color: #aa4b4b; }
.goal-safety-limits > a {
align-items: center;
color: var(--green-dark);
font-size: 9.5px;
font-weight: 850;
text-decoration: none;
white-space: nowrap;
}
@media (max-width: 980px) {
.goal-operations {
grid-template-columns: 1fr;
}
.goal-automation-panel {
grid-column: 1;
}
.goal-automation-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.goal-automation-grid > label:nth-child(3) {
border-top: 1px solid #e7ece9;
border-left: 0;
}
.goal-automation-grid > label:nth-child(4) {
border-top: 1px solid #e7ece9;
}
.goal-safety-limits {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.goal-safety-limits > * {
border-top: 1px solid #e7ece9;
}
.goal-safety-limits > :nth-child(-n+3) {
border-top: 0;
}
.goal-safety-limits > :nth-child(3n+1) {
border-left: 0;
}
}
@media (max-width: 650px) {
.goal-runtime-panel,
.goal-upcoming-panel {
padding: 18px;
}
.goal-runtime-panel > header {
align-items: center;
}
.goal-runtime-actions,
.goal-runtime-actions form,
.goal-runtime-actions .button {
width: 100%;
}
.goal-runtime-actions .button {
justify-content: center;
}
.goal-runtime-links {
grid-template-columns: 1fr;
}
.goal-runtime-links > a + a {
border-top: 1px solid #e8edea;
border-left: 0;
}
.goal-automation-panel > summary {
grid-template-columns: 38px minmax(0, 1fr) 18px;
}
.goal-automation-panel > summary em {
display: none;
}
.goal-automation-grid {
grid-template-columns: 1fr;
}
.goal-automation-grid > label + label,
.goal-automation-grid > label:nth-child(3),
.goal-automation-grid > label:nth-child(4) {
border-top: 1px solid #e7ece9;
border-left: 0;
}
.goal-automation-head {
align-items: center;
}
.goal-safety-limits {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.goal-safety-limits > * {
border-top: 1px solid #e7ece9;
}
.goal-safety-limits > :nth-child(-n+2) {
border-top: 0;
}
.goal-safety-limits > :nth-child(odd) {
border-left: 0;
}
}
/* GET HIRED CRM -----------------------------------------------------------
Career-only home layout. The other goal dashboards keep their shared
component system above; every selector here is deliberately namespaced. */
body.get-hired-crm-page,
body.get-hired-crm-page .app-shell,
body.get-hired-crm-page .app-main,
body.get-hired-crm-page .page-content,
.app-main:has(.career-crm-dashboard),
.page-content:has(.career-crm-dashboard) {
--canvas: #fff;
background: #fff;
}
.career-crm-dashboard {
--career-blue: #3978f6;
--career-cyan: #35b8e8;
--career-green: #35bf72;
--career-orange: #f59a2b;
--career-yellow: #f4c43d;
--career-purple: #7657e7;
--career-rose: #ed6f96;
--career-surface-page: #f8faf9;
--career-surface-card: #fff;
--career-border-soft: #e6ece8;
--career-text-primary: #10241b;
--career-text-secondary: #66756e;
--career-text-muted: #88938e;
--career-brand-primary: #087a48;
--career-brand-dark: #075537;
--career-brand-soft: #eaf7f0;
--career-panel-title-size: 22px;
--career-row-title-size: 15.5px;
--career-row-body-size: 12px;
--career-row-meta-size: 10.5px;
--career-row-visual-size: 60px;
--career-row-gap: 18px;
--career-shadow-card:
0 2px 6px rgba(15, 40, 29, .03),
0 12px 32px rgba(15, 40, 29, .055);
display: grid;
gap: 18px;
color: var(--ink);
}
.career-crm-dashboard svg {
fill: none;
stroke: currentColor;
stroke-width: 1.85;
stroke-linecap: round;
stroke-linejoin: round;
}
.career-crm-hero-strip {
position: relative;
isolation: isolate;
display: grid;
min-width: 0;
align-items: stretch;
grid-template-columns:
minmax(350px, 1.45fr)
repeat(3, minmax(190px, 1fr));
gap: 14px;
padding: 16px 14px 22px;
overflow: hidden;
border-radius: 24px;
background: #fff;
}
.career-crm-hero-strip::before {
position: absolute;
inset: auto 0 0 0;
z-index: -2;
height: 88%;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 240' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='.12'%3E%3Cstop offset='0' stop-color='%23f3faf6' stop-opacity='.76'/%3E%3Cstop offset='.48' stop-color='%23cfeeda' stop-opacity='.82'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0'/%3E%3Cstop offset='.34' stop-color='%23ffffff' stop-opacity='.24'/%3E%3Cstop offset='.74' stop-color='%23ffffff' stop-opacity='.92'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='.56'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='1200' height='240' fill='url(%23f)'/%3E%3C/mask%3E%3C/defs%3E%3Cpath d='M0 144 C100 106 153 206 274 194 C392 182 452 92 565 75 C677 58 741 128 851 122 C968 115 1034 67 1200 78 L1200 240 L0 240 Z' fill='url(%23g)' mask='url(%23m)'/%3E%3C/svg%3E")
left bottom / min(980px, 72%) 100% no-repeat;
animation: careerWaveDrift 8s ease-in-out infinite alternate;
content: "";
opacity: .88;
pointer-events: none;
transform-origin: left bottom;
will-change: opacity, transform;
}
.career-crm-hero-strip::after {
position: absolute;
top: 9px;
left: clamp(210px, 18vw, 345px);
z-index: -1;
width: clamp(150px, 14vw, 245px);
height: 105px;
background-image: radial-gradient(
circle,
rgba(45, 176, 107, .3) 1.25px,
transparent 1.5px
);
background-size: 18px 18px;
content: "";
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 78%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 18%, #000 78%, transparent);
animation: careerDotsDrift 10s ease-in-out infinite alternate;
opacity: .58;
will-change: opacity, transform;
}
.career-crm-hero-strip > * {
position: relative;
z-index: 1;
}
.career-crm-heading {
display: grid;
min-height: 118px;
align-content: center;
padding: 8px 16px 8px 2px;
}
.career-crm-goal {
margin: 0;
color: var(--green-ink);
font-size: clamp(30px, 2.45vw, 42px);
font-weight: 900;
letter-spacing: -.045em;
line-height: 1;
}
.career-crm-intro {
max-width: 500px;
margin: 12px 0 0;
color: #66726c;
font-size: clamp(13px, 1vw, 16px);
line-height: 1.5;
}
.career-crm-intro strong {
color: #4c5953;
font-weight: 720;
}
.career-crm-card {
min-width: 0;
border: 1px solid #dfe8e2;
border-radius: 20px;
background: rgba(255, 255, 255, .96);
box-shadow: 0 14px 34px rgba(18, 49, 34, .055);
animation: careerCrmReveal .52s cubic-bezier(.2, .72, .25, 1) both;
animation-delay: calc(var(--crm-order, 0) * 34ms);
}
a.career-crm-card {
color: inherit;
text-decoration: none;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
a.career-crm-card:hover {
z-index: 1;
border-color: #cbdcd2;
box-shadow: 0 18px 42px rgba(18, 49, 34, .09);
transform: translateY(-3px);
}
.career-identity-card,
.career-status-card {
min-height: 118px;
}
.career-identity-card {
display: flex;
align-items: center;
gap: 15px;
padding: 16px 18px;
}
.career-identity-avatar,
.career-row-avatar {
position: relative;
display: grid;
flex: 0 0 auto;
place-items: center;
overflow: visible;
border-radius: 50%;
background: linear-gradient(145deg, #dfe9e3, #cbd9d1);
color: var(--green-ink);
font-weight: 850;
}
.career-identity-avatar {
width: 66px;
height: 66px;
font-size: 18px;
box-shadow: inset 0 0 0 1px rgba(6, 47, 31, .06);
}
.career-identity-avatar > img,
.career-row-avatar > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
}
.career-identity-avatar > i {
position: absolute;
right: -4px;
bottom: -2px;
z-index: 2;
display: grid;
width: 23px;
height: 23px;
place-items: center;
border: 3px solid #fff;
border-radius: 50%;
background: #0a66c2;
color: #fff;
}
.career-identity-avatar > i svg {
width: 12px;
height: 12px;
}
.career-identity-copy {
display: grid;
min-width: 0;
gap: 6px;
}
.career-identity-copy > strong {
overflow: hidden;
font-size: clamp(17px, 1.35vw, 21px);
font-weight: 850;
letter-spacing: -.025em;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-identity-copy > small {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
color: #65716b;
font-size: 11.5px;
font-weight: 670;
}
.career-identity-copy em {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 999px;
background: #e9f8ef;
color: #23834f;
font-size: 9.5px;
font-style: normal;
font-weight: 820;
}
.career-identity-copy em i,
.career-status-card strong i {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}
.career-status-card {
display: grid;
height: 100%;
align-content: start;
align-items: center;
grid-template-columns: 48px minmax(0, 1fr);
grid-template-rows: auto 1fr;
column-gap: 16px;
row-gap: 0;
padding: 24px;
}
.career-automation-status-card {
align-content: start;
}
.career-status-card .career-status-copy {
display: grid;
min-width: 0;
min-height: 48px;
align-content: center;
gap: 4px;
}
.career-status-support {
display: flex;
flex-direction: column;
justify-content: space-between;
grid-column: 1 / -1;
gap: 14px;
min-height: 106px;
margin-top: 18px;
}
.career-status-support :is(p, .career-status-support-copy) {
display: block;
min-height: 52px;
margin: 0;
color: #68756e;
font-size: 11px;
line-height: 1.45;
text-wrap: pretty;
}
.career-status-support :is(p, .career-status-support-copy) > strong {
display: block;
margin-bottom: 3px;
color: #24372d;
font-size: 12px;
}
.career-status-card.tone-danger .career-status-support :is(p, .career-status-support-copy) > strong {
color: #cf4d5e;
}
.career-status-card.tone-success .career-status-support :is(p, .career-status-support-copy) > strong {
color: #218c55;
}
.career-status-support form {
margin: 0;
width: 100%;
}
.career-automation-start,
.career-status-secondary-action {
display: inline-flex;
width: 100%;
height: 38px;
min-height: 38px;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: auto;
padding: 0 14px;
border: 1px solid #d8e5dd;
border-radius: 10px;
background: #f8fbf9;
color: #126f49;
font: inherit;
font-size: 12px;
font-weight: 760;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.career-automation-start {
border-color: #078650;
background: #078650;
color: #fff;
}
.career-automation-start:hover {
border-color: #066f43;
background: #066f43;
color: #fff;
}
.career-status-secondary-action:hover {
border-color: #bcd3c5;
background: #f1f8f4;
color: #075f3b;
}
.career-status-card:hover .career-status-secondary-action {
border-color: #bcd3c5;
background: #f1f8f4;
color: #075f3b;
}
.career-automation-start:active,
.career-status-secondary-action:active,
.career-status-card:active .career-status-secondary-action {
transform: translateY(1px);
}
.career-automation-start svg,
.career-status-secondary-action svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.career-status-icon,
.career-metric-icon,
.career-row-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
border-radius: 14px;
}
.career-status-icon {
width: 48px;
height: 48px;
background: #eaf7f0;
color: var(--green);
}
.career-status-icon svg {
width: 25px;
height: 25px;
}
.career-image-icon {
overflow: hidden;
background: transparent !important;
box-shadow:
0 8px 20px rgba(16, 82, 52, .08),
0 0 0 1px rgba(24, 49, 37, .035);
}
.career-image-icon img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.04);
transition: transform .24s ease;
}
.career-paused-mascot-img,
.activity-paused-agent-icon {
animation: paused-mascot-breathe 3.5s ease-in-out infinite;
transform-origin: center center;
}
.career-running-mascot-img,
.activity-running-agent-icon {
animation: running-mascot-pulse 2.4s ease-in-out infinite;
transform-origin: center center;
}
@keyframes running-mascot-pulse {
0%, 100% {
transform: translateY(0) scale(1.04) rotate(0deg);
}
25% {
transform: translateY(-2px) scale(1.06) rotate(1.2deg);
}
50% {
transform: translateY(0) scale(1.04) rotate(0deg);
}
75% {
transform: translateY(-1.5px) scale(1.06) rotate(-1.2deg);
}
}
@keyframes paused-mascot-breathe {
0%, 100% {
transform: translateY(0) scale(1.03) rotate(0deg);
}
30% {
transform: translateY(-2px) scale(1.05) rotate(-1.5deg);
}
70% {
transform: translateY(1.5px) scale(1.01) rotate(1.5deg);
}
}
.career-status-card:hover .career-image-icon img,
.career-metric-card:hover .career-image-icon img,
.career-attention-row:hover .career-image-icon img,
.career-recent-row:hover .career-image-icon img,
.career-tips-card:hover .career-image-icon img {
transform: scale(1.1) rotate(-1deg);
}
.career-status-card small {
color: #536059;
font-size: 11.5px;
font-weight: 560;
line-height: 1.25;
}
.career-status-card strong {
display: flex;
align-items: center;
gap: 8px;
color: var(--ink);
font-size: clamp(14px, 1vw, 16px);
font-weight: 800;
letter-spacing: -.015em;
line-height: 1.15;
}
.career-status-card em {
overflow: hidden;
color: #89928d;
font-size: 10.5px;
font-style: normal;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-status-card.tone-success strong { color: #218c55; }
.career-status-card.tone-warning strong { color: #d5780c; }
.career-status-card.tone-danger strong { color: #cf4d5e; }
.career-status-card.tone-neutral strong { color: #67726c; }
.career-status-card.tone-success .career-status-icon { background: #e8f8ef; color: #25a461; }
.career-status-card.tone-warning .career-status-icon { background: #fff1df; color: #ed8d1a; }
.career-status-card.tone-danger .career-status-icon { background: #ffeaee; color: #df5368; }
.career-status-card.tone-neutral .career-status-icon { background: #f1eefc; color: #7359df; }
.career-crm-metrics {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
padding: 0 14px;
}
.career-metric-card {
position: relative;
display: grid;
min-height: 196px;
align-content: start;
grid-template-columns: auto 1fr;
gap: 12px;
padding: 22px 20px 18px;
overflow: hidden;
}
.career-metric-icon {
width: 48px;
height: 48px;
}
.career-metric-icon svg {
width: 23px;
height: 23px;
}
.career-metric-copy {
display: grid;
align-content: center;
gap: 1px;
}
.career-metric-copy strong {
color: var(--ink);
font-size: 27px;
font-weight: 880;
letter-spacing: -.035em;
line-height: 1;
}
.career-metric-copy small {
color: #5f6b65;
font-size: 12.5px;
font-weight: 680;
line-height: 1.25;
}
.career-metric-card.tone-blue { --metric-color: var(--career-blue); --metric-soft: #edf3ff; }
.career-metric-card.tone-cyan { --metric-color: var(--career-cyan); --metric-soft: #e9f9fd; }
.career-metric-card.tone-green { --metric-color: var(--career-green); --metric-soft: #eaf9f0; }
.career-metric-card.tone-orange { --metric-color: var(--career-orange); --metric-soft: #fff3e6; }
.career-metric-card.tone-yellow { --metric-color: var(--career-yellow); --metric-soft: #fff8dc; }
.career-metric-card.tone-purple { --metric-color: var(--career-purple); --metric-soft: #f1edff; }
.career-metric-card.tone-rose { --metric-color: var(--career-rose); --metric-soft: #ffedf3; }
.career-metric-card .career-metric-icon { background: var(--metric-soft); color: var(--metric-color); }
.career-mini-bars,
.career-mini-line {
position: relative;
height: 72px;
align-self: end;
grid-column: 1 / -1;
margin-top: 8px;
}
.career-mini-bars {
display: flex;
align-items: end;
gap: 6px;
padding: 10px 2px 6px;
}
.career-mini-bars::after {
position: absolute;
right: 2px;
bottom: 5px;
left: 2px;
z-index: 0;
height: 3px;
border-radius: 99px;
background: repeating-linear-gradient(
90deg,
color-mix(in srgb, var(--metric-color) 24%, #fff) 0 13px,
transparent 13px 20px
);
content: "";
}
.career-mini-bars i {
position: relative;
z-index: 1;
display: block;
width: 100%;
min-width: 3px;
height: var(--bar-height);
max-height: 58px;
border-radius: 5px 5px 1px 1px;
background: color-mix(in srgb, var(--metric-color) 18%, #fff);
opacity: .58;
transform: scaleY(0);
transform-origin: bottom;
animation: careerBarGrow .72s cubic-bezier(.2, .72, .25, 1) forwards;
animation-delay: calc(150ms + var(--bar-index) * 48ms);
}
.career-mini-bars i.is-active {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--metric-color) 94%, #fff),
color-mix(in srgb, var(--metric-color) 48%, #fff)
);
box-shadow: 0 8px 14px color-mix(in srgb, var(--metric-color) 14%, transparent);
opacity: 1;
}
.career-mini-line {
display: block;
padding: 7px 0 2px;
color: var(--metric-color);
}
.career-mini-line svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.career-mini-line .career-chart-baseline {
stroke: color-mix(in srgb, var(--metric-color) 22%, #fff);
stroke-width: 1.65;
stroke-dasharray: 5 4;
}
.career-mini-line .career-chart-area {
fill: color-mix(in srgb, var(--metric-color) 12%, transparent);
stroke: none;
opacity: 0;
animation: careerChartAreaIn .72s ease .42s forwards;
}
.career-mini-line .career-chart-line {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
filter: drop-shadow(0 4px 5px color-mix(in srgb, var(--metric-color) 18%, transparent));
animation: careerLineDraw 1.05s cubic-bezier(.2, .72, .25, 1) .16s forwards;
}
.career-mini-line .career-chart-dot {
fill: currentColor;
stroke: #fff;
stroke-width: 1.15;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
animation: careerChartDotIn .36s cubic-bezier(.2, .8, .25, 1.25) 1.05s forwards;
}
@property --career-ring-progress {
syntax: "
";
inherits: false;
initial-value: 0%;
}
.career-metric-ring {
--career-ring-progress: 0%;
display: grid;
width: 76px;
height: 76px;
place-items: center;
align-self: end;
justify-self: center;
grid-column: 1 / -1;
border-radius: 50%;
background: conic-gradient(
var(--metric-color) var(--career-ring-progress),
var(--metric-soft) 0
);
animation: careerRingFill .82s cubic-bezier(.2, .72, .25, 1) .2s forwards;
}
.career-metric-ring > i {
display: grid;
width: 58px;
height: 58px;
place-items: center;
border-radius: 50%;
background: #fff;
font-style: normal;
}
.career-metric-ring strong {
color: #5e6963;
font-size: 12px;
}
.career-crm-main-grid,
.career-crm-insight-grid {
display: grid;
gap: 18px;
}
.career-crm-main-grid {
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
gap: 18px;
}
.career-crm-insight-grid {
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}
.career-attention-card,
.career-recent-card,
.career-jobs-card,
.career-performance-card,
.career-tips-card {
overflow: hidden;
}
.career-card-heading {
display: flex;
min-height: 76px;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 22px 24px 18px;
}
.career-card-heading h2 {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
color: var(--career-text-primary);
font-size: var(--career-panel-title-size);
font-weight: 850;
letter-spacing: -.025em;
line-height: 1.1;
}
.career-heading-3d-icon {
display: block;
width: 42px;
height: 42px;
margin-right: 2px;
border-radius: 13px;
object-fit: cover;
box-shadow:
0 8px 20px rgba(16, 82, 52, .08),
0 0 0 1px rgba(24, 49, 37, .035);
transition: transform .24s ease;
}
.career-performance-card:hover .career-heading-3d-icon,
.career-recent-card:hover .career-heading-3d-icon,
.career-jobs-card:hover .career-heading-3d-icon {
transform: scale(1.08) rotate(-2deg);
}
.career-card-heading h2 > span {
display: grid;
min-width: 32px;
height: 32px;
padding: 0 10px;
place-items: center;
border-radius: 999px;
font-size: 12.5px;
font-variant-numeric: tabular-nums;
}
.career-card-heading h2 > .tone-danger { background: #ffebef; color: #df5268; }
.career-card-heading h2 > .tone-info { background: #ebf2ff; color: #3978f6; }
.career-recent-card .career-card-heading h2 > .tone-info {
background: var(--career-brand-soft);
color: var(--career-brand-primary);
}
.career-card-heading > a {
color: var(--career-brand-primary);
font-size: 12px;
font-weight: 850;
text-decoration: none;
}
.career-card-heading > .career-section-action {
display: inline-flex;
min-height: 40px;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 15px;
border: 1px solid #c8ddd1;
border-radius: 10px;
background: #fff;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.career-card-heading > .career-section-action:hover {
border-color: var(--career-brand-primary);
box-shadow: 0 8px 20px rgba(15, 84, 53, .08);
transform: translateY(-1px);
}
.career-card-heading > .career-section-action:active {
transform: translateY(1px) scale(.985);
}
.career-card-heading > .career-section-action:focus-visible {
outline: 3px solid rgba(8, 122, 72, .18);
outline-offset: 3px;
}
.career-card-heading > .career-section-action svg {
width: 13px;
height: 13px;
}
.career-card-heading > span {
padding: 7px 12px;
border: 1px solid #dde7e1;
border-radius: 10px;
color: #647069;
font-size: 11px;
font-weight: 750;
}
.career-attention-list,
.career-recent-list {
border-top: 1px solid #e8eee9;
}
.career-card-heading h2 > .tone-success {
background: #e9f8ef;
color: #258653;
}
.career-attention-row {
display: grid;
min-height: 78px;
align-items: center;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 14px;
margin: 0 22px;
padding: 13px 2px;
border: 0;
border-bottom: 1px solid #edf1ee;
background: transparent;
color: inherit;
text-decoration: none;
}
.career-attention-row:last-child {
border-bottom: 0;
}
.career-attention-card--final .career-attention-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.career-attention-card--final .career-attention-row {
min-height: 82px;
margin: 0;
padding: 14px 22px;
}
.career-attention-card--final .career-attention-row:nth-child(odd) {
border-right: 1px solid #edf1ee;
}
.career-attention-card--final .career-crm-empty {
min-height: 138px;
}
.career-attention-row > span:nth-child(2),
.career-attention-row > button {
display: grid;
min-width: 0;
gap: 4px;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.career-attention-row strong,
.career-recent-row strong {
overflow: hidden;
color: #26332c;
font-size: 12.5px;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-attention-row small,
.career-recent-row small {
overflow: hidden;
color: #818b85;
font-size: 10.5px;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-attention-row > em {
padding: 4px 7px;
border-radius: 7px;
background: #f1f4f2;
color: #6a756f;
font-size: 9.5px;
font-style: normal;
font-weight: 820;
}
.career-row-icon {
width: 39px;
height: 39px;
background: #edf3ff;
color: #3978f6;
}
.career-attention-row .career-image-icon,
.career-recent-row .career-image-icon {
width: 46px;
height: 46px;
border-radius: 14px;
}
.career-row-icon svg {
width: 19px;
height: 19px;
}
.career-attention-row.tone-danger .career-row-icon { background: #ffebef; color: #df5368; }
.career-attention-row.tone-danger > em { background: #ffebef; color: #d74960; }
.career-attention-row.tone-warning .career-row-icon { background: #fff1df; color: #e98a17; }
.career-attention-row.tone-warning > em { background: #fff1df; color: #c8710c; }
.career-attention-row.tone-info .career-row-icon { background: #eeeafd; color: #7259df; }
.career-attention-row.tone-info > em { background: #eeeafd; color: #6248ce; }
.career-attention-row:hover strong,
.career-recent-row:hover strong {
color: var(--green-dark);
}
.career-card-footer {
display: flex;
min-height: 49px;
align-items: center;
justify-content: center;
gap: 8px;
border-top: 1px solid #e8eee9;
color: var(--green-dark);
font-size: 11px;
font-weight: 850;
text-decoration: none;
}
.career-card-footer svg {
width: 14px;
height: 14px;
}
.career-recent-card,
.career-jobs-card {
border-color: var(--career-border-soft);
background: rgba(255, 255, 255, .98);
box-shadow:
0 2px 8px rgba(15, 40, 29, .025),
0 18px 46px rgba(15, 40, 29, .045);
}
.career-recent-card,
.career-jobs-card {
display: flex;
flex-direction: column;
}
.career-recent-list,
.career-job-list {
display: grid;
gap: 12px;
padding: 0 24px 24px;
border: 0;
}
.career-recent-row {
display: grid;
min-height: 108px;
align-items: center;
grid-template-columns: var(--career-row-visual-size) minmax(0, 1fr) minmax(96px, 116px);
gap: var(--career-row-gap);
margin: 0;
padding: 16px 18px;
border: 1px solid var(--career-border-soft);
border-radius: 16px;
background: var(--career-surface-card);
box-shadow:
0 2px 5px rgba(15, 40, 29, .025),
0 8px 20px rgba(15, 40, 29, .04);
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.career-recent-row:hover {
border-color: #d6e4dc;
box-shadow:
0 3px 8px rgba(15, 40, 29, .035),
0 16px 36px rgba(15, 40, 29, .075);
transform: translateY(-2px);
}
.career-recent-row:last-child {
border-bottom: 1px solid var(--career-border-soft);
}
.career-recent-row > a:not(.career-linkedin-link) {
display: grid;
min-width: 0;
justify-items: start;
gap: 7px;
color: inherit;
text-decoration: none;
}
.career-activity-type {
display: inline-flex;
min-height: 27px;
align-items: center;
gap: 6px;
padding: 5px 9px;
border-radius: 999px;
background: var(--career-brand-soft);
color: var(--career-brand-primary);
font-size: var(--career-row-meta-size);
font-weight: 700;
line-height: 1;
}
.career-activity-type svg {
width: 13px;
height: 13px;
}
.career-recent-row strong {
width: 100%;
color: var(--career-text-primary);
font-size: var(--career-row-title-size);
font-weight: 780;
letter-spacing: -.025em;
line-height: 1.2;
}
.career-recent-row small {
width: 100%;
color: var(--career-text-secondary);
font-size: var(--career-row-body-size);
font-weight: 500;
line-height: 1.35;
}
.career-recent-meta {
display: flex;
min-width: 0;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.career-recent-row time {
color: var(--career-text-muted);
font-size: var(--career-row-meta-size);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.career-row-avatar {
width: var(--career-row-visual-size);
height: var(--career-row-visual-size);
overflow: hidden;
font-size: 11px;
box-shadow: inset 0 0 0 1px rgba(6, 47, 31, .05);
}
.career-recent-row .career-image-icon {
width: var(--career-row-visual-size);
height: var(--career-row-visual-size);
border-radius: 17px;
}
.career-linkedin-link {
display: grid;
width: 38px;
height: 38px;
flex: 0 0 auto;
place-items: center;
border: 1px solid #dbe7e1;
border-radius: 10px;
background: #f8fbfd;
color: #0a66c2;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.career-linkedin-link:hover {
border-color: #b7d3e8;
background: #edf6fc;
transform: translateY(-1px);
}
.career-linkedin-link:active {
transform: translateY(1px) scale(.97);
}
.career-linkedin-link:focus-visible {
outline: 3px solid rgba(10, 102, 194, .18);
outline-offset: 2px;
}
.career-linkedin-link svg {
width: 17px;
height: 17px;
}
.career-recent-row.is-comment .career-activity-type { background: #ebf9fd; color: #167da2; }
.career-recent-row.is-post .career-activity-type { background: #eaf8f0; color: #188151; }
.career-recent-row.is-message_received .career-activity-type { background: #fff3e6; color: #a76110; }
.career-recent-row.is-connected .career-activity-type,
.career-recent-row.is-connection_request .career-activity-type { background: #eaf8f0; color: #188151; }
.career-recent-heading .career-heading-3d-icon,
.career-jobs-heading .career-heading-3d-icon {
width: 46px;
height: 46px;
margin-right: 2px;
border-radius: 13px;
}
.career-job-search-settings {
display: grid;
width: calc(100% - 48px);
min-height: 90px;
align-items: center;
grid-template-columns: 52px minmax(0, 1fr) auto;
gap: 14px;
margin: 0 24px 16px;
padding: 14px 16px;
border: 0;
border-radius: 15px;
background: #f5f8f6;
color: var(--career-text-primary);
font: inherit;
text-align: left;
cursor: pointer;
box-shadow: inset 0 1px 0 #fff;
transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.career-job-search-settings:hover {
background: #f1f6f3;
box-shadow:
0 12px 26px rgba(25, 49, 37, .065),
inset 0 1px 0 #fff;
transform: translateY(-1px);
}
.career-job-search-settings:focus-visible {
outline: 3px solid rgba(7, 131, 83, .18);
outline-offset: 2px;
}
.career-job-search-settings-icon {
display: grid;
width: 52px;
height: 52px;
place-items: center;
border-radius: 14px;
background: #fff;
color: var(--career-brand-primary);
box-shadow: var(--career-shadow-card);
}
.career-job-search-settings-icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.career-job-search-settings-copy {
display: grid;
min-width: 0;
gap: 3px;
}
.career-job-search-settings-copy small {
color: var(--career-brand-primary);
font-size: 9px;
font-weight: 900;
letter-spacing: .075em;
text-transform: uppercase;
}
.career-job-search-settings-copy strong {
color: var(--career-text-primary);
font-size: 13px;
font-weight: 800;
line-height: 1.25;
}
.career-job-search-settings-copy > span {
overflow: hidden;
color: var(--career-text-secondary);
font-size: 10.5px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-job-search-settings-copy > span i {
margin: 0 4px;
color: var(--career-brand-primary);
font-style: normal;
}
.career-job-search-settings-action {
display: inline-flex;
min-height: 38px;
align-items: center;
gap: 7px;
padding: 0 12px;
border-radius: 10px;
background: #fff;
color: var(--career-text-secondary);
font-size: 10px;
font-weight: 850;
white-space: nowrap;
}
.career-job-search-settings-action {
min-width: 116px;
justify-content: center;
background: var(--career-brand-dark);
color: #fff;
}
.career-job-search-settings-action svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.career-job-list {
display: grid;
}
@media (min-width: 981px) {
.career-job-list.is-balanced {
flex: 1 1 auto;
grid-template-rows: repeat(
var(--career-dashboard-job-count),
minmax(132px, 1fr)
);
}
.career-job-list.is-balanced .career-job-row {
height: 100%;
}
}
.career-job-row {
display: grid;
min-height: 132px;
align-items: center;
grid-template-columns: var(--career-row-visual-size) minmax(0, 1fr) 136px;
gap: var(--career-row-gap);
margin: 0;
padding: 16px 18px;
border: 1px solid var(--career-border-soft);
border-radius: 16px;
background: var(--career-surface-card);
box-shadow:
0 2px 5px rgba(15, 40, 29, .025),
0 8px 20px rgba(15, 40, 29, .04);
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.career-job-row:hover {
border-color: #d6e4dc;
box-shadow:
0 3px 8px rgba(15, 40, 29, .035),
0 16px 36px rgba(15, 40, 29, .075);
transform: translateY(-2px);
}
.career-job-row:last-child {
border-bottom: 1px solid var(--career-border-soft);
}
.career-job-icon {
width: var(--career-row-visual-size);
height: var(--career-row-visual-size);
border-radius: 17px;
}
.career-job-copy {
display: grid;
min-width: 0;
align-content: center;
gap: 7px;
}
.career-job-title-line {
display: flex;
min-width: 0;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.career-job-title-line > a {
overflow: hidden;
color: var(--career-text-primary);
font-size: var(--career-row-title-size);
font-weight: 780;
letter-spacing: -.025em;
line-height: 1.22;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-job-title-line > a:hover {
color: var(--green-dark);
}
.career-job-copy > p {
display: flex;
min-width: 0;
gap: 5px;
margin: 0;
overflow: hidden;
color: var(--career-text-secondary);
font-size: var(--career-row-body-size);
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-job-copy > p strong {
overflow: hidden;
color: #46574e;
font-weight: 650;
text-overflow: ellipsis;
}
.career-job-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.career-job-meta > span {
display: inline-flex;
min-height: 28px;
align-items: center;
gap: 5px;
padding: 5px 8px;
border-radius: 999px;
background: #f0f4f1;
color: #5f6d66;
font-size: var(--career-row-meta-size);
font-weight: 700;
line-height: 1.2;
}
.career-job-meta > span svg {
width: 12px;
height: 12px;
}
.career-job-meta > .career-job-clicks {
background: #edf3ff;
color: #3978f6;
}
.career-job-meta > .career-job-applicants {
background: #f1ecff;
color: #6c50cc;
}
.career-job-meta > .career-job-source {
background: #e9f8ef;
color: #258653;
}
.career-job-meta > .career-job-recorded {
background: #e9f8ef;
color: #258653;
}
.career-job-actions {
display: grid;
min-height: 98px;
align-content: space-between;
justify-items: end;
gap: 12px;
}
.career-job-actions > time {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--career-text-muted);
font-size: var(--career-row-meta-size);
font-variant-numeric: tabular-nums;
font-weight: 520;
white-space: nowrap;
}
.career-job-actions > time svg {
width: 14px;
height: 14px;
}
.career-job-action-buttons {
display: flex;
align-items: center;
gap: 8px;
}
.career-job-actions form {
margin: 0;
}
.career-job-actions button,
.career-job-details-link {
display: inline-flex;
min-width: 86px;
min-height: 42px;
align-items: center;
justify-content: center;
padding: 0 14px;
border: 0;
border-radius: 10px;
background: var(--career-brand-primary);
color: #fff;
font: inherit;
font-size: 11.5px;
font-weight: 850;
text-decoration: none;
cursor: pointer;
box-shadow: 0 8px 18px rgba(8, 122, 72, .15);
transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.career-job-actions button:hover,
.career-job-details-link:hover {
background: var(--career-brand-dark);
box-shadow: 0 11px 24px rgba(7, 85, 55, .2);
transform: translateY(-1px);
}
.career-job-actions button:active,
.career-job-details-link:active {
transform: translateY(1px) scale(.985);
}
.career-job-actions button:focus-visible,
.career-job-details-link:focus-visible {
outline: 3px solid rgba(8, 122, 72, .2);
outline-offset: 3px;
}
.career-job-actions .career-linkedin-link {
width: 42px;
height: 42px;
}
.career-job-transparency {
display: flex;
min-height: 46px;
align-items: center;
gap: 8px;
margin: 0 24px 24px;
padding: 9px 14px;
border: 0;
border-radius: 10px;
background: #f7faf8;
color: var(--career-text-secondary);
font-size: 10.5px;
font-weight: 620;
line-height: 1.35;
}
.career-job-transparency svg {
width: 17px;
height: 17px;
flex: 0 0 auto;
color: var(--career-brand-primary);
}
.career-jobs-empty > span {
width: 58px;
height: 58px;
border-radius: 17px;
}
.career-jobs-empty img {
width: 100%;
height: 100%;
object-fit: cover;
}
.career-crm-empty {
display: flex;
min-height: 190px;
align-items: center;
justify-content: center;
gap: 14px;
padding: 28px;
text-align: left;
}
.career-crm-empty > span {
display: grid;
width: 45px;
height: 45px;
flex: 0 0 auto;
place-items: center;
border-radius: 14px;
background: #eaf7f0;
color: var(--green);
}
.career-crm-empty svg {
width: 21px;
height: 21px;
}
.career-crm-empty strong {
color: #344139;
font-size: 13px;
}
.career-crm-empty p {
max-width: 330px;
margin: 4px 0 0;
color: #7b8680;
font-size: 11px;
line-height: 1.45;
}
.career-dashboard-empty {
display: grid;
min-height: 520px;
flex: 1 1 auto;
align-content: center;
justify-items: center;
gap: 4px;
padding: 18px 36px 48px;
text-align: center;
}
.career-dashboard-empty > img {
display: block;
width: min(92%, 620px);
max-height: 350px;
object-fit: contain;
}
.career-dashboard-empty-copy {
display: grid;
max-width: 560px;
justify-items: center;
gap: 10px;
margin-top: -2px;
}
.career-dashboard-empty-copy h3 {
margin: 0;
color: var(--career-text-primary);
font-size: clamp(22px, 1.8vw, 29px);
font-weight: 880;
letter-spacing: -.035em;
line-height: 1.12;
}
.career-dashboard-empty-copy p {
max-width: 540px;
margin: 0;
color: var(--career-text-secondary);
font-size: clamp(13px, 1.08vw, 16px);
font-weight: 540;
line-height: 1.55;
text-wrap: balance;
}
.career-dashboard-empty-copy p > span {
display: block;
}
.career-performance-card {
min-height: 300px;
padding-bottom: 18px;
background:
radial-gradient(circle at 20% 68%, rgba(57, 120, 246, .065), transparent 29%),
linear-gradient(145deg, #fff 58%, #f8fbf9 100%);
}
.career-performance-layout {
display: grid;
min-height: 220px;
align-items: center;
grid-template-columns: minmax(180px, .74fr) minmax(225px, 1fr);
gap: 22px;
padding: 0 28px 22px;
}
.career-performance-ring {
position: relative;
display: grid;
width: min(192px, 100%);
aspect-ratio: 1;
place-items: center;
justify-self: center;
border-radius: 50%;
background: conic-gradient(
#3978f6 0 var(--posts-end),
#35b8e8 var(--posts-end) var(--comments-end),
#35bf72 var(--comments-end) var(--connections-end),
#f59a2b var(--connections-end) var(--replies-end),
#7657e7 var(--replies-end) var(--interviews-end),
#e9efeb var(--interviews-end) 360deg
);
box-shadow:
0 20px 44px rgba(30, 64, 47, .1),
0 0 0 7px rgba(255, 255, 255, .74);
transform: rotate(-90deg);
animation: careerPerformanceReveal .72s cubic-bezier(.2, .72, .25, 1) both;
}
.career-performance-ring::before {
content: "";
position: absolute;
inset: 24%;
border-radius: 50%;
background: #fff;
box-shadow:
inset 0 0 0 1px rgba(20, 35, 28, .035),
0 7px 18px rgba(22, 54, 38, .06);
}
.career-performance-ring > span {
position: relative;
z-index: 1;
display: grid;
gap: 3px;
text-align: center;
transform: rotate(90deg);
}
.career-performance-ring strong {
color: var(--ink);
font-size: 28px;
font-weight: 880;
line-height: 1;
}
.career-performance-ring small {
color: #77827c;
font-size: 11px;
font-weight: 700;
}
.career-performance-legend {
display: grid;
gap: 7px;
}
.career-performance-legend > div {
display: grid;
min-height: 37px;
align-items: center;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 10px;
padding: 8px 11px;
border: 1px solid #edf2ee;
border-radius: 11px;
background: rgba(255, 255, 255, .76);
color: #626e67;
font-size: 12px;
transition: border-color .2s ease, transform .2s ease;
}
.career-performance-legend > div:hover {
border-color: color-mix(in srgb, var(--legend-color) 30%, #edf2ee);
transform: translateX(2px);
}
.career-performance-legend i {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--legend-color);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--legend-color) 13%, transparent);
}
.career-performance-legend strong {
color: #26342c;
font-size: 13px;
}
.career-agent-actions {
display: grid;
min-width: 0;
align-items: center;
grid-template-columns: 52px minmax(0, 1fr) auto 18px;
gap: 12px;
margin: 0 24px 4px;
padding: 11px 13px 11px 10px;
border-radius: 17px;
background:
radial-gradient(circle at 92% 20%, rgba(118, 87, 231, .1), transparent 34%),
#f2f5ff;
color: var(--ink);
text-decoration: none;
box-shadow:
0 11px 26px rgba(57, 85, 150, .09),
inset 0 1px 0 rgba(255, 255, 255, .86);
transition: box-shadow .2s ease, transform .2s ease;
}
.career-agent-actions:hover {
box-shadow:
0 16px 34px rgba(57, 85, 150, .14),
inset 0 1px 0 rgba(255, 255, 255, .94);
transform: translateY(-2px);
}
.career-agent-actions-icon {
width: 52px;
height: 52px;
border-radius: 16px;
}
.career-agent-actions-icon img {
width: 48px;
height: 48px;
object-fit: contain;
filter: drop-shadow(0 7px 10px rgba(72, 53, 151, .15));
transition: transform .24s cubic-bezier(.2, .72, .25, 1);
}
.career-agent-actions:hover .career-agent-actions-icon img {
transform: translateY(-2px) rotate(-3deg) scale(1.05);
}
.career-agent-actions-copy {
display: grid;
min-width: 0;
gap: 2px;
}
.career-agent-actions-copy > small {
color: #7657e7;
font-size: 8.5px;
font-weight: 850;
letter-spacing: .05em;
text-transform: uppercase;
}
.career-agent-actions-copy strong {
color: #26342c;
font-size: 12.5px;
font-weight: 850;
}
.career-agent-actions-copy strong b {
margin-left: 4px;
color: #7657e7;
font-size: 15px;
font-variant-numeric: tabular-nums;
}
.career-agent-actions-copy > span {
overflow: hidden;
color: #737f78;
font-size: 9.5px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.career-agent-actions-delta {
display: grid;
gap: 1px;
color: #737f78;
font-size: 13px;
font-weight: 860;
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.career-agent-actions-delta.is-positive {
color: #258653;
}
.career-agent-actions-delta.is-negative {
color: #d45867;
}
.career-agent-actions-delta small {
color: #8a948e;
font-size: 7.5px;
font-weight: 680;
}
.career-agent-actions-arrow {
width: 16px;
height: 16px;
color: #7657e7;
transition: transform .2s ease;
}
.career-agent-actions:hover .career-agent-actions-arrow {
transform: translateX(2px);
}
.career-tips-card {
position: relative;
min-height: 338px;
background:
radial-gradient(circle at 86% 70%, rgba(57, 120, 246, .08), transparent 34%),
linear-gradient(145deg, #fff 62%, #f7faff 100%);
}
.career-tips-heading {
display: grid;
min-height: 82px;
align-items: center;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 14px;
padding: 18px 24px 12px;
}
.career-tips-heading > .career-image-icon {
width: 48px;
height: 48px;
border-radius: 15px;
box-shadow:
0 10px 24px rgba(57, 120, 246, .12),
0 0 0 1px rgba(57, 120, 246, .05);
}
.career-tips-heading > span:nth-child(2) {
display: grid;
gap: 2px;
}
.career-tips-heading small,
.career-tip-copy > span {
color: #3978f6;
font-size: 9.5px;
font-weight: 880;
letter-spacing: .1em;
text-transform: uppercase;
}
.career-tips-heading h2 {
margin: 0;
color: var(--ink);
font-size: 19px;
font-weight: 860;
letter-spacing: -.025em;
}
.career-tips-heading > em {
padding: 6px 9px;
border: 1px solid #dfe8f4;
border-radius: 9px;
color: #6f7b86;
font-size: 10px;
font-style: normal;
font-weight: 780;
}
.career-tip-stage {
position: relative;
min-height: 208px;
overflow: hidden;
}
.career-tip-slide {
position: absolute;
inset: 0;
display: grid;
align-items: center;
grid-template-columns: minmax(0, 1fr) minmax(160px, 210px);
gap: 20px;
padding: 2px 24px 12px 30px;
opacity: 0;
pointer-events: none;
transform: translateX(18px);
transition:
opacity .42s ease,
transform .52s cubic-bezier(.2, .72, .25, 1);
}
.career-tip-slide.is-active {
z-index: 1;
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.career-tip-copy {
display: grid;
align-content: center;
gap: 9px;
}
.career-tip-copy h3 {
max-width: 420px;
margin: 0;
color: #1e2e25;
font-size: clamp(18px, 1.42vw, 23px);
font-weight: 880;
letter-spacing: -.035em;
line-height: 1.12;
}
.career-tip-copy p {
max-width: 450px;
margin: 0;
color: #66736c;
font-size: 11.5px;
line-height: 1.55;
}
.career-tip-copy > a {
display: inline-flex;
width: max-content;
align-items: center;
gap: 6px;
margin-top: 2px;
color: var(--green-dark);
font-size: 11px;
font-weight: 850;
text-decoration: none;
}
.career-tip-copy > a svg {
width: 13px;
height: 13px;
}
.career-tip-slide.tone-cyan .career-tip-copy > span { color: #188fb8; }
.career-tip-slide.tone-purple .career-tip-copy > span { color: #6b52db; }
.career-tip-slide.tone-green .career-tip-copy > span { color: #23955a; }
.career-tip-visual {
position: relative;
display: grid;
width: min(100%, 198px);
aspect-ratio: 1;
place-items: center;
justify-self: end;
}
.career-tip-visual::before {
position: absolute;
inset: 10%;
border-radius: 50%;
background: rgba(57, 120, 246, .1);
filter: blur(24px);
content: "";
}
.career-tip-visual img {
position: relative;
display: block;
width: 100%;
height: 100%;
border-radius: 24px;
object-fit: cover;
box-shadow: 0 18px 38px rgba(39, 77, 59, .11);
transition: transform .35s ease;
}
.career-tip-slide.is-active .career-tip-visual img {
animation: careerTipVisualIn .62s cubic-bezier(.2, .72, .25, 1) both;
}
.career-tips-card:hover .career-tip-visual img {
transform: translateY(-3px) rotate(1deg);
}
.career-tip-controls {
display: flex;
min-height: 48px;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 8px 22px 13px 30px;
}
.career-tip-controls > div,
.career-tip-controls > span {
display: flex;
align-items: center;
gap: 7px;
}
.career-tip-controls button {
display: grid;
width: 30px;
height: 30px;
padding: 0;
place-items: center;
border: 1px solid #dfe8e2;
border-radius: 9px;
background: #fff;
color: #5e6d65;
cursor: pointer;
transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.career-tip-controls > div button {
width: 8px;
height: 8px;
border: 0;
border-radius: 999px;
background: #dce6e0;
}
.career-tip-controls > div button.is-active {
width: 24px;
background: #3978f6;
}
.career-tip-controls > span button:hover {
border-color: #bfd2c6;
background: #f5f9f6;
transform: translateY(-1px);
}
.career-tip-controls svg {
width: 14px;
height: 14px;
}
@keyframes careerCrmReveal {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes careerWaveDrift {
from { opacity: .72; transform: translate3d(-.7%, 4px, 0) scaleX(1.015); }
to { opacity: .94; transform: translate3d(.7%, -2px, 0) scaleX(.995); }
}
@keyframes careerDotsDrift {
from { opacity: .42; transform: translate3d(-3px, 2px, 0); }
to { opacity: .68; transform: translate3d(3px, -2px, 0); }
}
@keyframes careerBarGrow {
to { transform: scaleY(1); }
}
@keyframes careerLineDraw {
to { stroke-dashoffset: 0; }
}
@keyframes careerChartAreaIn {
to { opacity: 1; }
}
@keyframes careerChartDotIn {
from { opacity: 0; transform: scale(.25); }
to { opacity: 1; transform: scale(1); }
}
@keyframes careerRingFill {
to { --career-ring-progress: var(--career-ring-target); }
}
@keyframes careerPerformanceReveal {
from { opacity: .25; transform: rotate(-90deg) scale(.84); }
to { opacity: 1; transform: rotate(-90deg) scale(1); }
}
@keyframes careerTipVisualIn {
from { opacity: .35; transform: translateY(8px) scale(.94); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 1240px) {
.career-crm-hero-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.career-crm-heading {
grid-column: 1 / -1;
min-height: auto;
padding: 4px 2px 8px;
}
.career-status-card {
gap: 12px;
padding: 18px 15px;
}
.career-status-icon {
width: 44px;
height: 44px;
}
.career-crm-metrics {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.career-metric-card {
min-height: 170px;
}
.career-recent-row {
grid-template-columns: 52px minmax(0, 1fr) minmax(80px, 96px);
gap: 14px;
padding-inline: 14px;
}
.career-row-avatar,
.career-recent-row .career-image-icon {
width: 52px;
height: 52px;
}
.career-job-search-settings {
grid-template-columns: 46px minmax(0, 1fr) auto;
gap: 11px;
padding-inline: 12px;
}
.career-job-search-settings-icon {
width: 46px;
height: 46px;
}
.career-job-row {
grid-template-columns: 52px minmax(0, 1fr) 118px;
gap: 14px;
padding-inline: 14px;
}
.career-job-icon {
width: 52px;
height: 52px;
}
}
@media (max-width: 980px) {
.career-crm-hero-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.career-crm-heading {
grid-column: 1 / -1;
}
.career-crm-main-grid,
.career-crm-insight-grid {
grid-template-columns: 1fr;
}
.career-job-row {
grid-template-columns: 72px minmax(0, 1fr) minmax(220px, 250px);
gap: 20px;
padding-inline: 22px;
}
.career-job-icon {
width: 72px;
height: 72px;
}
.career-job-search-settings {
grid-template-columns: 68px minmax(0, 1fr) auto;
}
.career-job-search-settings-icon {
width: 68px;
height: 68px;
}
}
@media (max-width: 700px) {
.career-crm-dashboard {
gap: 14px;
}
.career-crm-hero-strip,
.career-crm-insight-grid {
grid-template-columns: 1fr;
}
.career-crm-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.career-metric-card {
min-height: 165px;
padding: 17px 15px 14px;
}
.career-metric-icon {
width: 42px;
height: 42px;
}
.career-performance-layout {
grid-template-columns: 1fr;
min-height: auto;
gap: 20px;
padding-inline: 24px;
}
.career-performance-ring {
width: min(190px, 74vw);
}
.career-agent-actions {
grid-template-columns: 48px minmax(0, 1fr) auto;
margin-inline: 18px;
}
.career-agent-actions-icon {
width: 48px;
height: 48px;
}
.career-agent-actions-icon img {
width: 44px;
height: 44px;
}
.career-agent-actions-arrow {
display: none;
}
.career-tip-slide {
grid-template-columns: minmax(0, 1fr) 150px;
gap: 12px;
padding-inline: 22px;
}
.career-tip-visual {
width: 145px;
}
.career-attention-card--final .career-attention-list {
grid-template-columns: 1fr;
}
.career-attention-card--final .career-attention-row:nth-child(odd) {
border-right: 0;
}
.career-card-heading {
min-height: 76px;
padding: 20px 18px 16px;
}
.career-card-heading h2 {
font-size: 21px;
}
.career-card-heading > .career-section-action {
min-height: 40px;
padding-inline: 13px;
font-size: 12px;
}
.career-recent-list,
.career-job-list {
gap: 12px;
padding: 0 16px 18px;
}
.career-recent-row {
min-height: 124px;
grid-template-columns: 64px minmax(0, 1fr);
gap: 16px;
padding: 18px;
}
.career-row-avatar,
.career-recent-row .career-image-icon {
width: 64px;
height: 64px;
border-radius: 17px;
}
.career-row-avatar {
border-radius: 50%;
}
.career-recent-meta {
grid-column: 2;
justify-content: flex-start;
}
.career-recent-row time {
display: inline;
}
.career-linkedin-link {
width: 42px;
height: 42px;
}
.career-jobs-heading .career-heading-3d-icon {
width: 46px;
height: 46px;
}
.career-job-search-settings {
width: calc(100% - 32px);
min-height: 104px;
grid-template-columns: 58px minmax(0, 1fr);
gap: 14px;
margin: 0 16px 18px;
padding: 18px;
}
.career-job-search-settings-icon {
width: 58px;
height: 58px;
border-radius: 17px;
}
.career-job-search-settings-icon svg {
width: 28px;
height: 28px;
}
.career-job-search-settings-action {
min-width: 0;
grid-column: 2;
justify-self: start;
}
.career-job-row {
min-height: 164px;
align-items: start;
grid-template-columns: 64px minmax(0, 1fr);
gap: 18px;
padding: 20px 18px;
}
.career-job-icon {
width: 64px;
height: 64px;
border-radius: 17px;
}
.career-job-actions {
min-height: 0;
align-items: center;
grid-column: 2;
grid-template-columns: minmax(0, 1fr) auto;
justify-items: start;
gap: 12px;
}
.career-job-action-buttons {
justify-self: end;
}
.career-job-actions button,
.career-job-details-link {
min-width: 92px;
min-height: 44px;
padding-inline: 15px;
font-size: 13px;
}
.career-job-actions .career-linkedin-link {
width: 44px;
height: 44px;
}
.career-job-transparency {
margin: 0 16px 18px;
}
.career-dashboard-empty {
min-height: 440px;
padding: 12px 24px 38px;
}
.career-dashboard-empty > img {
width: min(96%, 560px);
max-height: 300px;
}
}
@media (max-width: 430px) {
.career-crm-metrics {
grid-template-columns: 1fr;
}
.career-metric-card {
min-height: 142px;
}
.career-job-search-settings {
grid-template-columns: 52px minmax(0, 1fr);
}
.career-job-search-settings-icon {
width: 52px;
height: 52px;
}
.career-job-search-settings-action {
grid-column: 2;
justify-content: center;
}
.career-mini-bars,
.career-mini-line {
height: 44px;
}
.career-attention-row {
margin-inline: 15px;
}
.career-card-heading h2 {
gap: 8px;
font-size: 19px;
}
.career-card-heading h2 > span {
min-width: 32px;
height: 32px;
padding-inline: 9px;
font-size: 12px;
}
.career-card-heading > .career-section-action {
min-height: 38px;
padding-inline: 11px;
}
.career-recent-row,
.career-job-row {
grid-template-columns: 54px minmax(0, 1fr);
gap: 14px;
margin: 0;
padding: 17px 15px;
}
.career-row-avatar,
.career-recent-row .career-image-icon,
.career-job-icon {
width: 54px;
height: 54px;
border-radius: 15px;
}
.career-row-avatar {
border-radius: 50%;
}
.career-recent-row strong,
.career-job-title-line > a {
font-size: 16px;
}
.career-activity-type,
.career-job-meta > span {
min-height: 30px;
padding: 6px 9px;
font-size: 11px;
}
.career-recent-meta,
.career-job-actions {
grid-column: 2;
}
.career-job-actions {
grid-template-columns: 1fr;
}
.career-job-action-buttons {
justify-self: start;
}
.career-job-actions > time {
font-size: 11px;
}
.career-attention-row > em {
display: none;
}
.career-card-heading {
padding-inline: 18px;
}
.career-tips-card {
min-height: 480px;
}
.career-tips-heading {
padding-inline: 18px;
}
.career-tip-stage {
min-height: 330px;
}
.career-tip-slide {
align-content: start;
grid-template-columns: 1fr;
padding: 6px 18px 12px;
}
.career-tip-visual {
width: 132px;
justify-self: center;
grid-row: 1;
}
.career-tip-copy {
grid-row: 2;
}
.career-tip-controls {
padding-inline: 18px;
}
.career-dashboard-empty {
min-height: 360px;
padding: 6px 18px 30px;
}
.career-dashboard-empty > img {
width: 100%;
max-height: 230px;
}
.career-dashboard-empty-copy {
gap: 8px;
}
.career-dashboard-empty-copy h3 {
font-size: 21px;
}
.career-dashboard-empty-copy p {
font-size: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.career-crm-card,
.career-crm-hero-strip::before,
.career-crm-hero-strip::after,
.career-mini-bars i,
.career-mini-line .career-chart-area,
.career-mini-line .career-chart-line,
.career-mini-line .career-chart-dot,
.career-metric-ring,
.career-tip-slide.is-active .career-tip-visual img {
animation: none;
transform: none;
}
.career-mini-line .career-chart-area,
.career-mini-line .career-chart-dot {
opacity: 1;
}
.career-mini-line .career-chart-line {
stroke-dashoffset: 0;
}
.career-metric-ring {
--career-ring-progress: var(--career-ring-target);
}
a.career-crm-card {
transition: none;
}
.career-tip-slide,
.career-tip-visual img,
.career-tip-controls button {
transition: none;
}
}
/* ── Activity enterprise surfaces ─────────────────────────────────────────
Keep the brand artwork, but let information hierarchy and status carry the
page. Activity uses one neutral canvas, one card treatment, and color only
where a state needs to be distinguished. */
.activity-board-card {
border: 0;
background: #f5f7f6;
box-shadow: none;
}
.activity-board-card .activity-content-area {
background: #f5f7f6;
}
.activity-operations-card {
gap: 0;
padding: 22px;
}
.activity-operations-head {
display: grid;
grid-template-columns: minmax(190px, auto) minmax(280px, 1fr) auto;
align-items: center;
gap: 26px;
}
.activity-current-state,
.activity-operations-title {
display: flex;
min-width: 0;
align-items: center;
gap: 14px;
}
.activity-current-state {
padding-right: 26px;
box-shadow: 1px 0 0 rgba(21, 47, 35, .11);
}
.activity-current-state h3,
.activity-operations-title h3 {
margin-top: 4px;
}
.activity-operations-updated {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
color: #67736d;
font-size: 12px;
font-weight: 720;
white-space: nowrap;
}
.activity-operations-updated svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.activity-operations-message {
min-height: 20px;
margin-top: 16px;
color: #5e6a64;
font-size: 12.5px;
line-height: 1.45;
}
.activity-operations-message strong,
.activity-operations-message span {
display: block;
}
.activity-operations-message strong {
color: #53615a;
font-weight: 750;
}
.activity-operations-message span {
margin-top: 3px;
color: #7a847f;
}
.activity-operations-card .queue-stat-grid {
gap: 12px;
margin-top: 18px;
}
.activity-operations-card .queue-stat {
min-height: 86px;
padding: 14px 16px;
border-radius: 15px;
}
.activity-operations-card .queue-stat:nth-child(1) {
background: #f4f8fc;
}
.activity-operations-card .queue-stat:nth-child(2) {
background: #fff9ee;
}
.activity-operations-card .queue-stat:nth-child(3) {
background: #f3f8f3;
}
.activity-operations-card .queue-stat:nth-child(4) {
background: #fff5f5;
}
.activity-operations-card .queue-detail-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin-top: 14px;
padding: 10px 8px;
border-radius: 15px;
background: #fff;
box-shadow: inset 0 0 0 1px rgba(21, 47, 35, .1);
}
.activity-operations-card .queue-detail,
.activity-operations-card .queue-detail:first-child {
min-height: 88px;
padding: 12px 18px;
background: transparent;
border-radius: 0;
}
.activity-operations-card .queue-detail + .queue-detail {
box-shadow: -1px 0 0 rgba(21, 47, 35, .1);
}
.activity-operations-card .queue-detail:hover,
.activity-operations-card .queue-detail:first-child:hover {
background: #f8faf9;
}
.activity-operations-card .queue-runtime-detail strong {
font-size: 17px;
font-variant-numeric: tabular-nums;
}
.activity-operations-card .queue-runtime-detail small,
.activity-operations-card .queue-detail:last-child small {
display: flex;
align-items: center;
gap: 8px;
}
.activity-operations-card .queue-runtime-detail small::before,
.activity-operations-card .queue-detail:last-child small::before {
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: #18a86b;
content: "";
}
.activity-board-card .workspace-page-header-icon,
.activity-board-card .workspace-page-header .page-campaign-label {
border: 0;
}
.activity-board-card .workspace-page-header:hover .workspace-page-header-icon {
transform: none;
}
.activity-title-with-icon,
.activity-section-title {
display: flex;
min-width: 0;
align-items: center;
gap: 12px;
}
.activity-page-heading-icon,
.activity-heading-3d-icon {
display: block;
flex: 0 0 auto;
object-fit: cover;
border: 0;
background: #fff;
box-shadow: 0 5px 16px rgba(18, 36, 28, .065);
}
.activity-page-heading-icon {
width: 54px;
height: 54px;
border-radius: 17px;
}
.activity-heading-3d-icon {
width: 46px;
height: 46px;
border-radius: 14px;
}
.activity-command-card:hover .activity-page-heading-icon,
.activity-state-card:hover .activity-heading-3d-icon,
.activity-queue-card:hover .activity-heading-3d-icon,
.activity-list-card:hover .activity-heading-3d-icon,
.activity-attention-card:hover .career-heading-3d-icon,
.activity-drawer-panel:hover .activity-heading-3d-icon {
transform: none;
}
.activity-state-card,
.activity-queue-card,
.activity-list-card {
--activity-accent: #176b49;
--activity-accent-soft: #f1f5f3;
--activity-accent-line: #cdd8d2;
position: relative;
overflow: hidden;
border: 0;
border-radius: 16px;
background: #fff;
box-shadow: 0 8px 24px rgba(18, 36, 28, .05);
animation: none;
}
.activity-state-card,
.activity-state-card.state-error,
.activity-queue-card,
.activity-events-card,
.activity-tasks-card,
.activity-actions-card {
background: #fff;
}
.activity-state-card::after,
.activity-queue-card::after,
.activity-list-card::after {
display: none;
content: none;
}
.activity-list-card .panel-head h3::before {
display: none;
}
.activity-section-title > div {
min-width: 0;
}
.activity-section-title .eyebrow {
margin-bottom: 3px;
}
.activity-state-summary {
max-width: 62ch;
margin-top: 18px;
}
.activity-state-summary p {
margin: 0;
color: #53655b;
font-size: 13px;
font-weight: 700;
line-height: 1.55;
text-wrap: pretty;
}
.activity-state-card .activity-fact-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.activity-image-icon {
overflow: hidden;
border: 0 !important;
background: #fff !important;
box-shadow: 0 4px 14px rgba(18, 36, 28, .06) !important;
}
.activity-image-icon img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.04);
transition: none;
}
.activity-fact:hover .activity-image-icon img,
.queue-stat:hover .activity-image-icon img,
.queue-detail:hover .activity-image-icon img,
.schedule-item:hover .activity-image-icon img,
.activity-event:hover .activity-image-icon img,
.activity-task:hover .activity-image-icon img,
.activity-action:hover .activity-image-icon img,
.drawer-row:hover .activity-image-icon img,
.drawer-list-row:hover .activity-image-icon img {
transform: scale(1.04);
}
.activity-fact {
grid-template-columns: 44px minmax(0, 1fr);
min-height: 76px;
border: 0;
background: #f5f7f6;
box-shadow: none;
transition: background .16s ease;
}
.activity-fact:hover,
.queue-stat:hover,
.queue-detail:hover {
background: #eef2f0;
box-shadow: none;
transform: none;
}
.activity-fact .activity-image-icon {
width: 44px;
height: 44px;
flex-basis: 44px;
border-radius: 13px;
}
.queue-stat {
grid-template-columns: 44px minmax(0, 1fr);
min-height: 78px;
border: 0;
background: #f5f7f6;
box-shadow: none;
transition: background .16s ease;
}
.queue-stat .activity-image-icon,
.queue-detail .activity-image-icon {
width: 44px;
height: 44px;
flex-basis: 44px;
border-radius: 13px;
}
.queue-detail {
grid-template-columns: 44px minmax(0, 1fr);
border: 0;
background: #f5f7f6;
box-shadow: none;
transition: background .16s ease;
}
.queue-detail:first-child {
background: #f5f7f6;
}
.now-card,
.now-error,
.now-warning,
.now-neutral,
.now-info,
.now-active {
border: 0;
background: #f5f7f6;
}
.activity-attention-card {
overflow: hidden;
border: 0;
background: #fff;
box-shadow: 0 8px 24px rgba(18, 36, 28, .05);
}
.activity-attention-card .career-card-heading {
min-height: 78px;
}
.activity-attention-card .career-attention-row {
border: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 12px;
background: #f5f7f6;
transition: background .16s ease;
}
.activity-attention-card .career-attention-row:hover {
background: #eef2f0;
transform: none;
}
.activity-attention-card .career-attention-list {
gap: 8px;
padding: 0 18px 18px;
border: 0;
}
.activity-attention-card .career-attention-row:nth-child(odd) {
border-right: 0;
}
.activity-timeline {
grid-auto-rows: max-content;
max-height: 430px;
gap: 12px;
}
.activity-task-list,
.activity-action-list {
max-height: 430px;
}
.activity-event {
grid-template-columns: 48px minmax(0, 1fr);
min-height: 0;
align-items: start;
padding: 14px;
border: 0;
background: #f5f7f6;
box-shadow: none;
transition: background .16s ease;
}
.activity-event.event-success,
.activity-event.event-warning,
.activity-event.event-error {
background: #f5f7f6;
}
.activity-event:hover,
.activity-task:hover,
.activity-action:hover {
background: #eef2f0;
box-shadow: none;
transform: none;
}
.activity-event > .activity-image-icon {
width: 48px;
height: 48px;
margin: 2px 0 0;
border-radius: 14px;
}
.activity-event > div {
display: grid;
min-width: 0;
align-content: start;
gap: 5px;
}
.activity-event p,
.activity-event small {
margin: 0;
line-height: 1.45;
}
.activity-task,
.activity-action {
grid-template-columns: 46px minmax(0, 1fr) auto;
min-height: 70px;
border: 0;
background: #f5f7f6;
box-shadow: none;
transition: background .16s ease;
}
.activity-action,
.activity-task.status-completed {
background: #f5f7f6;
}
.activity-task.status-failed,
.activity-task.status-running {
background: #f5f7f6;
}
.activity-task .activity-image-icon,
.activity-action .activity-image-icon {
width: 46px;
height: 46px;
flex-basis: 46px;
border-radius: 14px;
}
.schedule-item {
grid-template-columns: 40px minmax(0, 1fr) minmax(70px, auto);
border: 0;
background: #f5f7f6;
box-shadow: none;
}
.schedule-item .activity-image-icon {
width: 40px;
height: 40px;
flex-basis: 40px;
border-radius: 12px;
}
.drawer-row,
.drawer-list-row {
min-height: 78px;
padding: 12px;
border: 0;
border-radius: 15px;
background: #f5f7f6;
box-shadow: none;
}
.drawer-feed,
.drawer-list {
gap: 10px;
}
.drawer-row {
grid-template-columns: 48px minmax(0, 1fr);
}
.drawer-row > .activity-image-icon,
.drawer-list-row > .activity-image-icon {
width: 48px;
height: 48px;
margin: 0;
border-radius: 14px;
}
.drawer-row.event-success,
.drawer-list-row.status-completed {
background: #f5f7f6;
}
.drawer-row.event-warning {
background: #f5f7f6;
}
.drawer-row.event-error,
.drawer-list-row.status-failed {
background: #f5f7f6;
}
.activity-card-footer a {
border: 0;
border-radius: 9px;
background: #eef2f0;
box-shadow: none;
}
.activity-card-footer a:hover {
background: #e5ebe7;
}
.activity-upcoming-card .activity-schedule-list {
max-height: 430px;
}
.activity-card-empty {
display: flex;
min-height: 440px;
flex: 1;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 18px;
padding: 24px;
text-align: center;
}
.activity-card-empty-illustration {
display: block;
width: min(100%, 380px);
height: auto;
mix-blend-mode: multiply;
}
.activity-upcoming-empty-calendar {
width: min(100%, 360px);
}
.activity-upcoming-empty-status {
display: inline-flex;
min-height: 31px;
align-items: center;
justify-content: center;
padding: 0 17px;
border-radius: 999px;
background: #dff3e7;
color: #198455;
font-size: 11px;
font-weight: 850;
}
.activity-card-empty-copy,
.activity-upcoming-empty-copy {
display: grid;
gap: 7px;
justify-items: center;
}
.activity-card-empty h4 {
margin: 0;
color: var(--ink);
font-size: clamp(19px, 1.35vw, 23px);
font-weight: 850;
letter-spacing: -.035em;
line-height: 1.1;
}
.activity-card-empty p {
max-width: 32ch;
margin: 0;
color: #66746d;
font-size: 13.5px;
font-weight: 560;
line-height: 1.5;
text-wrap: pretty;
}
@media (max-width: 620px) {
.activity-card-empty {
min-height: 360px;
padding: 18px;
}
.activity-card-empty-illustration {
width: min(100%, 320px);
}
}
.activity-board-grid {
align-items: stretch;
}
.activity-list-card {
width: 100%;
align-self: stretch;
}
.activity-board-column {
display: contents;
}
.activity-timeline,
.activity-schedule-list,
.activity-task-list,
.activity-action-list {
max-height: none;
overflow-y: visible;
}
.activity-events-card {
order: 1;
}
.activity-tasks-card {
order: 2;
}
.activity-actions-card {
order: 3;
}
.activity-upcoming-card {
order: 4;
}
@media (min-width: 1701px) {
.activity-list-card > :is(
.activity-timeline,
.activity-schedule-list,
.activity-task-list,
.activity-action-list
) {
display: grid;
min-height: 0;
flex: 1;
grid-template-rows: repeat(5, minmax(0, 1fr));
align-content: stretch;
}
.activity-list-card :is(
.activity-event,
.schedule-item,
.activity-task,
.activity-action
) {
height: 100%;
}
.activity-event p {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
@media (max-width: 1700px) {
.activity-board-grid {
align-items: start;
}
.activity-board-column {
display: grid;
min-width: 0;
align-content: start;
gap: 18px;
}
.activity-list-card {
align-self: start;
}
.activity-card-footer {
margin-top: 16px;
}
}
@media (max-width: 1050px) {
.activity-board-column {
display: contents;
}
}
.activity-dashboard .range-menu summary {
border: 0;
background: #eef2f0;
}
.activity-dashboard .range-menu[open] summary,
.activity-dashboard .range-menu summary:hover {
border: 0;
background: #e5ebe7;
box-shadow: none;
}
.activity-dashboard .range-menu div {
border: 0;
}
.activity-dashboard .activity-chip {
border: 0;
background: #eef2f0;
}
.activity-dashboard .activity-schedule-preview {
border-top: 0;
}
.activity-dashboard .error-box {
border: 0;
}
.activity-dashboard .activity-drawer-panel {
border: 0;
}
.activity-dashboard .activity-drawer-panel header > a {
border: 0;
background: #eef2f0;
}
@keyframes activityCardReveal {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
@media (max-width: 1180px) {
.activity-operations-card .queue-detail-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.activity-operations-card .queue-detail:nth-child(3) {
box-shadow: none;
}
.activity-operations-card .queue-detail:nth-child(n + 3) {
border-top: 1px solid rgba(21, 47, 35, .1);
}
}
@media (max-width: 760px) {
.activity-operations-head {
grid-template-columns: 1fr;
gap: 14px;
}
.activity-operations-updated {
justify-content: flex-start;
}
.activity-current-state {
padding-right: 0;
padding-bottom: 14px;
box-shadow: 0 1px 0 rgba(21, 47, 35, .1);
}
.activity-operations-card .queue-stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.activity-operations-card .queue-stat-grid,
.activity-operations-card .queue-detail-grid {
grid-template-columns: 1fr;
}
.activity-operations-card .queue-detail + .queue-detail,
.activity-operations-card .queue-detail:nth-child(3) {
border-top: 1px solid rgba(21, 47, 35, .1);
box-shadow: none;
}
.activity-operations-card {
padding: 18px;
}
.activity-page-heading-icon {
width: 46px;
height: 46px;
border-radius: 14px;
}
.activity-heading-3d-icon {
width: 42px;
height: 42px;
}
.activity-state-card .activity-fact-grid {
grid-template-columns: 1fr;
}
.activity-task,
.activity-action {
grid-template-columns: 46px minmax(0, 1fr);
}
}
@media (prefers-reduced-motion: reduce) {
.activity-state-card,
.activity-queue-card,
.activity-list-card {
animation: none;
}
.activity-page-heading-icon,
.activity-heading-3d-icon,
.activity-image-icon img,
.activity-fact,
.queue-stat,
.queue-detail,
.activity-event,
.activity-task,
.activity-action {
transition: none;
}
}
/* Final semantic overrides live after the dashboard density rules. */
.career-job-search-settings-action {
background: #111c17;
color: #fff;
box-shadow: none;
}
.career-job-search-settings:hover .career-job-search-settings-action {
background: #020705;
color: #fff;
}
.career-job-actions button {
background: var(--linkedin-blue);
color: #fff;
box-shadow: none;
}
.career-job-actions button:hover {
background: var(--linkedin-blue-dark);
color: #fff;
box-shadow: none;
}
.career-job-actions button:focus-visible {
outline-color: rgba(10, 102, 194, .24);
}
.career-job-meta > .career-job-source {
background: var(--linkedin-blue-soft);
color: var(--linkedin-blue);
}
.career-job-meta > .career-job-recorded {
background: var(--career-applied-soft);
color: var(--career-applied-dark);
}
/* LinkedIn is a stroked mark in the shared sprite. Without an explicit fill
reset, its rounded rectangle falls back to the browser's black SVG fill. */
.career-opportunity-workspace .career-linkedin-action svg,
.career-opportunity-workspace .career-linkedin-text-link svg {
width: 19px;
height: 19px;
flex: 0 0 19px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Flat interaction policy ----------------------------------------------------
The authenticated product uses solid semantic colors only. Buttons and
navigation controls never use gradients, glow effects, or lifted shadows. */
body.saas-app-page button,
body.saas-app-page input[type="button"],
body.saas-app-page input[type="submit"],
body.saas-app-page input[type="reset"],
body.saas-app-page .button,
body.saas-app-page [role="button"],
body.saas-app-page a[class*="-button"],
body.saas-app-page a[class*="-action"] {
background-image: none !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
}
body.saas-app-page :is(
.button-primary:not(.topbar-command),
.campaign-card-edit,
.launch-btn,
.ui-btn-primary,
.billing-action-button.is-primary,
.billing-market-btn.is-primary,
.support-primary-action,
.pricing-page-button.is-primary,
.career-primary-action:not(.is-linkedin-action),
.opportunity-create-actions > button,
.review-approve-action,
.review-workspace-empty button,
.career-kipdo-action,
.career-opportunity-stage-control button
) {
border-color: #087a48 !important;
background-color: #087a48 !important;
color: #fff !important;
}
body.saas-app-page :is(
.button-primary:not(.topbar-command),
.campaign-card-edit,
.launch-btn,
.ui-btn-primary,
.billing-action-button.is-primary,
.billing-market-btn.is-primary,
.support-primary-action,
.pricing-page-button.is-primary,
.career-primary-action:not(.is-linkedin-action),
.opportunity-create-actions > button,
.review-approve-action,
.review-workspace-empty button,
.career-kipdo-action,
.career-opportunity-stage-control button
):hover {
border-color: #06663d !important;
background-color: #06663d !important;
color: #fff !important;
}
body.saas-app-page :is(
.career-primary-action.is-linkedin-action,
.career-linkedin-action,
.career-job-actions button
) {
border-color: var(--linkedin-blue) !important;
background-color: var(--linkedin-blue) !important;
color: #fff !important;
}
body.saas-app-page :is(
.career-primary-action.is-linkedin-action,
.career-linkedin-action,
.career-job-actions button
):hover {
border-color: var(--linkedin-blue-dark) !important;
background-color: var(--linkedin-blue-dark) !important;
}
body.saas-app-page .career-applied-action {
border-color: var(--career-applied) !important;
background-color: var(--career-applied) !important;
color: #fff !important;
}
body.saas-app-page .career-applied-action:hover {
border-color: var(--career-applied-dark) !important;
background-color: var(--career-applied-dark) !important;
}
body.saas-app-page :is(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
[role="button"],
a[class*="-button"],
a[class*="-action"]
):focus-visible {
outline: 2px solid rgba(8, 122, 72, .45) !important;
outline-offset: 2px;
}
body.saas-app-page :is(
.career-primary-action.is-linkedin-action,
.career-linkedin-action,
.career-job-actions button
):focus-visible {
outline-color: rgba(10, 102, 194, .55) !important;
}
body.saas-app-page .sidebar,
body.saas-app-page .sidebar.is-open,
body.saas-app-page .sidebar-collapse {
box-shadow: none !important;
}
body.saas-app-page .primary-nav a.is-active,
body.saas-app-page .sidebar-bottom > a.is-active,
body.saas-app-page .sidebar .nav-link.is-active,
body.saas-app-page .ui-nav-item.is-active {
background: #0f1a16 !important;
color: #fff !important;
box-shadow: none !important;
}
/* Final top-navigation priorities.
These intentionally live last: legacy command styles above must not turn
the primary agent action back into an outlined text control. */
.topnav .topbar-command.button-primary {
min-width: 220px;
border: 1px solid #079357 !important;
border-radius: 7px;
background: #079357 !important;
background-color: #079357 !important;
color: #fff !important;
box-shadow: none !important;
}
.topnav .topbar-command.button-primary:hover {
border-color: #087a48 !important;
background: #087a48 !important;
background-color: #087a48 !important;
color: #fff !important;
}
.topnav .topbar-command.topbar-command-offline {
display: inline-flex;
align-items: center;
gap: 10px;
height: 44px;
min-height: 44px;
min-width: 0;
padding: 0 16px;
border: 1px solid #cf4d5e !important;
border-radius: 12px;
background: #fff !important;
color: #cf4d5e !important;
font-size: 13.5px;
font-weight: 760;
box-shadow: none !important;
text-decoration: none;
transition: background-color .18s ease, border-color .18s ease;
}
.topnav .topbar-command.topbar-command-offline svg {
width: 17px;
height: 17px;
flex-shrink: 0;
stroke: #cf4d5e !important;
stroke-width: 2.2;
}
.topnav .topbar-command.topbar-command-offline:hover {
border-color: #b33949 !important;
background: #fdf5f6 !important;
color: #b33949 !important;
}
.topnav .topbar-command.topbar-command-offline:hover svg {
stroke: #b33949 !important;
}
.career-automation-start.is-recovery {
border-color: #e5b4bb;
background: #fff;
color: #cf4d5e;
}
.career-automation-start.is-recovery:hover {
border-color: #cf4d5e;
background: #fdf5f6;
color: #b33949;
}
.career-automation-start.is-recovery svg {
stroke: currentColor;
}
.topnav .topnav-actions {
margin-left: 20px;
}
.topnav .coach-trigger,
.topnav .topnav-help-btn {
width: 62px;
min-width: 62px;
height: 52px;
border: 0;
border-radius: 0;
background: transparent;
}
.topnav .topnav-actions > .topnav-help-btn,
.topnav .topnav-actions > .topnav-user-menu {
border-left: 1px solid #dfe5e1;
}
.topnav .topnav-user-menu > summary {
padding-left: 24px;
}
.topnav .topnav-menu-help {
display: flex;
}
/* HTMX can preserve the existing top navigation while swapping page content.
Hide the retired standalone help control even when that older DOM survives. */
.topnav .topnav-help-btn {
display: none !important;
}
.topnav-agent > .goal-context-menu:first-child {
margin-left: 0;
padding-left: 0;
border-left: 0;
}
.topnav .goal-context-menu {
height: 44px;
min-width: 0;
}
.topnav .goal-context-menu > summary {
display: grid;
width: max-content;
height: 44px;
min-width: min(430px, 100%);
max-width: min(500px, calc(100vw - 560px));
grid-template-columns: auto max-content minmax(140px, 1fr) auto;
gap: 12px;
padding-inline: 14px 16px;
border-color: #11824d;
border-radius: 12px;
}
.topnav .goal-context-menu > summary span,
.topnav .goal-context-menu > summary strong {
min-width: 0;
}
.topnav .goal-context-menu > summary span {
white-space: nowrap;
}
.topnav .goal-context-menu > summary strong {
max-width: none;
overflow: visible;
text-overflow: clip;
}
.topnav .goal-context-menu > summary .goal-context-icon {
display: inline-grid;
width: 30px;
height: 30px;
place-items: center;
overflow: hidden;
border-radius: 999px;
background: #eaf6ef;
color: #087a48;
}
.topnav .goal-context-menu > summary .goal-context-icon svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
.topnav .goal-context-pop {
left: 50%;
top: calc(100% + 10px);
width: min(560px, calc(100vw - 96px));
min-width: 0;
padding: 14px;
border-color: #dfe7e2;
border-radius: 16px;
box-shadow: 0 18px 48px rgba(16, 31, 24, .14);
transform: translateX(-50%);
}
.topnav .goal-context-pop-head {
display: grid;
grid-template-columns: auto minmax(145px, 1fr) max-content;
align-items: center;
gap: 12px;
min-height: 54px;
padding: 10px 14px;
border-radius: 12px;
background: linear-gradient(90deg, #edf7f2 0%, #f4faf7 100%);
}
.topnav .goal-context-pop-head-icon {
display: inline-grid;
width: 28px;
height: 28px;
place-items: center;
overflow: hidden;
border-radius: 999px;
background: #eaf6ef;
color: #087a48;
}
.topnav .goal-context-pop-head-icon svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
.topnav .goal-context-pop-head b,
.topnav .goal-context-row b {
color: var(--green-dark);
font-size: 14px;
font-weight: 920;
letter-spacing: .02em;
line-height: 1.12;
text-transform: uppercase;
}
.topnav .goal-context-pop-head strong {
justify-self: end;
min-width: 0;
max-width: 100%;
overflow: hidden;
color: #13251c;
font-size: 15px;
font-weight: 860;
text-overflow: ellipsis;
white-space: nowrap;
}
.topnav .goal-context-list {
margin-top: 12px;
overflow: hidden;
border: 1px solid #e0e7e3;
border-radius: 15px;
background: #fff;
}
.topnav .goal-context-pop form {
display: flex;
width: 100%;
min-height: 58px;
align-items: stretch;
margin: 0;
}
.topnav .goal-context-row {
display: grid;
width: 100%;
box-sizing: border-box;
grid-template-columns: minmax(145px, .86fr) minmax(0, 1fr) auto;
min-height: 58px;
align-items: center;
gap: 12px;
padding: 12px 18px;
border: 0;
border-radius: 0;
appearance: none;
font: inherit;
text-align: left;
}
.topnav .goal-context-list .goal-context-row + .goal-context-row,
.topnav .goal-context-list form + form .goal-context-row,
.topnav .goal-context-list .goal-context-row + form .goal-context-row,
.topnav .goal-context-list form + .goal-context-row {
border-top: 1px solid #eef2ef;
}
.topnav .goal-context-row:hover {
background: #f4faf7;
}
.topnav .goal-context-row.is-active {
position: relative;
background: linear-gradient(90deg, #eef9f3 0%, #f7fcf9 100%);
box-shadow: inset 4px 0 0 #09874f;
}
.topnav .goal-context-row.is-coming-soon,
.topnav .goal-context-row.is-coming-soon:hover {
background: #f7f9f8;
box-shadow: none;
cursor: not-allowed;
}
.topnav .goal-context-row small {
min-width: 0;
max-width: 100%;
overflow: hidden;
color: #1c2b23;
font-size: 14px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.topnav .goal-context-active-check {
display: inline-grid;
width: 34px;
height: 34px;
place-items: center;
justify-self: end;
border-radius: 999px;
background: #d9f2e5;
color: #087a48;
}
.topnav .goal-context-active-check svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 2.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.topnav .goal-context-new {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
min-height: 52px;
align-items: center;
gap: 12px;
margin-top: 14px;
padding: 10px 16px;
border: 1px solid #e5ece8;
border-radius: 14px;
background: #fff;
color: var(--green-dark);
font-size: 14px;
font-weight: 880;
}
.topnav .goal-context-new::before {
content: "+";
display: inline-grid;
width: 32px;
height: 32px;
place-items: center;
border-radius: 999px;
background: #dff3e8;
font-size: 23px;
font-weight: 520;
line-height: 1;
}
.topnav .goal-context-new::after {
content: "›";
justify-self: end;
font-size: 26px;
font-weight: 700;
line-height: 1;
}
@media (min-width: 1101px) {
.topnav .topnav-inner {
display: grid;
grid-template-columns: max-content minmax(360px, 1fr) max-content;
align-items: center;
}
.topnav .topnav-brand {
grid-column: 1;
justify-self: start;
}
.topnav .topnav-agent {
grid-column: 2;
justify-self: center;
margin-left: 0;
min-width: 0;
max-width: 100%;
}
.topnav .topnav-actions {
grid-column: 3;
justify-self: end;
}
}
@media (max-width: 1320px) and (min-width: 641px) {
.topnav .goal-context-menu > summary {
min-width: min(380px, 100%);
max-width: min(460px, calc(100vw - 560px));
}
.topnav .goal-context-menu > summary strong {
max-width: none;
}
}
@media (max-width: 1100px) and (min-width: 641px) {
.topnav .goal-context-menu > summary {
width: 100%;
min-width: 0;
max-width: none;
}
.topnav .goal-context-menu > summary strong {
max-width: none;
}
.topnav .goal-context-pop {
width: min(560px, calc(100vw - 56px));
}
}
@media (max-width: 1100px) {
.topnav .topnav-actions {
margin-left: 0;
}
.topnav .coach-trigger {
width: 38px;
min-width: 38px;
height: 38px;
}
.topnav .topnav-actions > .topnav-help-btn,
.topnav .topnav-actions > .topnav-user-menu {
border-left: 0;
}
.topnav .topnav-user-menu > summary {
padding-left: 0;
}
}
/* Phone header -------------------------------------------------------------
The desktop command bar has five separate information groups. On a phone,
preserve those actions but remove duplicated words: the mascot carries the
brand, the goal selector carries only the goal, and the account carries only
the verified avatar. This keeps every control at a real touch target without
squeezing labels or allowing the header to overflow. */
@media (max-width: 640px) {
.topnav,
body.nav-collapsed .topnav {
height: 62px;
}
.topnav .topnav-inner,
body.nav-collapsed .topnav-inner {
grid-template-columns: 40px 136px minmax(0, 1fr) 38px 42px;
gap: 6px;
padding: 0 10px;
}
.topnav .topnav-burger {
width: 40px;
height: 40px;
}
.topnav .topnav-brand {
width: 136px;
height: 40px;
justify-content: flex-start;
}
.topnav .topnav-brand .brand-mascot {
width: 32px;
height: 32px;
border-radius: 9px;
}
.topnav .topnav-brand .brand-wordmark {
width: auto;
height: 25px;
max-width: 94px;
}
.topnav .topnav-brand span {
display: none;
}
.topnav .goal-context-menu,
.topnav .goal-context-menu > summary {
width: 100%;
max-width: none;
}
.topnav .goal-context-menu {
height: 40px;
margin-left: 0;
padding-left: 0;
border-left: 0;
}
.topnav .goal-context-menu > summary {
height: 40px;
grid-template-columns: auto minmax(0, 1fr);
justify-content: center;
gap: 7px;
padding: 0 9px;
border-radius: 9px;
}
.topnav .goal-context-menu > summary span {
min-width: 0;
max-width: 100%;
overflow: hidden;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.topnav .goal-context-menu > summary strong,
.topnav .goal-context-menu > summary .goal-context-caret {
display: none;
}
.topnav .goal-context-menu > summary .goal-context-icon {
width: 18px;
height: 18px;
}
.topnav .goal-context-pop {
position: fixed;
top: 70px;
right: 10px;
left: 10px;
width: auto;
min-width: 0;
max-width: none;
padding: 16px;
transform: none;
}
.topnav .goal-context-pop-head,
.topnav .goal-context-row {
grid-template-columns: minmax(0, 1fr) auto;
}
.topnav .goal-context-pop-head-icon {
display: none;
}
.topnav .goal-context-pop-head b,
.topnav .goal-context-row b {
font-size: 14px;
}
.topnav .goal-context-pop-head strong,
.topnav .goal-context-row small {
font-size: 14px;
}
.topnav .goal-context-row {
min-height: 64px;
padding: 14px 16px;
}
.topnav .goal-context-pop form {
min-height: 64px;
}
.topnav .goal-context-row b {
grid-column: 1;
}
.topnav .goal-context-row small {
grid-column: 1;
}
.topnav .goal-context-active-check {
width: 34px;
height: 34px;
grid-column: 2;
grid-row: 1 / span 2;
}
.topnav .goal-context-new {
min-height: 56px;
padding: 12px 16px;
font-size: 15px;
}
.topnav .topnav-actions {
grid-template-columns: 38px 42px;
gap: 6px;
}
.topnav .coach-trigger,
.topnav .topnav-icon-btn {
width: 38px;
min-width: 38px;
height: 40px;
}
.topnav .topnav-user-menu > summary {
width: 42px;
min-height: 42px;
justify-content: center;
}
.topnav .topnav-avatar {
width: 40px;
height: 40px;
}
.topnav .topnav-user-caret {
right: -2px;
bottom: -1px;
}
.sidebar {
inset-block-start: 62px;
}
}
/* Campaign actions use the current flat control geometry.
Keep this final and scoped so the legacy shared pill rule cannot reshape
campaign header or confirmation-dialog actions. */
.app-body .campaign-action-button {
min-height: 42px !important;
padding-inline: 16px !important;
border-radius: 8px !important;
background-image: none !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
}
.app-body .campaign-action-button:hover,
.app-body .campaign-action-button:focus-visible,
.app-body .campaign-action-button:active {
background-image: none !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
}
/* Career Library stays inside Campaign as a wide, task-focused drawer.
The underlying profile remains workspace-scoped and reusable. */
.campaign-career-library-drawer .campaign-drawer-panel {
width: min(900px, 100%);
}
.campaign-career-library-body {
gap: 24px;
padding: 24px 28px 30px;
}
.campaign-career-resume {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .62fr);
gap: 20px;
align-items: center;
padding: 18px;
border-radius: 16px;
background: #f3f7f5;
}
.campaign-career-resume__copy {
display: grid;
min-width: 0;
gap: 5px;
}
.campaign-career-resume__copy > span {
color: var(--green);
font-size: 11px;
font-weight: 900;
letter-spacing: .12em;
}
.campaign-career-resume__copy > strong {
color: var(--ink);
font-size: 17px;
letter-spacing: -.02em;
}
.campaign-career-resume__copy > p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.campaign-career-resume__form {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
align-items: start;
}
.campaign-career-file-picker {
position: relative;
display: flex !important;
min-width: 0;
min-height: 48px;
align-items: center;
gap: 10px;
overflow: hidden;
padding: 0 14px;
border: 1px solid #dce6e0;
border-radius: 10px;
background: #fff;
cursor: pointer;
}
.campaign-career-file-picker__label {
overflow: hidden;
color: var(--ink);
font-size: 13px;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.campaign-career-file-picker input[type="file"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.campaign-career-resume__form.is-importing .campaign-career-file-picker {
border-color: rgba(20, 148, 99, .3);
background: #f8fcfa;
pointer-events: none;
}
.campaign-career-resume__form > .field-error {
grid-column: 1 / -1;
}
.campaign-resume-upload-error {
margin-top: -2px;
}
.campaign-career-library-form {
display: grid;
min-width: 0;
gap: 20px;
}
.campaign-career-library-actions {
position: sticky;
bottom: 0;
z-index: 3;
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 16px 0 2px;
background: #fff;
}
.campaign-career-library-actions > .button {
min-height: 44px;
margin: 0;
}
.campaign-resume-review {
gap: 18px;
}
.campaign-resume-review__notice {
display: grid;
gap: 5px;
padding: 15px 17px;
border: 1px solid #dce9e1;
border-radius: 14px;
background: #f4f9f6;
}
.campaign-resume-review__notice > span {
color: var(--green);
font-size: 10.5px;
font-weight: 900;
letter-spacing: .1em;
}
.campaign-resume-review__notice > p {
margin: 0;
color: #53645c;
font-size: 13px;
line-height: 1.5;
}
.campaign-resume-review__form {
gap: 16px;
}
.campaign-resume-review .career-project-card {
padding: 18px;
border: 1px solid #e1e9e4;
background: #fff;
}
.campaign-resume-review .career-project-card:hover {
background: #fff;
}
.campaign-resume-review .career-project-card header {
margin-bottom: 16px;
}
.campaign-resume-review .campaign-career-library-actions {
margin-top: 2px;
}
@media (max-width: 720px) {
.campaign-career-library-drawer .campaign-drawer-panel {
width: 100%;
}
.campaign-career-library-body {
padding: 18px;
}
.campaign-career-resume,
.campaign-career-resume__form {
grid-template-columns: minmax(0, 1fr);
}
.campaign-career-library-actions {
flex-direction: column-reverse;
}
.campaign-career-library-actions > .button {
width: 100%;
}
}