:root {
  --ink: #14233a;
  --muted: #66758a;
  --muted-light: #8d99aa;
  --blue: #356df3;
  --blue-dark: #2556c9;
  --blue-soft: #edf3ff;
  --surface: #f5f7fb;
  --surface-strong: #edf1f7;
  --line: #e1e6ef;
  --white: #fff;
  --danger: #dc3f4d;
  --danger-soft: #fff0f2;
  --success: #159467;
  --success-soft: #eaf8f2;
  --warning: #d77a13;
  --warning-soft: #fff6e7;
  --sidebar: 248px;
  --shadow: 0 18px 55px rgba(31, 54, 88, .09);
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; color: var(--ink); background: var(--surface); font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgba(53, 109, 243, .26); outline-offset: 2px; }
.crm-icon { width: 19px; height: 19px; flex: 0 0 auto; }

/* Application shell */
.crm-app { min-height: 100vh; }
.crm-sidebar { position: fixed; z-index: 40; display: flex; width: var(--sidebar); inset: 0 auto 0 0; flex-direction: column; padding: 22px 14px 16px; color: #d9e1ef; background: #14233a; }
.crm-brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.crm-sidebar > .crm-brand { margin: 0 7px 31px; color: white; }
.crm-brand__mark { display: block; width: 42px; height: 42px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 9px 13px rgba(53, 109, 243, .3)); }
.crm-brand > span:last-child { display: flex; min-width: 0; flex-direction: column; line-height: 1.08; }
.crm-brand strong { font-size: 17px; letter-spacing: -.02em; }.crm-brand small { margin-top: 4px; color: #93a2b8; font-size: 10px; }
.sidebar-section + .sidebar-section { margin-top: 27px; }
.sidebar-label { display: block; margin: 0 12px 9px; color: #73839b; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.crm-nav { display: grid; gap: 4px; }
.crm-nav a, .site-link { display: flex; min-height: 44px; align-items: center; gap: 11px; padding: 10px 12px; color: #9eacc0; border-radius: 11px; text-decoration: none; font-weight: 650; transition: color .18s, background .18s; }
.crm-nav a:hover, .crm-nav a.is-active, .site-link:hover { color: white; background: rgba(255,255,255,.09); }
.crm-nav a.is-active { box-shadow: inset 3px 0 var(--blue); }
.crm-nav a span, .site-link span { min-width: 0; flex: 1; }
.crm-nav b { display: grid; min-width: 23px; height: 22px; place-items: center; padding-inline: 5px; color: #d9e5ff; background: rgba(53,109,243,.28); border-radius: 8px; font-size: 10px; }
.crm-nav b.is-danger { color: #ffdfe3; background: rgba(220,63,77,.25); }
.sidebar-footer { display: grid; margin-top: auto; gap: 11px; }
.site-link { min-height: 40px; font-size: 12px; }
.crm-user { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 12px 10px; background: rgba(255,255,255,.06); border-radius: 13px; }
.user-avatar, .candidate-avatar { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; color: white; background: linear-gradient(145deg, var(--blue), #6a8ff7); border-radius: 11px; font-size: 11px; font-weight: 850; }
.crm-user__name { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.crm-user__name strong { overflow: hidden; color: white; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.crm-user__name small { color: #8fa0b8; font-size: 9px; }
.logout-button { display: grid; width: 32px; height: 32px; place-items: center; color: #8798b0; border-radius: 8px; }.logout-button:hover { color: white; background: rgba(255,255,255,.08); }
.logout-button .crm-icon { width: 17px; }
.crm-workspace { min-height: 100vh; margin-left: var(--sidebar); }
.crm-mobile-header, .crm-mobile-nav { display: none; }
.crm-main { width: min(calc(100% - 64px), 1510px); margin: 0 auto; padding: 43px 0 80px; }

/* Shared controls */
.page-heading, .lead-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.page-heading h1, .lead-heading h1 { margin: 4px 0 7px; font-size: clamp(34px, 3.3vw, 44px); letter-spacing: -.05em; line-height: 1; }
.page-heading p, .lead-heading p { margin: 0; color: var(--muted); }
.page-kicker, .panel-kicker { display: block; margin: 0 0 5px; color: var(--blue) !important; font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.crm-button { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; text-decoration: none; font-weight: 750; transition: transform .15s, border-color .15s, background .15s; }
.crm-button:hover { border-color: #bdc8d8; transform: translateY(-1px); }
.crm-button--primary { color: white; background: var(--blue); border-color: var(--blue); box-shadow: 0 8px 19px rgba(53,109,243,.18); }.crm-button--primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.crm-button.is-success { color: var(--success); background: var(--success-soft); border-color: #c6ebda; }
.crm-button--wide { width: 100%; }
.crm-button .crm-icon { width: 17px; height: 17px; }
.panel, .table-card, .filter-panel { background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 3px 11px rgba(25,50,86,.025); }
.panel h2 { margin: 0; font-size: 19px; letter-spacing: -.025em; }
.panel__heading { display: flex; min-height: 67px; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.panel-count { display: grid; min-width: 28px; height: 28px; place-items: center; color: var(--muted); background: var(--surface); border-radius: 9px; font-size: 11px; font-weight: 800; }

/* Dashboard */
.stats-grid { display: grid; margin-bottom: 22px; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.stat-card { position: relative; display: grid; min-height: 140px; padding: 19px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 17px; text-decoration: none; transition: transform .18s, box-shadow .18s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-card__icon { position: absolute; display: grid !important; width: 46px; height: 46px; top: 17px; right: 17px; place-items: center; color: var(--blue) !important; background: var(--blue-soft); border-radius: 13px; }
.stat-card--mint .stat-card__icon { color: var(--success) !important; background: var(--success-soft); }.stat-card--orange .stat-card__icon { color: var(--warning) !important; background: var(--warning-soft); }.stat-card--violet .stat-card__icon { color: #7857c7 !important; background: #f1ecff; }
.stat-card > span:not(.stat-card__icon) { align-self: start; color: var(--muted); font-size: 11px; font-weight: 700; }
.stat-card strong { align-self: end; margin-top: 20px; font-size: 32px; line-height: 1; }.stat-card small { margin-top: 5px; color: var(--muted-light); font-size: 10px; }
.queue-tabs { display: flex; margin-bottom: 13px; gap: 5px; overflow-x: auto; scrollbar-width: none; }.queue-tabs::-webkit-scrollbar { display: none; }
.queue-tabs a { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 8px 13px; color: var(--muted); border: 1px solid transparent; border-radius: 10px; text-decoration: none; font-size: 12px; font-weight: 700; white-space: nowrap; }
.queue-tabs a:hover { color: var(--ink); background: white; }.queue-tabs a.is-active { color: var(--blue); background: var(--blue-soft); border-color: #dce7ff; }
.queue-tabs span { display: grid; min-width: 20px; height: 20px; place-items: center; padding-inline: 4px; background: rgba(53,109,243,.11); border-radius: 7px; font-size: 9px; }
.filter-panel { margin-bottom: 17px; overflow: hidden; }
.filter-panel > summary { display: flex; min-height: 52px; align-items: center; gap: 9px; padding: 13px 17px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 750; }.filter-panel > summary::-webkit-details-marker { display: none; }
.filter-panel > summary::after { margin-left: auto; color: var(--muted); content: "+"; font-size: 19px; }.filter-panel[open] > summary::after { content: "−"; }
.filter-panel > summary b { padding: 4px 7px; color: var(--blue); background: var(--blue-soft); border-radius: 7px; font-size: 9px; }
.filters { display: grid; align-items: end; padding: 0 17px 17px; border-top: 1px solid var(--line); grid-template-columns: minmax(230px, 1.3fr) repeat(4, minmax(135px, .7fr)) auto; gap: 10px; }
.filters label, .stack-form label, .login-card label { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 750; }
.filters label { padding-top: 15px; }
.filters input, .filters select, .stack-form input, .stack-form select, .stack-form textarea, .login-card input, .comment-form textarea { width: 100%; min-height: 43px; padding: 9px 11px; color: var(--ink); background: var(--surface); border: 1px solid transparent; border-radius: 10px; outline: 0; }
.filters input:focus, .filters select:focus, .stack-form input:focus, .stack-form select:focus, .stack-form textarea:focus, .login-card input:focus, .comment-form textarea:focus { background: white; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(53,109,243,.09); }
.stack-form textarea { resize: vertical; }
.search-control { position: relative; display: block; }.search-control .crm-icon { position: absolute; top: 12px; left: 12px; width: 17px; color: var(--muted); }.search-control input { padding-left: 38px; }
.filter-actions { display: flex; align-items: center; gap: 11px; }.filter-reset { color: var(--muted); font-size: 11px; }
.table-card { overflow: hidden; }
.table-card__top { display: flex; min-height: 59px; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.table-card__top > div { display: flex; align-items: baseline; gap: 9px; }.table-card__top strong { font-size: 15px; }.table-card__top span, .table-card__top small { color: var(--muted); font-size: 10px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 11px 13px; color: var(--muted); background: #fafbfd; font-size: 9px; letter-spacing: .065em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 14px 13px; border-top: 1px solid #edf0f5; vertical-align: middle; white-space: nowrap; }
tbody tr { cursor: pointer; transition: background .15s; }tbody tr:hover { background: #f9fbff; }tbody tr.is-overdue { background: linear-gradient(90deg, rgba(220,63,77,.04), transparent 36%); }
.candidate-cell { display: flex; align-items: center; gap: 10px; text-decoration: none; }.candidate-cell > span:last-child { display: flex; flex-direction: column; }.candidate-cell strong { color: var(--ink); }.candidate-cell:hover strong { color: var(--blue); }
.candidate-cell small, .cell-subtitle { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }.phone-link { font-weight: 700; text-decoration: none; }.phone-link:hover { color: var(--blue); }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: var(--status-color); background: color-mix(in srgb, var(--status-color) 11%, white); border: 1px solid color-mix(in srgb, var(--status-color) 16%, white); border-radius: 99px; font-size: 10px; font-weight: 800; }.status-badge::before { width: 6px; height: 6px; background: currentColor; border-radius: 50%; content: ""; }
.assignee-chip { display: inline-flex; align-items: center; gap: 7px; }.assignee-chip i { display: grid; width: 24px; height: 24px; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 7px; font-size: 8px; font-style: normal; font-weight: 850; }.muted-value { color: var(--muted-light); }
.contact-date { display: inline-flex; align-items: center; gap: 5px; }.contact-date .crm-icon { width: 14px; }.contact-date.is-overdue { color: var(--danger); font-weight: 800; }
.row-arrow { width: 40px; }.row-arrow a { display: grid; width: 30px; height: 30px; place-items: center; color: var(--muted); border-radius: 8px; }.row-arrow a:hover { color: var(--blue); background: var(--blue-soft); }.row-arrow .crm-icon { width: 15px; }
.empty-state { display: grid; min-height: 330px; place-items: center; align-content: center; padding: 40px; text-align: center; }.empty-state > span { display: grid; width: 58px; height: 58px; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 18px; }.empty-state h2 { margin: 16px 0 5px; font-size: 20px; }.empty-state p { max-width: 380px; margin: 0 0 18px; color: var(--muted); }
.pagination { display: flex; justify-content: center; gap: 6px; padding: 16px; border-top: 1px solid var(--line); }.pagination a { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; text-decoration: none; }.pagination a:hover { background: var(--surface); }.pagination a.is-active { color: white; background: var(--blue); }

/* Notifications */
.flash { position: fixed; z-index: 90; display: flex; max-width: min(430px, calc(100vw - 30px)); align-items: center; gap: 10px; top: 20px; right: 20px; padding: 13px 14px; color: #156c4d; background: white; border: 1px solid #bde8d4; border-radius: 13px; box-shadow: var(--shadow); transition: opacity .35s, transform .35s; }.flash > span { display: grid; width: 25px; height: 25px; place-items: center; color: white; background: var(--success); border-radius: 8px; font-weight: 900; }.flash > button { margin-left: auto; color: var(--muted); background: none; border: 0; cursor: pointer; font-size: 18px; }.flash--error { color: #9d2632; border-color: #f3c2c8; }.flash--error > span { background: var(--danger); }.flash.is-fading { opacity: 0; transform: translateY(-8px); pointer-events: none; }

/* Lead page */
.breadcrumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 19px; color: var(--muted); font-size: 11px; }.breadcrumbs a { text-decoration: none; }.breadcrumbs a:hover { color: var(--blue); }
.lead-heading { align-items: center; }
.lead-title { display: flex; min-width: 0; align-items: center; gap: 16px; }.candidate-avatar--large { width: 58px; height: 58px; border-radius: 17px; font-size: 16px; }.lead-title h1 { margin-block: 8px 5px; }.lead-title__meta { display: flex; align-items: center; gap: 9px; }.lead-title__meta > span:last-child { color: var(--muted); font-size: 10px; }
.lead-heading__actions { display: flex; gap: 9px; }
.assignment-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 15px 17px; color: #24447b; background: #eef4ff; border: 1px solid #d7e4ff; border-radius: 15px; }.assignment-banner__icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; color: var(--blue); background: white; border-radius: 11px; }.assignment-banner > div { flex: 1; }.assignment-banner strong { font-size: 13px; }.assignment-banner p { margin: 3px 0 0; color: #5b6f92; font-size: 11px; }
.lead-layout { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) 375px; gap: 18px; }.lead-main { display: grid; gap: 18px; }.lead-sidebar { position: sticky; top: 18px; display: grid; gap: 18px; }
.panel-phone { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); text-decoration: none; font-weight: 800; }.panel-phone .crm-icon { width: 16px; }
.details-grid { display: grid; margin: 0; padding: 21px; grid-template-columns: repeat(3, 1fr); gap: 23px 18px; }.details-grid div, .source-card dl div { display: flex; min-width: 0; flex-direction: column; gap: 5px; }.details-grid dt, .source-card dt { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }.details-grid dd, .source-card dd { margin: 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }.metric-value { display: grid; width: 32px; height: 30px; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 9px; }
.stack-form { display: grid; padding: 19px; gap: 14px; }.lead-control .panel__heading, .panel--form .panel__heading { margin: -19px -19px 0; }
.callback-shortcuts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -5px; }.callback-shortcuts button, .comment-templates button { padding: 6px 8px; color: var(--muted); background: var(--surface); border: 0; border-radius: 8px; cursor: pointer; font-size: 9px; font-weight: 700; }.callback-shortcuts button:hover, .comment-templates button:hover { color: var(--blue); background: var(--blue-soft); }
.contact-check { cursor: pointer; }.contact-check > input { position: absolute; opacity: 0; pointer-events: none; }.contact-check > span { display: flex; align-items: center; gap: 10px; padding: 11px; background: var(--surface); border: 1px solid transparent; border-radius: 11px; }.contact-check > span > .crm-icon { width: 18px; color: var(--muted); }.contact-check > span > span { display: flex; flex-direction: column; }.contact-check strong { color: var(--ink); font-size: 11px; }.contact-check small { color: var(--muted); font-size: 9px; font-weight: 500; }.contact-check input:checked + span { background: var(--success-soft); border-color: #c6ebda; }.contact-check input:checked + span > .crm-icon { color: var(--success); }
.source-card dl { display: grid; margin: 0; padding: 19px; grid-template-columns: 1fr 1fr; gap: 17px; }.source-card dd { font-size: 12px; }.source-card dd small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }.source-card dl div:last-child { grid-column: 1 / -1; }.mono-value { font-family: Consolas, monospace; font-size: 10px !important; }
.comment-form { display: grid; padding: 19px; border-bottom: 1px solid var(--line); gap: 10px; }.comment-form textarea { resize: vertical; }.comment-form__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.comment-templates { display: flex; flex-wrap: wrap; gap: 5px; }
.timeline { padding: 5px 20px 18px; }.timeline-item { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 15px 0; border-bottom: 1px solid #edf0f5; }.timeline-item:last-child { border-bottom: 0; }.timeline-avatar { display: grid; width: 30px; height: 30px; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 9px; font-size: 9px; font-weight: 850; }.timeline-item__mark { display: grid; width: 27px; height: 27px; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 8px; }.timeline-item__mark .crm-icon { width: 14px; }.timeline-item header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.timeline-item time { color: var(--muted); font-size: 9px; }.timeline-item p { margin: 5px 0 0; color: var(--muted); }.timeline-item--comment p { color: var(--ink); white-space: normal; }.timeline--compact .timeline-item { padding-block: 10px; }
.empty-inline { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 30px 15px 25px; color: var(--muted); }.empty-inline > span { display: grid; width: 35px; height: 35px; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 10px; }.empty-inline p { margin: 0; }
.history-panel { overflow: hidden; }.history-panel > summary { display: flex; min-height: 67px; align-items: center; justify-content: space-between; padding: 15px 20px; cursor: pointer; list-style: none; }.history-panel > summary::-webkit-details-marker { display: none; }.history-panel > summary > span:first-child { display: flex; flex-direction: column; }.history-panel > summary strong { font-size: 16px; }.history-panel > summary > span:last-child { color: var(--muted); font-size: 10px; }.history-panel[open] > summary { border-bottom: 1px solid var(--line); }

/* Settings */
.settings-layout { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) 370px; gap: 18px; }.settings-list { padding: 0 19px; }.settings-item { display: flex; min-height: 78px; align-items: center; gap: 12px; border-bottom: 1px solid #edf0f5; }.settings-item:last-child { border-bottom: 0; }.settings-item.is-muted { opacity: .48; }.settings-item > div { display: flex; min-width: 0; flex: 1; flex-direction: column; }.settings-item small { color: var(--muted); }.settings-item__count { color: var(--muted); font-size: 10px; white-space: nowrap; }.service-dot { width: 12px; height: 12px; background: var(--blue); border-radius: 50%; }.text-button { padding: 7px 9px; color: var(--blue); background: var(--blue-soft); border: 0; border-radius: 8px; cursor: pointer; font-size: 10px; font-weight: 750; }
.state-pill { padding: 5px 7px; color: var(--muted); background: var(--surface-strong); border-radius: 99px; font-size: 9px; font-weight: 800; }.state-pill.is-active { color: var(--success); background: var(--success-soft); }.stack-form label > small { color: var(--muted-light); font-size: 9px; font-weight: 500; }

/* Short links */
.link-stats { display: grid; margin-bottom: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.link-stats > div { display: flex; min-height: 86px; align-items: center; justify-content: space-between; padding: 17px 19px; background: white; border: 1px solid var(--line); border-radius: 16px; }.link-stats span { color: var(--muted); font-size: 11px; font-weight: 700; }.link-stats strong { font-size: 27px; }
.links-layout { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) 450px; gap: 18px; }.short-links-panel { min-width: 0; overflow: hidden; }.short-link-form { position: sticky; top: 18px; }.short-link-form .panel__heading { margin: -19px -19px 0; }.short-links-list { display: grid; }.short-link-item { display: grid; min-width: 0; align-items: center; padding: 16px 18px; border-bottom: 1px solid #edf0f5; grid-template-columns: minmax(150px, .8fr) minmax(230px, 1.35fr) 95px auto; grid-template-areas: "title address metrics action" "target target metrics action" "tags tags metrics action"; gap: 7px 18px; transition: background .2s, opacity .2s; }.short-link-item:last-child { border-bottom: 0; }.short-link-item.is-created { background: var(--success-soft); }.short-link-item.is-muted { opacity: .5; }.short-link-title { display: flex; min-width: 0; grid-area: title; flex-direction: column; }.short-link-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.short-link-title small, .short-link-metrics span, .short-link-metrics small { color: var(--muted); font-size: 9px; }.short-link-title p { display: -webkit-box; margin: 5px 0 0; overflow: hidden; color: var(--muted); font-size: 9px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.short-link-address { display: flex; min-width: 0; align-items: center; grid-area: address; gap: 8px; }.short-link-address > a { overflow: hidden; color: var(--blue); font-size: 12px; font-weight: 800; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }.copy-link-button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; padding: 5px 7px; color: var(--blue); background: var(--blue-soft); border: 0; border-radius: 7px; cursor: pointer; font-size: 9px; font-weight: 750; }.copy-link-button .crm-icon { width: 13px; height: 13px; }.copy-link-button.is-success { color: var(--success); background: var(--success-soft); }.short-link-target { min-width: 0; overflow: hidden; color: var(--muted); grid-area: target; font-size: 9px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }.short-link-target:hover { color: var(--blue); }.short-link-tags { display: flex; min-width: 0; flex-wrap: wrap; grid-area: tags; gap: 5px; }.short-link-tags span { max-width: 220px; overflow: hidden; padding: 3px 6px; color: #52637b; background: var(--surface); border-radius: 6px; font-family: Consolas, monospace; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.short-link-metrics { display: flex; grid-area: metrics; flex-direction: column; }.short-link-metrics strong { font-size: 20px; }.short-link-actions { display: flex; align-items: center; grid-area: action; flex-direction: column; gap: 6px; }.short-link-actions form { display: contents; }.short-link-actions .text-button { width: 84px; text-align: center; text-decoration: none; }.short-link-form textarea { line-height: 1.45; overflow-wrap: anywhere; }
.utm-fields { display: grid; min-width: 0; margin: 0; padding: 14px; background: #fafbfd; border: 1px solid var(--line); border-radius: 13px; gap: 12px; }.utm-fields legend { padding: 0 7px; color: var(--ink); font-size: 11px; font-weight: 800; }.field-optional { color: var(--muted-light); font-size: 8px; font-weight: 600; }.alias-control { display: grid; min-width: 0; align-items: center; overflow: hidden; background: var(--surface); border: 1px solid transparent; border-radius: 10px; grid-template-columns: auto minmax(0, 1fr); }.alias-control:focus-within { background: white; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(53,109,243,.09); }.alias-control > span { padding-left: 11px; color: var(--muted); font-family: Consolas, monospace; font-size: 10px; font-weight: 500; white-space: nowrap; }.stack-form .alias-control input { min-width: 0; padding-left: 2px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }.locked-alias { display: flex; padding: 12px; background: var(--surface); border-radius: 11px; flex-direction: column; gap: 3px; }.locked-alias span { color: var(--muted); font-size: 9px; font-weight: 750; }.locked-alias strong { overflow-wrap: anywhere; font-size: 12px; }.locked-alias small { color: var(--muted-light); font-size: 9px; }.link-preview { display: grid; padding: 13px; color: #dce6f6; background: var(--ink); border-radius: 13px; gap: 10px; }.link-preview > span { color: #91a4bf; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.link-preview > div { position: relative; display: grid; min-width: 0; padding-right: 29px; gap: 3px; }.link-preview small { color: #91a4bf; font-size: 8px; }.link-preview output { display: block; max-height: 47px; overflow: auto; color: white; font-family: Consolas, monospace; font-size: 9px; overflow-wrap: anywhere; scrollbar-width: thin; }.link-preview output.is-invalid { color: #ffbac1; }.link-preview button { position: absolute; display: grid; width: 25px; height: 25px; top: 5px; right: 0; place-items: center; padding: 0; color: #cdd9ea; background: rgba(255,255,255,.09); border: 0; border-radius: 7px; cursor: pointer; }.link-preview button:hover, .link-preview button.is-success { color: white; background: rgba(53,109,243,.75); }.link-preview button:disabled { opacity: .35; cursor: not-allowed; }.link-preview button .crm-icon { width: 13px; height: 13px; }

/* Login */
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 20px; background: radial-gradient(circle at 12% 12%, #dfe9ff, transparent 34%), radial-gradient(circle at 90% 90%, #e9f8f2, transparent 30%), var(--surface); }.login-card { width: min(100%, 430px); padding: 35px; background: white; border: 1px solid var(--line); border-radius: 25px; box-shadow: var(--shadow); }.login-brand { display: flex; align-items: center; gap: 11px; }.login-brand div { display: flex; flex-direction: column; line-height: 1.1; }.login-brand small { margin-top: 3px; color: var(--muted); font-size: 10px; }.login-card h1 { margin: 34px 0 8px; font-size: 31px; letter-spacing: -.04em; }.login-card > p { margin: 0 0 24px; color: var(--muted); }.login-card form { display: grid; gap: 15px; }.login-card .crm-button { margin-top: 4px; }.login-back { display: block; margin-top: 22px; color: var(--muted); font-size: 11px; text-align: center; }
.password-control { position: relative; display: block; }.password-control input { padding-right: 80px; }.password-control button { position: absolute; top: 7px; right: 7px; padding: 6px 8px; color: var(--blue); background: var(--blue-soft); border: 0; border-radius: 7px; cursor: pointer; font-size: 9px; font-weight: 750; }

@media (max-width: 1280px) {
  .filters { grid-template-columns: repeat(3, 1fr); }.filter-search { grid-column: span 2; }
  .lead-layout { grid-template-columns: minmax(0, 1fr) 350px; }
  .links-layout { grid-template-columns: minmax(0, 1fr) 400px; }.short-link-item { grid-template-columns: minmax(130px, .7fr) minmax(200px, 1fr) 80px; grid-template-areas: "title address metrics" "target target metrics" "tags tags metrics" "action action action"; }.short-link-actions { align-items: stretch; justify-self: start; flex-direction: row; }
}

@media (max-width: 1040px) {
  :root { --sidebar: 216px; }
  .crm-sidebar { padding-inline: 10px; }.crm-main { width: min(calc(100% - 36px), 1510px); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .lead-layout { grid-template-columns: 1fr; }.lead-sidebar { position: static; grid-template-columns: 1fr 1fr; }.lead-control { grid-row: span 2; }
  .links-layout { grid-template-columns: 1fr; }.short-link-form { position: static; order: -1; }
}

@media (max-width: 760px) {
  :root { --sidebar: 0px; }
  body { padding-bottom: 69px; }
  .crm-sidebar { display: none; }.crm-workspace { margin-left: 0; }
  .crm-mobile-header { position: sticky; z-index: 35; top: 0; display: flex; min-height: 64px; align-items: center; justify-content: space-between; padding: 9px 14px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }.crm-mobile-header .crm-brand__mark { width: 38px; height: 38px; }.crm-mobile-header .user-avatar { width: 34px; height: 34px; }
  .crm-mobile-nav { position: fixed; z-index: 50; display: flex; height: 64px; right: 9px; bottom: 8px; left: 9px; align-items: center; justify-content: space-around; padding: 5px; background: rgba(20,35,58,.97); border-radius: 17px; box-shadow: 0 14px 35px rgba(20,35,58,.26); }.crm-mobile-nav a { display: flex; min-width: 60px; align-items: center; gap: 2px; padding: 5px 8px; color: #aeb9ca; flex-direction: column; text-decoration: none; font-size: 8px; font-weight: 700; }.crm-mobile-nav a:hover { color: white; }.crm-mobile-nav .crm-icon { width: 19px; height: 19px; }
  .crm-main { width: min(calc(100% - 24px), 1510px); padding: 27px 0 45px; }
  .page-heading, .lead-heading { align-items: flex-start; flex-direction: column; }.page-heading h1, .lead-heading h1 { font-size: 34px; }.page-heading .crm-button { width: 100%; }
  .stats-grid { gap: 9px; }.stat-card { min-height: 128px; padding: 15px; }.stat-card__icon { width: 39px; height: 39px; top: 13px; right: 13px; }.stat-card strong { font-size: 28px; }
  .filters { grid-template-columns: 1fr; }.filter-search { grid-column: auto; }.filter-actions { padding-top: 5px; }.filter-actions .crm-button { flex: 1; }
  .table-card__top small { display: none; }.table-card__top > div { align-items: flex-start; flex-direction: column; gap: 2px; }
  .leads-table thead { display: none; }.leads-table, .leads-table tbody { display: block; }.leads-table tbody { padding: 7px; }.leads-table tr { position: relative; display: grid; margin-bottom: 7px; padding: 14px; background: white; border: 1px solid var(--line); border-radius: 14px; grid-template-columns: 1fr 1fr; gap: 12px; }.leads-table tr:last-child { margin-bottom: 0; }.leads-table tr.is-overdue { border-color: #f2cbd0; }.leads-table td { display: flex; min-width: 0; padding: 0; border: 0; flex-direction: column; white-space: normal; }.leads-table td::before { margin-bottom: 3px; color: var(--muted); content: attr(data-label); font-size: 8px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }.leads-table td:first-child { padding-right: 34px; grid-column: 1 / -1; }.leads-table td:first-child::before, .leads-table .row-arrow::before { display: none; }.leads-table .row-arrow { position: absolute; width: auto; top: 14px; right: 10px; }.candidate-cell small { white-space: normal; }.contact-date { align-items: flex-start; }.assignee-chip { align-items: flex-start; }
  .lead-title { align-items: flex-start; }.candidate-avatar--large { width: 48px; height: 48px; border-radius: 14px; }.lead-title__meta { align-items: flex-start; flex-direction: column; }.lead-title h1 { font-size: 31px; }.lead-heading__actions { width: 100%; }.lead-heading__actions .crm-button { flex: 1; padding-inline: 10px; }
  .assignment-banner { align-items: flex-start; flex-wrap: wrap; }.assignment-banner form { width: 100%; }.assignment-banner .crm-button { width: 100%; }
  .lead-sidebar { grid-template-columns: 1fr; }.lead-control { grid-row: auto; }.details-grid { grid-template-columns: 1fr 1fr; }.comment-form__footer { align-items: stretch; flex-direction: column; }.comment-form__footer .crm-button { width: 100%; }.source-card dl { grid-template-columns: 1fr 1fr; }
  .settings-layout { grid-template-columns: 1fr; }.settings-item { align-items: flex-start; padding-block: 13px; flex-wrap: wrap; }.settings-item__count { margin-left: 50px; }
  .link-stats { grid-template-columns: 1fr; }.link-stats > div { min-height: 70px; }.short-link-item { grid-template-columns: 1fr auto; grid-template-areas: "title metrics" "address address" "target target" "tags tags" "action action"; }.short-link-address { align-items: stretch; flex-direction: column; }.copy-link-button { justify-content: center; }.short-link-actions { width: 100%; justify-self: stretch; }.short-link-actions .text-button { width: 100%; }.utm-fields { padding: 12px; }.alias-control { grid-template-columns: 1fr; }.alias-control > span { padding: 9px 11px 0; white-space: normal; }.stack-form .alias-control input { padding-left: 11px; }.link-preview output { max-height: 66px; }
}

@media (max-width: 430px) {
  .crm-main { width: min(calc(100% - 18px), 1510px); }.stats-grid { grid-template-columns: 1fr 1fr; }.stat-card { min-height: 120px; }.stat-card small { display: none; }
  .lead-heading__actions { display: grid; grid-template-columns: 1fr; }.details-grid, .source-card dl { grid-template-columns: 1fr; }.source-card dl div:last-child { grid-column: auto; }.timeline-item header { align-items: flex-start; flex-direction: column; gap: 2px; }
  .login-card { padding: 27px 22px; }
}