:root {
    --bg: #f3f5f4;
    --surface: #ffffff;
    --surface-muted: #f7f8f7;
    --line: #dde3df;
    --line-strong: #c7d0ca;
    --text: #17201c;
    --muted: #657069;
    --faint: #737f78;
    --primary: #145b40;
    --primary-strong: #0d4430;
    --primary-soft: #e6f1eb;
    --amber: #a56409;
    --amber-soft: #fff2d8;
    --red: #b33a38;
    --red-soft: #fde9e8;
    --blue: #356a96;
    --blue-soft: #e7f0f8;
    --shadow: 0 8px 24px rgba(26, 43, 34, 0.08);
    --sidebar-width: 222px;
    --topbar-height: 64px;
    --radius: 8px;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    background: var(--bg);
}

body {
    margin: 0;
    color: var(--text);
    background: var(--bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
    color: inherit;
    font: inherit;
    letter-spacing: 0;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    border: 0;
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

a {
    color: inherit;
    text-decoration: none;
}

svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke-width: 1.9;
}

.hidden {
    display: none !important;
}

.mobile-only,
.mobile-nav,
.mobile-list {
    display: none;
}

.mobile-only {
    display: none !important;
}

.app-body {
    min-width: 320px;
    min-height: 100vh;
    overflow-x: hidden;
}

.app-shell {
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    border-right: 1px solid #244c3b;
    background: #123b2d;
    color: #f4f8f6;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    height: var(--topbar-height);
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
    gap: 11px;
}

.brand-mark {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 6px;
    background: #f6faf8;
    color: #123b2d;
    font-size: 17px;
    font-weight: 800;
}

.sidebar-brand strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.sidebar-brand span {
    display: block;
    margin-top: 2px;
    color: #a8c1b6;
    font-size: 9px;
    font-weight: 700;
}

.sidebar-nav {
    display: grid;
    padding: 16px 10px;
    gap: 4px;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 6px;
    background: transparent;
    color: #bcd0c7;
    gap: 11px;
    text-align: left;
    transition: background 150ms ease, color 150ms ease;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.nav-item.active {
    background: #f2f7f4;
    color: #123b2d;
    font-weight: 700;
}

.nav-item span {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-badge {
    display: grid;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    place-items: center;
    border-radius: 10px;
    background: #d99626;
    color: #1f241f;
    font-size: 10px;
    font-style: normal;
}

.sidebar-footer {
    margin-top: auto;
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-entry {
    display: flex;
    width: 100%;
    min-height: 56px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    gap: 10px;
    text-align: left;
}

.ai-entry:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ai-entry > svg {
    color: #e6b654;
}

.ai-entry span {
    display: grid;
    min-width: 0;
}

.ai-entry strong {
    font-size: 12px;
}

.ai-entry small {
    margin-top: 2px;
    color: #aac2b7;
    font-size: 10px;
}

.account-row {
    display: grid;
    grid-template-columns: 32px 1fr 30px;
    align-items: center;
    margin-top: 9px;
    padding: 6px 5px;
    gap: 9px;
}

.avatar {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: #d7e7df;
    color: #164c37;
    font-size: 12px;
    font-weight: 800;
}

.account-row strong,
.account-row span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-row strong {
    font-size: 12px;
}

.account-row span {
    margin-top: 2px;
    color: #9fb9ad;
    font-size: 10px;
}

.account-row .icon-button {
    color: #a9c0b6;
}

.workspace {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    height: var(--topbar-height);
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    gap: 20px;
}

.mobile-brand {
    display: none;
}

.search-trigger {
    display: flex;
    width: min(520px, 52vw);
    height: 36px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-muted);
    color: var(--muted);
    gap: 9px;
    text-align: left;
}

.search-trigger:hover {
    border-color: var(--line-strong);
    background: #ffffff;
}

.search-trigger span {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-trigger kbd {
    margin-left: auto;
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #ffffff;
    color: var(--faint);
    font-size: 10px;
    box-shadow: 0 1px 0 #d5dbd7;
}

.top-actions,
.heading-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
}

.icon-button:hover {
    border-color: var(--line);
    background: var(--surface-muted);
    color: var(--text);
}

.primary-button,
.secondary-button,
.danger-button,
.text-button {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border-radius: 6px;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.primary-button {
    background: var(--primary);
    color: #ffffff;
}

.primary-button:hover {
    background: var(--primary-strong);
}

.secondary-button {
    border: 1px solid var(--line-strong);
    background: #ffffff;
    color: var(--text);
}

.secondary-button:hover {
    border-color: #96a49c;
    background: var(--surface-muted);
}

.danger-button {
    border: 1px solid #edc1bf;
    background: #fffafa;
    color: var(--red);
}

.danger-button:hover {
    background: var(--red-soft);
}

.text-button {
    min-height: 30px;
    padding: 0 4px;
    background: transparent;
    color: var(--primary);
}

.text-button:hover {
    color: var(--primary-strong);
}

.main-content {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 26px 28px 48px;
}

.view {
    display: none;
}

.view.active {
    display: block;
    animation: view-in 160ms ease-out;
}

@keyframes view-in {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-heading {
    display: flex;
    min-height: 72px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 20px;
}

.page-heading h1 {
    margin: 3px 0 5px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

.page-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.eyebrow {
    color: var(--primary) !important;
    font-size: 10px !important;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
}

.dashboard-heading h1 {
    font-size: 26px;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-bottom: 18px;
    gap: 12px;
}

.metric-card {
    display: grid;
    min-width: 0;
    min-height: 104px;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    gap: 13px;
    text-align: left;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.metric-card:hover {
    border-color: var(--line-strong);
    box-shadow: 0 6px 18px rgba(30, 48, 38, 0.06);
    transform: translateY(-1px);
}

.metric-card > span:last-child {
    display: grid;
    min-width: 0;
    grid-template-columns: 1fr auto;
    align-items: baseline;
}

.metric-card small,
.metric-card em {
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1.35;
}

.metric-card small {
    grid-column: 1 / -1;
}

.metric-card strong {
    margin-top: 4px;
    font-size: 25px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.metric-card em {
    align-self: baseline;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 7px;
}

.metric-icon.green { background: var(--primary-soft); color: var(--primary); }
.metric-icon.amber { background: var(--amber-soft); color: var(--amber); }
.metric-icon.red { background: var(--red-soft); color: var(--red); }
.metric-icon.blue { background: var(--blue-soft); color: var(--blue); }

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(270px, 0.72fr);
    align-items: start;
    gap: 14px;
}

.dashboard-main,
.dashboard-side {
    display: grid;
    min-width: 0;
    gap: 14px;
}

.panel {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.panel-header {
    display: flex;
    min-height: 59px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    gap: 12px;
}

.panel-header > div {
    min-width: 0;
}

.panel-header h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.panel-header p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.compact-panel .panel-header {
    min-height: 52px;
    padding: 11px 14px;
}

.loading-block:empty {
    min-height: 120px;
    background-image: linear-gradient(90deg, transparent 0, rgba(20, 91, 64, 0.04) 50%, transparent 100%);
    background-size: 220px 100%;
    animation: loading 1.2s linear infinite;
}

@keyframes loading {
    from { background-position: -220px 0; }
    to { background-position: calc(100% + 220px) 0; }
}

.empty-state {
    display: grid;
    min-height: 150px;
    place-items: center;
    padding: 24px;
    color: var(--muted);
    text-align: center;
}

.empty-state svg {
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
    color: var(--line-strong);
}

.empty-state strong,
.empty-state span {
    display: block;
}

.empty-state strong {
    color: var(--text);
    font-size: 12px;
}

.empty-state span {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.45;
}

.focus-list {
    min-height: 80px;
}

.focus-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto 28px;
    min-height: 57px;
    align-items: center;
    padding: 8px 13px;
    border-bottom: 1px solid #edf0ee;
    gap: 10px;
}

.focus-row:last-child {
    border-bottom: 0;
}

.queue-source-icon {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 6px;
    background: var(--blue-soft);
    color: var(--blue);
}

.queue-source-icon.reply {
    background: var(--amber-soft);
    color: var(--amber);
}

.queue-source-icon.cooling {
    background: var(--red-soft);
    color: var(--red);
}

.queue-source-icon svg {
    width: 15px;
    height: 15px;
}

.queue-origin {
    display: grid;
    width: 26px;
    height: 22px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.live-status.muted,
.live-status.stale {
    color: var(--faint);
}

.live-status.muted::before {
    background: var(--line-strong);
}

.live-status.stale::before {
    background: var(--amber);
}

.funnel-list {
    min-height: 220px;
    padding: 5px 13px 10px;
}

.funnel-list .empty-state {
    min-height: 220px;
    padding: 18px;
}

.funnel-total {
    display: flex;
    min-height: 38px;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid #edf0ee;
}

.funnel-total span {
    color: var(--muted);
    font-size: 11px;
}

.funnel-total strong {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.funnel-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 8px 0 5px;
    gap: 8px;
}

.funnel-stage > div {
    min-width: 0;
}

.funnel-stage strong,
.funnel-stage span {
    display: block;
}

.funnel-stage strong {
    font-size: 11px;
    font-weight: 600;
}

.funnel-stage > div span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
}

.funnel-stage > b {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.funnel-track {
    grid-column: 1 / -1;
    height: 3px;
    overflow: hidden;
    border-radius: 3px;
    background: #edf0ee;
}

.funnel-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.funnel-stage.cooling .funnel-track i,
.funnel-stage.paused .funnel-track i {
    background: var(--amber);
}

.handoff-content {
    min-height: 130px;
}

.omission-check {
    margin: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
}

.omission-check.warning {
    border-color: #ead7ae;
    background: #fffdf8;
}

.omission-check.clear {
    border-color: #c8e0d5;
    background: #f7fbf9;
}

.omission-check.stale {
    background: var(--surface-muted);
}

.omission-heading {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    gap: 10px;
}

.omission-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.omission-heading svg {
    width: 16px;
    height: 16px;
    color: var(--primary);
}

.omission-check.warning .omission-heading svg {
    color: var(--amber);
}

.omission-heading b {
    font-size: 12px;
}

.omission-heading em {
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
}

.omission-check > p {
    margin: -3px 12px 10px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.55;
}

.omission-check.stale > .secondary-button {
    margin: 0 12px 12px;
}

.omission-counts {
    display: flex;
    flex-wrap: wrap;
    padding: 0 12px 9px;
    gap: 6px;
}

.omission-counts span {
    padding: 4px 7px;
    border-radius: 4px;
    background: #f4eee1;
    color: #705b30;
    font-size: 9px;
}

.omission-counts b {
    margin-left: 2px;
}

.omission-list {
    border-top: 1px solid #eee7d7;
}

.omission-row {
    display: grid;
    width: 100%;
    min-height: 58px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    padding: 8px 11px;
    border-bottom: 1px solid #eee7d7;
    background: transparent;
    text-align: left;
    gap: 9px;
}

.omission-row:last-child {
    border-bottom: 0;
}

.omission-row:hover {
    background: #fff9ed;
}

.omission-row .customer-avatar {
    width: 30px;
    height: 30px;
    font-size: 9px;
}

.omission-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.omission-copy strong,
.omission-copy small,
.omission-copy em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.omission-copy strong {
    font-size: 11px;
}

.omission-copy small {
    color: var(--text-soft);
    font-size: 9px;
}

.omission-copy em {
    color: var(--primary);
    font-size: 9px;
    font-style: normal;
}

.omission-time {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    gap: 4px;
}

.omission-time.good {
    color: var(--primary);
}

.omission-time svg {
    width: 14px;
    height: 14px;
}

.handoff-changes {
    display: flex;
    flex-wrap: wrap;
    padding: 9px 13px;
    border-bottom: 1px solid #edf0ee;
    background: var(--surface-muted);
    gap: 8px;
}

.handoff-changes span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
    gap: 5px;
}

.handoff-changes svg {
    width: 14px;
    height: 14px;
}

.handoff-changes .added {
    color: var(--primary);
}

.handoff-changes .removed {
    color: var(--red);
}

.handoff-head,
.handoff-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.75fr) 86px minmax(120px, 0.9fr) minmax(150px, 1.1fr) minmax(170px, 1.25fr);
    align-items: center;
    gap: 12px;
}

.handoff-head {
    min-height: 34px;
    padding: 6px 13px;
    border-bottom: 1px solid #edf0ee;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
}

.handoff-row {
    min-height: 72px;
    padding: 9px 13px;
    border-bottom: 1px solid #edf0ee;
}

.handoff-row:last-child {
    border-bottom: 0;
}

.handoff-toggle {
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #edf0ee;
    background: var(--surface-muted);
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
    gap: 5px;
}

.handoff-toggle:hover {
    background: var(--primary-soft);
}

.handoff-toggle svg {
    width: 15px;
    height: 15px;
}

.handoff-person {
    display: grid;
    min-width: 0;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.handoff-person strong,
.handoff-person small,
.handoff-cell b,
.handoff-cell span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.handoff-person strong,
.handoff-cell b {
    font-size: 11px;
    font-weight: 600;
}

.handoff-person small,
.handoff-cell span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}

.handoff-state {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
    white-space: nowrap;
}

.handoff-state.done,
.handoff-state.completed {
    border-color: #bad5c6;
    background: var(--primary-soft);
    color: var(--primary);
}

.handoff-state.reply {
    border-color: #edd39f;
    background: var(--amber-soft);
    color: var(--amber);
}

.handoff-state.cooling {
    border-color: #efc5c3;
    background: var(--red-soft);
    color: var(--red);
}

.handoff-state.paused {
    border-color: var(--line);
    background: var(--surface-muted);
    color: var(--faint);
}

.timezone-radar,
.customer-identity .timezone-radar,
.focus-copy .timezone-radar,
.handoff-person .timezone-radar {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-height: 20px;
    align-items: center;
    margin-top: 4px;
    padding: 2px 6px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 9px;
    font-style: normal;
    line-height: 1.3;
    gap: 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timezone-radar svg {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
}

.timezone-radar b,
.timezone-radar em {
    overflow: hidden;
    font-size: inherit;
    font-style: normal;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timezone-radar em { font-weight: 500; }
.timezone-radar.good { border-color: #bad5c6; background: var(--primary-soft); color: var(--primary); }
.timezone-radar.caution { border-color: #edd39f; background: var(--amber-soft); color: var(--amber); }
.timezone-radar.quiet { border-color: #efc5c3; background: var(--red-soft); color: var(--red); }
.timezone-radar.unknown { color: var(--faint); }

.ws-status-stack {
    display: flex !important;
    min-width: 0;
    align-items: flex-start;
    flex-direction: column;
    overflow: visible !important;
    gap: 2px;
    white-space: normal !important;
}

.ws-status-stack .timezone-radar { margin-top: 2px; }

.task-toggle {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    color: var(--line-strong);
}

.task-toggle:hover,
.task-toggle.done {
    color: var(--primary);
}

.focus-copy,
.task-copy {
    min-width: 0;
}

.focus-copy strong,
.focus-copy span,
.task-copy strong,
.task-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.focus-copy strong,
.task-copy strong {
    font-size: 12px;
    font-weight: 600;
}

.focus-copy span,
.task-copy span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.date-chip,
.status-chip,
.priority-chip,
.tag-chip {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
    white-space: nowrap;
}

.date-chip.overdue,
.priority-chip.high {
    border-color: #efc5c3;
    background: var(--red-soft);
    color: var(--red);
}

.date-chip.today,
.priority-chip.normal {
    border-color: #edd39f;
    background: var(--amber-soft);
    color: var(--amber);
}

.priority-chip.low {
    border-color: #cbd7df;
    background: var(--blue-soft);
    color: var(--blue);
}

.status-chip.active,
.status-chip.ready,
.status-chip.done {
    border-color: #bad5c6;
    background: var(--primary-soft);
    color: var(--primary);
}

.status-chip.important,
.status-chip.in_progress {
    border-color: #edd39f;
    background: var(--amber-soft);
    color: var(--amber);
}

.status-chip.inactive,
.status-chip.archived {
    color: var(--faint);
}

.customer-rows {
    min-height: 90px;
}

.customer-row {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) 110px minmax(190px, 1fr) 100px 28px;
    min-height: 62px;
    align-items: center;
    padding: 8px 13px;
    border-bottom: 1px solid #edf0ee;
    gap: 12px;
}

.customer-row:last-child {
    border-bottom: 0;
}

.customer-identity {
    display: grid;
    min-width: 0;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.customer-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: #e7ece9;
    color: #47534c;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.customer-identity strong,
.customer-identity span,
.next-action {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-identity strong {
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.customer-identity span,
.next-action {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.news-list {
    min-height: 100px;
}

.news-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    min-height: 64px;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid #edf0ee;
    gap: 11px;
}

.news-item:last-child {
    border-bottom: 0;
}

.news-score {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.news-score.high {
    border-color: #edc7c5;
    background: var(--red-soft);
    color: var(--red);
}

.news-copy {
    min-width: 0;
}

.news-copy strong,
.news-copy span,
.news-copy p {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-copy strong {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.news-copy span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}

.news-copy p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.news-item > a {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--faint);
}

.news-list.expanded .news-item {
    grid-template-columns: 36px minmax(0, 1fr) 34px;
    min-height: 88px;
    padding: 12px 16px;
}

.news-list.expanded .news-copy strong,
.news-list.expanded .news-copy p {
    white-space: normal;
}

.news-list.expanded .news-copy strong {
    line-height: 1.55;
}

.news-list.expanded .news-copy p {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.live-status {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
    gap: 5px;
}

.live-status::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2e9a68;
    content: "";
}

.market-mini-list {
    min-height: 120px;
}

.market-mini-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 42px;
    align-items: center;
    padding: 6px 13px;
    border-bottom: 1px solid #edf0ee;
    gap: 9px;
}

.market-mini-row:last-child {
    border-bottom: 0;
}

.market-mini-row span,
.market-mini-row strong,
.market-mini-row em {
    font-size: 11px;
    font-style: normal;
    line-height: 1.35;
}

.market-mini-row strong,
.market-mini-row em {
    font-variant-numeric: tabular-nums;
}

.positive { color: var(--red) !important; }
.negative { color: #18805a !important; }
.neutral { color: var(--muted) !important; }

.quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
    gap: 7px;
}

.quick-grid button {
    display: flex;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-muted);
    color: var(--text);
    gap: 7px;
}

.quick-grid button:hover {
    border-color: #9eb5a8;
    background: var(--primary-soft);
    color: var(--primary);
}

.quick-grid button span {
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pinned-note {
    display: block;
    width: 100%;
    min-height: 82px;
    padding: 12px 14px;
    background: transparent;
    text-align: left;
}

.pinned-note strong,
.pinned-note span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pinned-note strong {
    font-size: 12px;
    white-space: nowrap;
}

.pinned-note span {
    display: -webkit-box;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.activity-list {
    min-height: 100px;
    padding: 6px 13px 10px;
}

.activity-row {
    display: grid;
    min-height: 34px;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.activity-row::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b7c2bc;
    content: "";
}

.activity-row span,
.activity-row time {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.view-toolbar {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
}

.segmented {
    display: inline-flex;
    max-width: 100%;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #e9eeeb;
    overflow-x: auto;
}

.segmented button {
    min-height: 28px;
    padding: 0 11px;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

.segmented button.active {
    background: #ffffff;
    color: var(--text);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(26, 43, 34, 0.1);
}

.segmented button b {
    display: inline-grid;
    min-width: 17px;
    height: 17px;
    margin-left: 4px;
    place-items: center;
    border-radius: 4px;
    background: rgba(20, 91, 64, 0.08);
    color: var(--primary);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.compact-search {
    display: flex;
    width: 220px;
    height: 34px;
    align-items: center;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    color: var(--faint);
    gap: 7px;
}

.compact-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 11px;
}

.table-panel {
    overflow: hidden;
}

.data-table {
    width: 100%;
    min-width: 820px;
}

.table-head,
.table-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) 100px 86px 110px minmax(200px, 1.3fr) 36px;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
}

.table-head {
    min-height: 38px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.table-row {
    width: 100%;
    min-height: 64px;
    border-bottom: 1px solid #edf0ee;
    background: transparent;
    text-align: left;
}

.table-row:last-child {
    border-bottom: 0;
}

.table-row:hover {
    background: #fbfcfb;
}

.table-row > span {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-table .table-head,
.customer-table .table-row {
    grid-template-columns: minmax(190px, 1.05fr) 88px minmax(160px, .95fr) minmax(180px, 1.05fr) minmax(210px, 1.25fr) 24px;
}

.ws-customer-row,
.ws-dashboard-customer,
.handoff-row[data-ws-customer],
.unified-queue-row[data-ws-customer] {
    cursor: pointer;
}

.ws-dashboard-customer:hover,
.handoff-row[data-ws-customer]:hover,
.unified-queue-row[data-ws-customer]:hover {
    background: #fbfcfb;
}

.ws-progress-cell strong,
.ws-progress-cell small,
.ws-message-cell strong,
.ws-message-cell small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-progress-cell strong,
.ws-message-cell strong {
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
}

.ws-progress-cell small,
.ws-message-cell small {
    margin-top: 3px;
    color: var(--faint);
    font-size: 10px;
}

.ws-next-cell {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal !important;
}

.customer-module-toolbar {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.customer-module-toolbar .segmented button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.customer-module-toolbar .segmented svg {
    width: 14px;
    height: 14px;
}

#customerModuleTabs {
    flex-wrap: wrap;
    overflow-x: visible;
}

.customer-module-pane {
    display: none;
}

.customer-module-pane.active {
    display: block;
}

.customer-filter-toolbar {
    margin-bottom: 10px;
}

.progress-health-panel {
    margin-bottom: 12px;
    overflow: hidden;
}

.progress-health-panel.clear {
    border-color: #c8e0d5;
    background: #f7fbf9;
}

.progress-health-heading {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 12px;
}

.progress-health-heading > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.progress-health-heading svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    color: var(--amber);
}

.progress-health-panel.clear .progress-health-heading svg {
    color: var(--primary);
}

.progress-health-heading span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.progress-health-heading strong {
    font-size: 12px;
}

.progress-health-heading small,
.progress-health-heading em {
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
}

.progress-health-counts {
    display: flex;
    padding: 0 14px 10px 43px;
    gap: 6px;
}

.progress-health-counts span,
.ws-anomaly-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-style: normal;
    font-weight: 600;
}

.progress-health-counts .high,
.progress-health-issue.high,
.ws-anomaly-badge {
    background: #fff0ef;
    color: var(--red);
}

.progress-health-counts .medium,
.progress-health-issue.medium {
    background: #fff7e8;
    color: #966715;
}

.progress-health-counts .low,
.progress-health-issue.low {
    background: #f2f4f3;
    color: var(--text-soft);
}

.progress-health-list {
    border-top: 1px solid var(--line);
}

.progress-health-customer {
    display: grid;
    width: 100%;
    min-height: 64px;
    grid-template-columns: 32px minmax(0, 1fr) auto 16px;
    align-items: center;
    padding: 9px 13px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
    text-align: left;
    gap: 10px;
}

.progress-health-customer:last-child {
    border-bottom: 0;
}

.progress-health-customer:hover {
    background: var(--surface-muted);
}

.progress-health-customer > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.progress-health-customer strong,
.progress-health-customer small,
.progress-health-customer em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-health-customer strong {
    font-size: 11px;
}

.progress-health-customer small {
    color: var(--text-soft);
    font-size: 10px;
}

.progress-health-customer em {
    color: var(--muted);
    font-size: 9px;
    font-style: normal;
}

.progress-health-customer > b {
    font-size: 9px;
    font-weight: 600;
}

.progress-health-customer > b.high { color: var(--red); }
.progress-health-customer > b.medium { color: #966715; }
.progress-health-customer > b.low { color: var(--text-soft); }

.progress-health-customer > svg {
    width: 15px;
    height: 15px;
    color: var(--muted);
}

.ws-anomaly-badge {
    gap: 3px;
}

.ws-anomaly-badge svg {
    width: 11px;
    height: 11px;
}

.ws-anomaly-detail {
    border-color: #ead7ae;
    background: #fffdf8;
}

.progress-health-issues {
    display: grid;
    padding: 0 11px 10px;
    gap: 6px;
}

.progress-health-issue {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    padding: 8px;
    border-radius: 5px;
    gap: 7px;
}

.progress-health-issue > svg {
    width: 15px;
    height: 15px;
}

.progress-health-issue > span {
    display: grid;
    gap: 2px;
}

.progress-health-issue strong {
    font-size: 10px;
}

.progress-health-issue small {
    color: inherit;
    font-size: 9px;
    line-height: 1.5;
}

.crm-metric-strip {
    display: grid;
    min-height: 82px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
}

.crm-metric-strip > div {
    display: grid;
    min-width: 0;
    align-content: center;
    padding: 12px 14px;
    border-right: 1px solid #edf0ee;
    gap: 2px;
}

.crm-metric-strip > div:last-child {
    border-right: 0;
}

.crm-metric-strip span,
.crm-metric-strip small {
    overflow: hidden;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-metric-strip strong {
    overflow: hidden;
    font-size: 18px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-effectiveness-toolbar > div {
    display: grid;
    gap: 3px;
}

.customer-effectiveness-toolbar > div > strong {
    font-size: 13px;
}

.customer-effectiveness-toolbar > div > span {
    color: var(--muted);
    font-size: 9px;
}

.compact-select {
    min-width: 126px;
    height: 34px;
    padding: 0 30px 0 10px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #ffffff;
    color: var(--text);
    font-size: 10px;
}

.effectiveness-table .table-head,
.effectiveness-table .table-row {
    grid-template-columns: minmax(190px, 1.5fr) repeat(5, minmax(92px, .72fr));
}

.effectiveness-table .table-row > span {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 2px;
}

.effectiveness-table .table-row strong,
.effectiveness-table .table-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.effectiveness-table .table-row strong {
    font-size: 10px;
}

.effectiveness-table .table-row small {
    color: var(--muted);
    font-size: 8px;
}

.positive-copy { color: #168253; }
.negative-copy { color: #ba3e38; }

.customer-history-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    align-items: start;
    gap: 12px;
}

.customer-action-log,
.customer-trash-list {
    max-height: calc(100vh - 230px);
    min-height: 280px;
    overflow-y: auto;
}

.customer-action-row,
.customer-trash-row {
    display: grid;
    min-height: 66px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #edf0ee;
    gap: 12px;
}

.customer-action-row:last-child,
.customer-trash-row:last-child {
    border-bottom: 0;
}

.customer-action-row > div,
.customer-trash-row > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.customer-action-row strong,
.customer-trash-row strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-action-row span,
.customer-action-row small,
.customer-trash-row span {
    overflow: hidden;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-action-row.pending {
    box-shadow: inset 3px 0 0 #d79527;
}

.customer-action-row.undone,
.customer-action-row.cancelled {
    opacity: .7;
}

.crm-workspace {
    display: grid;
    grid-template-columns: minmax(210px, .58fr) minmax(380px, 1.1fr) minmax(310px, .88fr);
    align-items: stretch;
    gap: 12px;
}

.crm-customer-directory,
.crm-conversation-panel,
.crm-insight-panel {
    height: min(760px, calc(100vh - 224px));
    min-height: 590px;
    overflow: hidden;
}

.crm-customer-directory {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
}

.crm-directory-search {
    display: flex;
    height: 38px;
    align-items: center;
    margin: 10px 11px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--faint);
    gap: 7px;
}

.crm-directory-search svg {
    width: 15px;
    height: 15px;
}

.crm-directory-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 11px;
}

.crm-customer-list {
    min-height: 0;
    overflow-y: auto;
    border-top: 1px solid #edf0ee;
}

.crm-customer-item {
    display: grid;
    width: 100%;
    min-height: 70px;
    grid-template-columns: 32px minmax(0, 1fr) 24px;
    align-items: center;
    padding: 9px 10px;
    border-bottom: 1px solid #edf0ee;
    background: #ffffff;
    gap: 8px;
    text-align: left;
}

.crm-customer-item:hover,
.crm-customer-item.active {
    background: #f2f7f4;
}

.crm-customer-item.active {
    box-shadow: inset 3px 0 0 var(--primary);
}

.crm-customer-item > span:nth-child(2),
.crm-customer-item strong,
.crm-customer-item small,
.crm-customer-item em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-customer-item strong {
    font-size: 11px;
}

.crm-customer-item small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
}

.crm-customer-item em {
    margin-top: 3px;
    color: var(--faint);
    font-size: 9px;
    font-style: normal;
}

.crm-priority {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 4px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 9px;
}

.crm-priority.A,
.crm-priority.B {
    background: var(--amber-soft);
    color: var(--amber);
}

.crm-conversation-panel {
    display: flex;
    flex-direction: column;
}

.crm-conversation-header,
.crm-insight-header {
    display: flex;
    min-height: 62px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 10px 13px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
    gap: 10px;
}

.crm-conversation-header .customer-avatar.large {
    width: 38px;
    height: 38px;
}

.crm-conversation-header .customer-identity small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
}

.crm-reply-notice {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #edd39f;
    background: var(--amber-soft);
    color: var(--amber);
    gap: 8px;
}

.crm-reply-notice span,
.crm-reply-notice strong,
.crm-reply-notice small {
    display: block;
    min-width: 0;
}

.crm-reply-notice strong {
    font-size: 10px;
}

.crm-reply-notice small {
    margin-top: 2px;
    font-size: 9px;
}

.crm-message-list {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 14px;
    overflow-y: auto;
    background: #f8faf9;
    gap: 9px;
}

.crm-message {
    max-width: 82%;
    align-self: flex-start;
}

.crm-message.mine {
    align-self: flex-end;
}

.crm-message p {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #e0e6e2;
    border-radius: 6px;
    background: #ffffff;
    color: #344039;
    font-size: 11px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.crm-message.mine p {
    border-color: #c9ddd2;
    background: #eaf4ee;
}

.crm-message span {
    display: block;
    margin-top: 3px;
    color: var(--faint);
    font-size: 8px;
}

.crm-message.mine span {
    text-align: right;
}

.crm-compose {
    flex: 0 0 auto;
    padding: 11px 12px;
    border-top: 1px solid var(--line);
    background: #ffffff;
}

.crm-compose > label {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.crm-compose textarea {
    width: 100%;
    min-height: 78px;
    padding: 8px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    outline: 0;
    font-size: 11px;
    line-height: 1.5;
    resize: vertical;
}

.crm-compose textarea:focus {
    border-color: #61927a;
    box-shadow: 0 0 0 3px rgba(20, 91, 64, 0.09);
}

.crm-compose-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 8px;
    gap: 7px;
}

.crm-compose-actions > span {
    min-width: 0;
    margin-right: auto;
    color: var(--faint);
    font-size: 9px;
}

.crm-insight-panel {
    overflow-y: auto;
}

.crm-insight-header {
    position: sticky;
    top: 0;
    z-index: 3;
}

.crm-insight-header h2 {
    margin: 0;
    font-size: 13px;
}

.crm-insight-header p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 9px;
}

.crm-score {
    display: grid;
    min-width: 48px;
    text-align: right;
    font-size: 21px;
    line-height: 1;
}

.crm-score small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 500;
}

.crm-insight-summary {
    display: flex;
    padding: 10px 12px;
    border-bottom: 1px solid #edf0ee;
    background: var(--surface-muted);
    gap: 6px;
}

.crm-timezone-card {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 28px;
    align-items: center;
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    background: #fbfcfb;
    gap: 10px;
}

.crm-timezone-card.good { border-left-color: var(--primary); background: #f7fbf8; }
.crm-timezone-card.caution { border-left-color: var(--amber); background: #fffbf1; }
.crm-timezone-card.quiet { border-left-color: var(--red); background: #fff8f7; }

.crm-timezone-clock span,
.crm-timezone-clock strong,
.crm-timezone-clock em,
.crm-timezone-detail strong,
.crm-timezone-detail span,
.crm-timezone-detail small {
    display: block;
    min-width: 0;
}

.crm-timezone-clock span {
    display: flex;
    align-items: center;
    color: var(--muted);
    font-size: 8px;
    gap: 4px;
}

.crm-timezone-clock span svg { width: 11px; height: 11px; }
.crm-timezone-clock strong { margin-top: 4px; font-size: 19px; font-variant-numeric: tabular-nums; line-height: 1; }
.crm-timezone-clock em { margin-top: 4px; color: var(--muted); font-size: 9px; font-style: normal; }
.crm-timezone-detail { min-width: 0; }
.crm-timezone-detail strong,
.crm-timezone-detail span,
.crm-timezone-detail small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-timezone-detail strong { font-size: 10px; }
.crm-timezone-detail span,
.crm-timezone-detail small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }

.ws-timezone-summary {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    background: #fbfcfb;
    gap: 12px;
}

.ws-timezone-summary.good { border-left-color: var(--primary); background: #f7fbf8; }
.ws-timezone-summary.caution { border-left-color: var(--amber); background: #fffbf1; }
.ws-timezone-summary.quiet { border-left-color: var(--red); background: #fff8f7; }
.ws-timezone-summary span,
.ws-timezone-summary strong,
.ws-timezone-summary b { display: block; min-width: 0; }
.ws-timezone-summary span { color: var(--muted); font-size: 9px; line-height: 1.4; }
.ws-timezone-summary strong { margin-top: 3px; font-size: 18px; font-variant-numeric: tabular-nums; }
.ws-timezone-summary b { margin-bottom: 3px; font-size: 10px; }

.crm-insight-section {
    padding: 13px;
    border-bottom: 1px solid var(--line);
}

.crm-insight-section:last-child {
    border-bottom: 0;
}

.crm-playbook-focus {
    background: #fbfdfc;
}

.crm-section-heading {
    display: flex;
    min-height: 28px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 9px;
    gap: 8px;
}

.crm-section-heading strong,
.crm-section-heading span {
    display: block;
}

.crm-section-heading strong {
    font-size: 11px;
}

.crm-section-heading span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

.crm-section-heading > b {
    color: var(--primary);
    font-size: 11px;
}

.crm-section-heading .icon-button {
    width: 28px;
    height: 28px;
}

.crm-current-step {
    margin: 10px 0;
    padding: 10px;
    border-left: 3px solid var(--primary);
    background: var(--primary-soft);
}

.crm-current-step span,
.crm-current-step strong {
    display: block;
}

.crm-current-step span {
    color: var(--primary);
    font-size: 8px;
    font-weight: 700;
}

.crm-current-step strong {
    margin-top: 4px;
    font-size: 11px;
}

.crm-current-step p,
.crm-summary-text,
.crm-subtext,
.crm-profile-note {
    margin: 6px 0 0;
    color: #3d4943;
    font-size: 10px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.crm-script-cards,
.crm-quick-replies,
.crm-library-cards {
    display: grid;
    gap: 7px;
}

.crm-script-cards article,
.crm-quick-replies article,
.crm-library-cards article {
    padding: 9px;
    border: 1px solid #dfe6e2;
    border-radius: 6px;
    background: #ffffff;
}

.crm-script-cards article > div,
.crm-quick-replies article > div,
.crm-library-cards article > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.crm-script-cards b,
.crm-quick-replies b,
.crm-library-cards b {
    font-size: 9px;
}

.crm-script-cards .icon-button,
.crm-quick-replies .icon-button,
.crm-library-cards .icon-button {
    width: 25px;
    height: 25px;
}

.crm-script-cards p,
.crm-quick-replies p,
.crm-library-cards p {
    margin: 5px 0 0;
    color: #35413c;
    font-size: 10px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.crm-full-button {
    width: 100%;
    justify-content: center;
    margin-top: 9px;
}

.crm-section-empty {
    margin: 0;
    color: var(--faint);
    font-size: 10px;
    line-height: 1.5;
}

.crm-fact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid #edf0ee;
    border-left: 1px solid #edf0ee;
}

.crm-fact-grid > div {
    min-width: 0;
    padding: 7px;
    border-right: 1px solid #edf0ee;
    border-bottom: 1px solid #edf0ee;
}

.crm-fact-grid span,
.crm-fact-grid strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-fact-grid span {
    color: var(--muted);
    font-size: 8px;
}

.crm-fact-grid strong {
    margin-top: 3px;
    font-size: 10px;
}

.crm-tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
    gap: 5px;
}

.crm-tags span {
    padding: 3px 6px;
    border: 1px solid #dce5df;
    border-radius: 4px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 8px;
}

.crm-subtext b {
    color: var(--text);
}

.crm-review-list,
.crm-memory-list,
.crm-task-list,
.crm-channel-list {
    display: grid;
    gap: 7px;
}

.crm-review-list article,
.crm-memory-list article {
    padding: 9px;
    border: 1px solid #e1e6e3;
    border-radius: 6px;
    background: var(--surface-muted);
}

.crm-review-list article > div,
.crm-memory-list article > div,
.crm-review-list footer,
.crm-memory-list footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.crm-review-list strong,
.crm-memory-list b {
    font-size: 9px;
}

.crm-review-list span,
.crm-memory-list span,
.crm-review-list small {
    color: var(--muted);
    font-size: 8px;
}

.crm-review-list p,
.crm-memory-list p {
    margin: 5px 0;
    font-size: 9px;
    line-height: 1.5;
}

.crm-review-list footer,
.crm-memory-list footer {
    justify-content: flex-end;
    margin-top: 7px;
}

.crm-review-list footer button,
.crm-memory-list footer button,
.crm-channel-list button,
.crm-step-title button {
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #ffffff;
    color: var(--muted);
    font-size: 8px;
}

.crm-review-list footer button.primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.crm-task-list article,
.crm-channel-list article {
    display: grid;
    min-height: 42px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #edf0ee;
    gap: 8px;
}

.crm-task-list article:last-child,
.crm-channel-list article:last-child {
    border-bottom: 0;
}

.crm-task-list strong,
.crm-task-list span,
.crm-channel-list strong,
.crm-channel-list span {
    display: block;
    min-width: 0;
}

.crm-task-list strong,
.crm-channel-list strong {
    font-size: 9px;
}

.crm-task-list span,
.crm-channel-list span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.4;
}

.crm-task-list svg {
    width: 16px;
    color: var(--primary);
}

.crm-playbook-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.crm-playbook-directory {
    position: sticky;
    top: 78px;
    display: grid;
    max-height: calc(100vh - 110px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.crm-playbook-list {
    min-height: 160px;
    overflow-y: auto;
}

.crm-playbook-item {
    display: grid;
    width: 100%;
    min-height: 70px;
    padding: 10px 12px;
    border-bottom: 1px solid #edf0ee;
    background: #ffffff;
    gap: 3px;
    text-align: left;
}

.crm-playbook-item:hover,
.crm-playbook-item.active {
    background: #f2f7f4;
}

.crm-playbook-item.active {
    box-shadow: inset 3px 0 0 var(--primary);
}

.crm-playbook-item strong {
    font-size: 10px;
}

.crm-playbook-item span,
.crm-playbook-item small {
    color: var(--muted);
    font-size: 8px;
}

.crm-import-playbook {
    justify-content: center;
    margin: 10px;
}

.crm-playbook-detail {
    min-width: 0;
}

.crm-playbook-hero {
    display: flex;
    min-height: 120px;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border: 1px solid #cddbd3;
    border-radius: var(--radius);
    background: #eaf3ee;
    gap: 18px;
}

.crm-playbook-hero > div:first-child {
    min-width: 0;
}

.crm-playbook-hero span {
    color: var(--primary);
    font-size: 9px;
    font-weight: 700;
}

.crm-playbook-hero h2 {
    margin: 5px 0;
    font-size: 18px;
}

.crm-playbook-hero p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.55;
}

.crm-playbook-hero-actions {
    display: grid;
    flex: 0 0 auto;
    justify-items: end;
    gap: 9px;
}

.crm-playbook-hero-actions strong {
    font-size: 18px;
}

.crm-playbook-days {
    display: grid;
    margin-top: 12px;
    gap: 12px;
}

.crm-playbook-day {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
}

.crm-playbook-day > header {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-muted);
}

.crm-playbook-day > header span,
.crm-playbook-day > header h3 {
    display: block;
    margin: 0;
}

.crm-playbook-day > header span {
    color: var(--primary);
    font-size: 8px;
    font-weight: 700;
}

.crm-playbook-day > header h3 {
    margin-top: 2px;
    font-size: 12px;
}

.crm-playbook-day > header b {
    color: var(--muted);
    font-size: 9px;
}

.crm-playbook-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 13px 14px;
    border-bottom: 1px solid #edf0ee;
    gap: 11px;
}

.crm-playbook-step:last-child {
    border-bottom: 0;
}

.crm-step-number {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 5px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 9px;
    font-weight: 700;
}

.crm-step-main {
    min-width: 0;
}

.crm-step-title {
    display: flex;
    align-items: center;
    gap: 7px;
}

.crm-step-title strong {
    min-width: 0;
    font-size: 11px;
}

.crm-step-title button {
    margin-left: auto;
}

.crm-step-main > p {
    margin: 5px 0 8px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
}

.crm-step-main details {
    margin: 8px 0;
}

.crm-step-main summary {
    color: var(--primary);
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
}

.crm-library-cards {
    margin-top: 8px;
}

.crm-step-main > small {
    display: block;
    color: var(--faint);
    font-size: 8px;
    line-height: 1.5;
}

.task-panel {
    overflow: hidden;
}

.task-list {
    min-height: 160px;
}

.task-row {
    display: grid;
    grid-template-columns: 34px minmax(230px, 1.4fr) 90px 110px 110px 36px;
    min-height: 66px;
    align-items: center;
    padding: 8px 15px;
    border-bottom: 1px solid #edf0ee;
    gap: 11px;
}

.task-row:last-child {
    border-bottom: 0;
}

.task-row.completed .task-copy strong {
    color: var(--faint);
    text-decoration: line-through;
}

.task-row > span {
    color: var(--muted);
    font-size: 10px;
}

.quote-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 14px;
    gap: 10px;
}

.quote-card {
    min-width: 0;
    min-height: 112px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
}

.quote-card span,
.quote-card strong,
.quote-card em,
.quote-card small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quote-card span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.quote-card strong {
    margin-top: 11px;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.quote-card em {
    margin-top: 5px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.quote-card small {
    margin-top: 7px;
    color: var(--faint);
    font-size: 10px;
    line-height: 1.35;
}

.quote-card.stale small {
    color: var(--amber);
}

.market-news-header {
    align-items: center;
}

.news-filters {
    display: flex;
    gap: 8px;
}

.news-filters select {
    height: 34px;
    padding: 0 28px 0 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    font-size: 11px;
}

.market-tabs-toolbar {
    margin-top: -4px;
}

.sync-pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #ffffff;
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
}

.sync-pill.ok {
    border-color: #bad5c6;
    background: var(--primary-soft);
    color: var(--primary);
}

.sync-pill.running,
.sync-pill.warning {
    border-color: #edd39f;
    background: var(--amber-soft);
    color: var(--amber);
}

.news-operation-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 78px;
    margin-bottom: 12px;
    gap: 8px;
}

.news-operation-metric {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
}

.news-operation-metric span,
.news-operation-metric strong,
.news-operation-metric small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-operation-metric span,
.news-operation-metric small {
    color: var(--muted);
    font-size: 10px;
}

.news-operation-metric strong {
    margin: 5px 0 3px;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

.news-schedule-panel {
    margin-bottom: 12px;
}

.news-schedule-form {
    display: grid;
    grid-template-columns: minmax(145px, 1fr) minmax(130px, 0.7fr) minmax(165px, 1fr) minmax(120px, 0.6fr) minmax(110px, 0.55fr) auto;
    align-items: end;
    padding: 14px 16px;
    border-top: 1px solid var(--line);
    gap: 10px;
}

.news-schedule-form .checkbox-field {
    align-self: center;
}

.news-run-actions {
    display: flex;
    min-height: 52px;
    align-items: center;
    padding: 8px 16px;
    border-top: 1px solid var(--line);
    gap: 8px;
}

.news-run-actions p {
    margin-left: auto;
    color: var(--muted);
    font-size: 10px;
}

.news-operation-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 12px;
    gap: 12px;
}

.news-admin-list,
.news-log-list {
    min-height: 82px;
}

.news-admin-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 58px;
    align-items: center;
    padding: 9px 14px;
    border-top: 1px solid var(--line);
    gap: 10px;
}

.news-admin-copy,
.news-admin-copy strong,
.news-admin-copy span {
    min-width: 0;
}

.news-admin-copy strong,
.news-admin-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-admin-copy strong {
    font-size: 11px;
}

.news-admin-copy span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}

.news-admin-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.news-toggle-button {
    min-width: 48px;
    min-height: 27px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 10px;
}

.news-toggle-button.active {
    border-color: #bad5c6;
    background: var(--primary-soft);
    color: var(--primary);
}

.news-log-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    min-height: 49px;
    align-items: center;
    padding: 8px 14px;
    border-top: 1px solid var(--line);
    gap: 9px;
}

.news-log-row > span,
.news-log-row > time {
    color: var(--muted);
    font-size: 10px;
}

.news-log-copy strong,
.news-log-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-log-copy strong {
    font-size: 11px;
}

.news-log-copy span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}

.content-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 180px;
    align-items: start;
    gap: 12px;
}

.content-card,
.note-card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    text-align: left;
}

.content-card {
    display: grid;
    min-height: 188px;
    grid-template-rows: auto 1fr auto;
    padding: 15px;
}

.content-card:hover,
.note-card:hover {
    border-color: #aebbb3;
    box-shadow: 0 5px 16px rgba(30, 48, 38, 0.05);
}

.content-card header,
.content-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.content-card h3 {
    margin: 13px 0 6px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-card p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.content-card footer {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #edf0ee;
    color: var(--faint);
    font-size: 10px;
    line-height: 1.35;
}

.library-pane {
    display: none;
}

.library-pane.active {
    display: block;
}

.notes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 160px;
    align-items: start;
    gap: 12px;
}

.note-card {
    display: grid;
    min-height: 176px;
    grid-template-rows: auto 1fr auto;
    padding: 15px;
}

.note-card header,
.note-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.note-card h3 {
    margin: 12px 0 7px;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-card p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.note-card footer {
    margin-top: 12px;
    color: var(--faint);
    font-size: 10px;
    line-height: 1.35;
}

.file-panel {
    overflow: hidden;
}

.file-list {
    min-height: 160px;
}

.file-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 100px 130px 70px;
    min-height: 62px;
    align-items: center;
    padding: 8px 15px;
    border-bottom: 1px solid #edf0ee;
    gap: 10px;
}

.file-row:last-child {
    border-bottom: 0;
}

.file-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 6px;
    background: var(--blue-soft);
    color: var(--blue);
}

.file-copy {
    min-width: 0;
}

.file-copy strong,
.file-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-copy strong {
    font-size: 11px;
}

.file-copy span,
.file-row > span {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}

.file-actions {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
}

.system-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
}

.system-password-panel {
    grid-column: 1 / -1;
}

.system-password-panel .settings-form {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
}

.sync-status-good {
    color: var(--primary);
}

.sync-status-warn {
    color: var(--amber);
}

.sync-status-off {
    color: var(--red);
}

.service-list {
    min-height: 180px;
    padding: 8px 15px;
}

.service-row {
    display: grid;
    min-height: 33px;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    border-bottom: 1px solid #edf0ee;
    gap: 9px;
}

.service-row:last-child {
    border-bottom: 0;
}

.service-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
}

.service-row.ok .service-dot {
    background: #2f9368;
}

.service-row.warning .service-dot {
    background: var(--amber);
}

.service-row span,
.service-row strong {
    font-size: 11px;
    line-height: 1.4;
}

.service-row span:last-child {
    color: var(--muted);
}

.disk-status,
.system-detail {
    min-height: 180px;
    padding: 20px;
}

.disk-number {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.disk-number strong {
    font-size: 28px;
}

.disk-number span {
    color: var(--muted);
    font-size: 11px;
}

.progress-track {
    height: 8px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 4px;
    background: #e5eae7;
}

.progress-track span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--primary);
}

.disk-legend,
.system-kv {
    display: grid;
    grid-template-columns: 1fr auto;
    margin-top: 12px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
    gap: 8px;
}

.system-jump {
    display: flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding: 0;
    border-top: 1px solid var(--line);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
}

.system-jump svg {
    width: 15px;
    height: 15px;
}

.settings-form {
    display: grid;
    padding: 16px;
    gap: 11px;
}

.settings-form label,
.form-field {
    display: grid;
    gap: 5px;
}

.settings-form label span,
.form-field > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.settings-form input,
.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    outline: 0;
    background: #ffffff;
    font-size: 12px;
}

.form-field textarea {
    min-height: 92px;
    resize: vertical;
    line-height: 1.6;
}

.settings-form input:focus,
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color: #61927a;
    box-shadow: 0 0 0 3px rgba(20, 91, 64, 0.09);
}

.checkbox-field {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: 8px;
}

.checkbox-field input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(12, 24, 18, 0.45);
}

.search-overlay {
    align-items: start;
    padding-top: 11vh;
}

.search-dialog {
    width: min(650px, 100%);
    max-height: 72vh;
    overflow: hidden;
    border: 1px solid #bfcac4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(12, 30, 20, 0.24);
}

.search-input-row {
    display: grid;
    min-height: 58px;
    grid-template-columns: 24px minmax(0, 1fr) 36px;
    align-items: center;
    padding: 0 12px 0 17px;
    border-bottom: 1px solid var(--line);
    gap: 8px;
}

.search-input-row input {
    width: 100%;
    height: 56px;
    border: 0;
    outline: 0;
    font-size: 14px;
}

.search-results {
    max-height: calc(72vh - 58px);
    overflow-y: auto;
    padding: 8px;
}

.search-hint {
    padding: 30px;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

.search-result {
    display: grid;
    width: 100%;
    min-height: 52px;
    grid-template-columns: 30px minmax(0, 1fr) 24px;
    align-items: center;
    padding: 7px 9px;
    border-radius: 6px;
    background: transparent;
    gap: 9px;
    text-align: left;
}

.search-result:hover {
    background: var(--surface-muted);
}

.search-result-copy {
    min-width: 0;
}

.search-result-copy strong,
.search-result-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-copy strong {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.search-result-copy span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}

.ai-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 100;
    display: grid;
    width: min(430px, 100vw);
    grid-template-rows: auto auto 1fr auto;
    background: #ffffff;
    box-shadow: -16px 0 44px rgba(16, 34, 24, 0.16);
    transform: translateX(105%);
    transition: transform 220ms ease;
}

.ai-drawer.open {
    transform: translateX(0);
}

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(12, 24, 18, 0.32);
}

.ai-drawer > header {
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

.ai-drawer > header > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-drawer h2,
.ai-drawer p {
    margin: 0;
}

.ai-drawer h2 {
    font-size: 14px;
}

.ai-drawer p {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}

.ai-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    gap: 7px;
}

.ai-quick-actions button {
    display: flex;
    min-height: 36px;
    align-items: center;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-muted);
    color: var(--text);
    gap: 7px;
    font-size: 11px;
    line-height: 1.3;
}

.ai-quick-actions button:hover {
    border-color: #a6b9ae;
    background: var(--primary-soft);
}

.ai-conversation {
    overflow-y: auto;
    padding: 18px 16px;
}

.ai-message {
    width: fit-content;
    max-width: 88%;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.ai-message.assistant {
    border: 1px solid var(--line);
    background: var(--surface-muted);
    white-space: normal;
}

.ai-message.user {
    margin-left: auto;
    background: var(--primary);
    color: #ffffff;
}

.ai-message.loading::after {
    content: " …";
    animation: pulse 800ms ease-in-out infinite alternate;
}

.ai-rich-text > :first-child {
    margin-top: 0;
}

.ai-rich-text > :last-child {
    margin-bottom: 0;
}

.ai-rich-text h3 {
    margin: 14px 0 5px;
    font-size: 13px;
    line-height: 1.5;
}

.ai-rich-text p {
    margin: 0 0 8px;
}

.ai-rich-text ul,
.ai-rich-text ol {
    margin: 4px 0 10px;
    padding-left: 20px;
}

.ai-rich-text li {
    margin: 3px 0;
}

.ai-rich-text code {
    padding: 1px 4px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}

.ai-rich-text hr {
    margin: 12px 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.ai-sources {
    margin-top: 13px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.ai-sources h4 {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 10px;
}

.ai-sources a,
.ai-sources > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    align-items: center;
    min-height: 44px;
    padding: 6px 0;
    border-top: 1px solid #e8ece9;
    gap: 7px;
}

.ai-sources a:hover strong {
    color: var(--primary);
}

.ai-sources span,
.ai-sources strong,
.ai-sources small {
    display: block;
    min-width: 0;
}

.ai-sources b {
    color: var(--primary);
    font-size: 9px;
}

.ai-sources strong {
    overflow: hidden;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-sources small {
    margin-top: 2px;
    color: var(--faint);
    font-size: 9px;
}

.ai-result-actions {
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    gap: 6px;
}

.ai-result-actions button {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 9px;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background: #ffffff;
    color: var(--text);
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
}

.ai-result-actions button:hover:not(:disabled) {
    border-color: #9db2a6;
    color: var(--primary);
}

.ai-result-actions button:disabled {
    background: var(--primary-soft);
    color: var(--primary);
    cursor: default;
}

.ai-result-actions svg {
    width: 13px;
    height: 13px;
}

@keyframes pulse {
    from { opacity: 0.25; }
    to { opacity: 1; }
}

.ai-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: end;
    padding: 12px 14px max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: #ffffff;
    gap: 8px;
}

.ai-form textarea {
    width: 100%;
    min-height: 42px;
    max-height: 130px;
    padding: 9px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    outline: 0;
    resize: none;
    font-size: 12px;
    line-height: 1.5;
}

.ai-form .primary-button {
    width: 40px;
    height: 40px;
    padding: 0;
}

.modal-card {
    width: min(680px, 100%);
    max-height: min(86vh, 820px);
    overflow-y: auto;
    border: 1px solid #bcc8c1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(12, 30, 20, 0.24);
}

.modal-card > header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 17px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.modal-card h2 {
    margin: 2px 0 0;
    font-size: 16px;
}

.modal-card form {
    padding: 17px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.form-field.full {
    grid-column: 1 / -1;
}

.modal-card footer {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    gap: 8px;
}

.ws-customer-modal {
    width: min(760px, 100%);
}

.ws-customer-detail {
    padding: 16px 18px 0;
}

.ws-detail-summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    padding-bottom: 15px;
    gap: 10px;
}

.customer-avatar.large {
    width: 42px;
    height: 42px;
    font-size: 13px;
}

.ws-detail-summary > div strong,
.ws-detail-summary > div span {
    display: block;
}

.ws-detail-summary > div strong {
    font-size: 13px;
}

.ws-detail-summary > div span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
}

.ws-reply-alert {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    margin-bottom: 12px;
    padding: 10px 11px;
    border: 1px solid #edd39f;
    border-radius: 6px;
    background: var(--amber-soft);
    color: var(--amber);
    gap: 8px;
}

.ws-reply-alert svg {
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.ws-reply-alert strong,
.ws-reply-alert span {
    display: block;
}

.ws-reply-alert strong {
    font-size: 11px;
}

.ws-reply-alert span {
    margin-top: 2px;
    color: #76540c;
    font-size: 10px;
    line-height: 1.45;
}

.ws-detail-section {
    padding: 13px 0;
    border-top: 1px solid #edf0ee;
}

.ws-detail-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 9px;
    gap: 12px;
}

.ws-detail-heading strong {
    font-size: 12px;
}

.ws-detail-heading span {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-detail-progress {
    height: 5px;
    overflow: hidden;
    border-radius: 3px;
    background: #e7ece9;
}

.ws-detail-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.ws-detail-progress-copy {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
}

.ws-detail-progress-copy strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.ws-detail-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    min-height: 34px;
    align-items: start;
    padding: 7px 0;
    border-bottom: 1px solid #f0f2f1;
    gap: 10px;
}

.ws-detail-row:last-child {
    border-bottom: 0;
}

.ws-detail-row span {
    color: var(--muted);
    font-size: 10px;
}

.ws-detail-row strong {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ws-detail-message {
    margin: 0;
    padding: 10px;
    border-left: 3px solid #b8cfc3;
    background: var(--surface-muted);
    color: #35413c;
    font-size: 11px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.ws-section-empty {
    margin: 0;
    padding: 10px 0;
    color: var(--muted);
    font-size: 10px;
}

.ws-memory-list {
    display: grid;
    margin-top: 9px;
    border-top: 1px solid #edf0ee;
}

.ws-memory-list span {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    padding: 8px 0;
    border-bottom: 1px solid #edf0ee;
    color: #39443f;
    font-size: 10px;
    line-height: 1.5;
    gap: 10px;
}

.ws-memory-list b {
    color: var(--muted);
    font-weight: 500;
}

.ws-current-topic {
    display: grid;
    margin-top: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #edf0ee;
    gap: 3px;
}

.ws-current-topic b {
    font-size: 12px;
}

.ws-current-topic span {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
}

.ws-script-list {
    display: grid;
}

.ws-script-list > div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    padding: 10px 0;
    border-bottom: 1px solid #edf0ee;
    gap: 10px;
}

.ws-script-list > div > span {
    color: var(--primary-strong);
    font-size: 10px;
    font-weight: 700;
}

.ws-script-list p,
.ws-chat-list p {
    margin: 0;
    color: #35413c;
    font-size: 11px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ws-chat-list {
    display: grid;
    gap: 10px;
}

.ws-chat-list > div {
    max-width: 88%;
    padding: 8px 10px;
    border: 1px solid #e3e8e5;
    border-radius: 6px;
    background: var(--surface-muted);
}

.ws-chat-list > div.mine {
    justify-self: end;
    border-color: #cfe0d7;
    background: #eef6f1;
}

.ws-chat-list span {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 9px;
}

.ws-customer-modal > footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    margin: 0;
    padding: 12px 18px;
    background: #ffffff;
}

button svg[data-lucide="loader-circle"] {
    animation: loading 1s linear infinite;
}

.modal-footnote {
    overflow: hidden;
    color: var(--faint);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-error {
    min-height: 16px;
    margin: 8px 0 0;
    color: var(--red);
    font-size: 10px;
}

.quick-menu {
    position: fixed;
    z-index: 70;
    top: 58px;
    right: 24px;
    display: grid;
    width: 190px;
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: #ffffff;
    box-shadow: var(--shadow);
    gap: 2px;
}

.quick-menu button {
    display: flex;
    min-height: 38px;
    align-items: center;
    padding: 0 9px;
    border-radius: 5px;
    background: transparent;
    gap: 9px;
    text-align: left;
}

.quick-menu button:hover {
    background: var(--surface-muted);
}

.quick-menu button span {
    font-size: 11px;
}

.mobile-menu {
    display: none;
}

.quick-menu .menu-danger {
    margin-top: 3px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 5px 5px;
    color: var(--red);
}

.toast-region {
    position: fixed;
    z-index: 150;
    right: 18px;
    bottom: 18px;
    display: grid;
    width: min(330px, calc(100vw - 36px));
    gap: 8px;
}

.toast {
    display: grid;
    min-height: 48px;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    padding: 9px 11px;
    border: 1px solid #afbeb5;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: var(--shadow);
    color: var(--text);
    gap: 8px;
    font-size: 11px;
    line-height: 1.4;
    animation: toast-in 180ms ease-out;
}

.toast.error {
    border-color: #e9b6b3;
    color: var(--red);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-body {
    min-height: 100vh;
    background: #eef2ef;
}

.login-shell {
    display: grid;
    width: min(920px, calc(100% - 36px));
    min-height: 510px;
    grid-template-columns: 1.05fr 0.95fr;
    margin: 9vh auto 30px;
    overflow: hidden;
    border: 1px solid #cbd5cf;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 70px rgba(20, 52, 36, 0.12);
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 48px;
    background: #123b2d;
    color: #ffffff;
}

.brand-mark-large {
    width: 46px;
    height: 46px;
    font-size: 22px;
}

.login-brand p {
    margin: 24px 0 6px;
    color: #a8c2b6;
    font-size: 10px;
    font-weight: 700;
}

.login-brand h1 {
    margin: 0;
    font-size: 32px;
}

.login-brand span {
    margin-top: 12px;
    color: #c0d3ca;
    font-size: 12px;
}

.login-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px;
}

.login-heading h2 {
    margin: 0;
    font-size: 23px;
}

.login-heading p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.login-form {
    display: grid;
    margin-top: 28px;
    gap: 16px;
}

.login-form label {
    display: grid;
    gap: 6px;
}

.login-form label > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.input-with-icon {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 34px;
    min-height: 42px;
    align-items: center;
    padding: 0 5px 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    gap: 6px;
}

.input-with-icon:focus-within {
    border-color: #61927a;
    box-shadow: 0 0 0 3px rgba(20, 91, 64, 0.09);
}

.input-with-icon > svg {
    color: var(--faint);
}

.input-with-icon input {
    width: 100%;
    min-width: 0;
    height: 40px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 12px;
}

.input-action {
    width: 30px;
    height: 30px;
}

.login-button {
    min-height: 43px;
    justify-content: space-between;
    margin-top: 2px;
    padding: 0 14px;
}

.login-footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px 0 0;
    color: var(--faint);
    font-size: 10px;
    line-height: 1.4;
    gap: 5px;
}

.login-footnote svg {
    width: 14px;
    height: 14px;
}

.empty-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    text-align: center;
}

.empty-page strong {
    color: var(--line-strong);
    font-size: 70px;
}

.empty-page h1 {
    margin: 0 0 24px;
    font-size: 20px;
}

@media (max-width: 1180px) {
    :root { --sidebar-width: 196px; }
    .main-content { padding-right: 20px; padding-left: 20px; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .content-board,
    .notes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .customer-row { grid-template-columns: minmax(140px, 0.8fr) 90px minmax(140px, 1fr) 82px 28px; }
    .news-operation-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .news-schedule-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .crm-metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .crm-metric-strip > div:nth-child(3) { border-right: 0; }
    .crm-metric-strip > div:nth-child(-n+3) { border-bottom: 1px solid #edf0ee; }
    .crm-workspace { grid-template-columns: 230px minmax(0, 1fr); }
    .crm-insight-panel { grid-column: 1 / -1; height: auto; min-height: 0; max-height: none; }
}

@media (max-width: 900px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-side > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .desktop-table { overflow-x: auto; }
    .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .news-operation-columns { grid-template-columns: 1fr; }
    .news-schedule-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-playbook-layout { grid-template-columns: 210px minmax(0, 1fr); }
    .customer-history-grid { grid-template-columns: 1fr; }
    .customer-action-log,
    .customer-trash-list { max-height: 440px; }
}

@media (max-width: 768px) {
    :root { --topbar-height: 56px; }
    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #f3f5f4;
    }
    .app-body { min-height: 0; }
    .app-shell {
        display: grid;
        width: 100%;
        height: 100dvh;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr) calc(60px + env(safe-area-inset-bottom));
    }
    .sidebar { display: none; }
    .workspace {
        height: 100%;
        min-height: 0;
        margin-left: 0;
        padding-bottom: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scroll-padding-top: calc(var(--topbar-height) + 10px);
        -webkit-overflow-scrolling: touch;
    }
    .topbar {
        height: var(--topbar-height);
        padding: 0 12px;
        gap: 10px;
    }
    .mobile-brand {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 8px;
    }
    .mobile-brand .brand-mark { width: 29px; height: 29px; background: var(--primary); color: #ffffff; font-size: 14px; }
    .mobile-brand strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .search-trigger {
        width: 34px;
        height: 34px;
        margin-left: auto;
        justify-content: center;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .search-trigger span,
    .search-trigger kbd { display: none; }
    .top-actions { gap: 2px; }
    #quickAdd span { display: none; }
    #quickAdd { width: 34px; min-height: 34px; padding: 0; }
    #refreshView { display: none; }
    .mobile-only { display: inline-grid !important; }
    .desktop-only { display: none !important; }
    .main-content { max-width: none; padding: 18px 12px 24px; }
    .page-heading { min-height: 58px; margin-bottom: 14px; }
    .page-heading h1,
    .dashboard-heading h1 { font-size: 20px; }
    .page-heading p { font-size: 11px; }
    .inline-heading { align-items: flex-end; }
    .inline-heading > .primary-button,
    .heading-actions > .primary-button,
    .inline-heading > .secondary-button { width: 34px; min-height: 34px; padding: 0; overflow: hidden; }
    .inline-heading > .secondary-button { display: none; }
    .inline-heading > .primary-button:not(:has(svg)),
    .heading-actions > .primary-button:not(:has(svg)) { width: auto; padding: 0 10px; }
    .inline-heading > .primary-button svg ~ *,
    .heading-actions > .primary-button svg ~ * { display: none; }
    .heading-actions .secondary-button { display: none; }
    .heading-actions #refreshNews {
        display: inline-grid;
        width: 34px;
        min-height: 34px;
        padding: 0;
        place-items: center;
    }
    .heading-actions #refreshNews span { display: none; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .metric-card { min-height: 88px; grid-template-columns: 34px minmax(0, 1fr); padding: 11px; gap: 9px; }
    .metric-icon { width: 34px; height: 34px; }
    .metric-card strong { font-size: 21px; }
    .metric-card em { display: none; }
    .dashboard-grid { gap: 10px; }
    .dashboard-main,
    .dashboard-side { gap: 10px; }
    .dashboard-side { grid-template-columns: 1fr; }
    .dashboard-side > :last-child:nth-child(odd) { grid-column: auto; }
    .panel-header { min-height: 53px; padding: 10px 12px; }
    .focus-row { grid-template-columns: 28px minmax(0, 1fr) auto; min-height: 58px; padding: 8px 10px; }
    .focus-row > .icon-button { display: none; }
    .unified-queue-row .queue-origin { display: none; }
    .handoff-head { display: none; }
    .omission-check { margin: 9px 10px; }
    .omission-heading { align-items: flex-start; }
    .omission-heading em { max-width: 120px; text-align: right; }
    .omission-copy small,
    .omission-copy em { white-space: normal; }
    .omission-time { align-self: start; padding-top: 2px; }
    .handoff-changes { align-items: flex-start; flex-direction: column; }
    .handoff-list { display: grid; gap: 8px; padding: 8px 0; }
    .handoff-row {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 0;
        margin: 0 10px;
        padding: 11px;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: #ffffff;
        gap: 9px;
    }
    .handoff-row > .handoff-cell {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: 72px minmax(0, 1fr);
        align-items: start;
        padding-top: 8px;
        border-top: 1px solid #edf0ee;
        gap: 2px 8px;
    }
    .handoff-row > .handoff-cell::before {
        display: block;
        grid-column: 1;
        grid-row: 1 / span 2;
        color: var(--muted);
        font-size: 10px;
        font-weight: 600;
    }
    .handoff-row > .handoff-cell b,
    .handoff-row > .handoff-cell span { grid-column: 2; }
    .handoff-row > .handoff-cell.last span,
    .handoff-row > .handoff-cell.next span { display: none; }
    .handoff-row > .handoff-cell.topic::before { content: '聊到哪里'; }
    .handoff-row > .handoff-cell.last::before { content: '客户最后说'; }
    .handoff-row > .handoff-cell.next::before { content: '下次从这里继续'; }
    .customer-row { grid-template-columns: minmax(140px, 1fr) auto 28px; min-height: 58px; padding: 7px 10px; gap: 8px; }
    .customer-row .next-action,
    .customer-row > .date-chip { display: none; }
    .news-item { padding: 9px 11px; }
    .quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .quick-grid button { min-height: 54px; flex-direction: column; justify-content: center; gap: 5px; }
    .activity-list { padding-right: 10px; padding-left: 10px; }
    .view-toolbar { display: grid; margin-bottom: 10px; }
    .segmented { width: 100%; }
    .segmented button { flex: 1 0 auto; }
    .compact-search { width: 100%; }
    .table-panel { border: 0; background: transparent; }
    .desktop-table { display: none; }
    .mobile-list { display: grid; gap: 8px; }
    .customer-module-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
    .customer-module-toolbar .segmented { width: auto; }
    .customer-module-toolbar .segmented button { padding: 0 9px; }
    .customer-module-toolbar .segmented button svg { display: none; }
    #customerModuleTabs { width: 100%; }
    #customerModuleTabs button { flex: 1 1 calc(33.333% - 6px); }
    .customer-effectiveness-toolbar { display: flex; align-items: flex-end; }
    .customer-effectiveness-toolbar .compact-select { flex: 0 0 auto; }
    .customer-filter-toolbar { display: grid; }
    .progress-health-heading { align-items: flex-start; padding: 10px 12px; }
    .progress-health-heading .text-button { flex: 0 0 auto; }
    .progress-health-counts { padding-right: 12px; padding-left: 12px; }
    .progress-health-customer { grid-template-columns: 32px minmax(0, 1fr) 15px; }
    .progress-health-customer > b { display: none; }
    .progress-health-customer small,
    .progress-health-customer em { white-space: normal; }
    .crm-metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-metric-strip > div,
    .crm-metric-strip > div:nth-child(3) { border-right: 1px solid #edf0ee; border-bottom: 1px solid #edf0ee; }
    .crm-metric-strip > div:nth-child(even) { border-right: 0; }
    .crm-metric-strip > div:nth-last-child(-n+2) { border-bottom: 0; }
    .crm-workspace { grid-template-columns: 1fr; }
    .crm-customer-directory,
    .crm-conversation-panel,
    .crm-insight-panel { width: 100%; height: auto; min-height: 0; max-height: none; }
    .crm-customer-directory { max-height: 410px; }
    .crm-customer-list { max-height: 290px; }
    .crm-conversation-panel { min-height: 620px; }
    .crm-message-list { min-height: 280px; max-height: 420px; }
    .crm-insight-panel { grid-column: auto; }
    .crm-timezone-card { grid-template-columns: 76px minmax(0, 1fr) 28px; }
    .crm-compose-actions { flex-wrap: wrap; }
    .crm-compose-actions > span { width: 100%; margin-right: 0; }
    .crm-compose-actions .primary-button,
    .crm-compose-actions .secondary-button { flex: 1 1 130px; justify-content: center; }
    .crm-playbook-layout { grid-template-columns: 1fr; }
    .crm-playbook-directory { position: static; max-height: 420px; }
    .crm-playbook-list { max-height: 280px; }
    .crm-playbook-hero { align-items: flex-start; flex-direction: column; padding: 15px; }
    .crm-playbook-hero-actions { width: 100%; justify-items: stretch; }
    .crm-playbook-hero-actions .secondary-button { justify-content: center; }
    .crm-playbook-step { padding: 11px; }
    .customer-history-grid { grid-template-columns: 1fr; }
    .customer-action-log,
    .customer-trash-list { min-height: 180px; max-height: 390px; }
    .mobile-customer-card {
        display: grid;
        min-height: 112px;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 13px;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: #ffffff;
        gap: 10px;
        text-align: left;
    }
    .mobile-customer-card .customer-identity { align-self: start; }
    .mobile-customer-card .ws-status-stack { align-items: flex-end; }
    .mobile-customer-card .timezone-radar em { display: none; }
    .mobile-customer-card > div:last-child { grid-column: 1 / -1; padding-top: 9px; border-top: 1px solid #edf0ee; }
    .mobile-customer-card p { margin: 0 0 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }
    .mobile-customer-card strong.next { display: block; overflow: hidden; font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
    .ws-customer-modal { max-height: 90vh; }
    .ws-customer-detail { padding: 13px 14px 0; }
    .ws-detail-row { grid-template-columns: 74px minmax(0, 1fr); }
    .ws-memory-list span,
    .ws-script-list > div { grid-template-columns: 72px minmax(0, 1fr); }
    .ws-customer-modal > footer { grid-template-columns: 1fr auto; padding: 11px 14px; }
    .ws-customer-modal > footer .modal-footnote { grid-column: 1 / -1; }
    .ws-customer-modal > footer .primary-button,
    .ws-customer-modal > footer .secondary-button { min-height: 36px; padding: 8px 10px; font-size: 10px; }
    .task-panel { border: 0; background: transparent; overflow: visible; }
    .task-list { display: grid; gap: 8px; }
    .task-row {
        grid-template-columns: 32px minmax(0, 1fr) 30px;
        min-height: 80px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: #ffffff;
        gap: 8px;
    }
    .task-row > .priority-chip,
    .task-row > .status-chip { display: none; }
    .task-row > .date-chip { grid-column: 2; width: fit-content; }
    .task-row > .icon-button { grid-column: 3; grid-row: 1; }
    .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .quote-card { min-height: 100px; padding: 12px; }
    .quote-card strong { font-size: 17px; }
    .market-news-header { align-items: flex-start; flex-direction: column; }
    .news-filters { width: 100%; }
    .news-filters .compact-search { flex: 1; }
    .news-list.expanded .news-item { padding: 11px; }
    .market-tabs-toolbar { grid-template-columns: 1fr auto; align-items: center; }
    .market-tabs-toolbar .segmented { width: auto; }
    .news-operation-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .news-schedule-form { grid-template-columns: 1fr; padding: 12px; }
    .news-run-actions { align-items: stretch; flex-wrap: wrap; padding: 10px 12px; }
    .news-run-actions .primary-button,
    .news-run-actions .secondary-button { flex: 1 1 140px; }
    .news-run-actions p { width: 100%; margin: 2px 0 0; }
    .news-operation-columns { grid-template-columns: 1fr; gap: 10px; }
    .news-admin-row { padding: 9px 11px; }
    .news-log-row { grid-template-columns: 68px minmax(0, 1fr); padding: 8px 11px; }
    .news-log-row time { grid-column: 2; }
    .content-board,
    .notes-grid { grid-template-columns: 1fr; gap: 8px; }
    .content-card,
    .note-card { min-height: 150px; }
    .file-panel { border: 0; background: transparent; overflow: visible; }
    .file-list { display: grid; gap: 8px; }
    .file-row {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        min-height: 64px;
        padding: 9px;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: #ffffff;
    }
    .file-row > span { display: none; }
    .system-grid { grid-template-columns: 1fr; gap: 10px; }
    .system-password-panel { grid-column: auto; }
    .system-password-panel .settings-form { grid-template-columns: 1fr; }
    .mobile-nav {
        position: relative;
        inset: auto;
        z-index: 50;
        display: grid;
        width: 100%;
        height: calc(60px + env(safe-area-inset-bottom));
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding: 4px 6px env(safe-area-inset-bottom);
        border-top: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.97);
    }
    .mobile-nav button {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border-radius: 5px;
        background: transparent;
        color: var(--muted);
        gap: 2px;
    }
    .mobile-nav button.active { color: var(--primary); font-weight: 700; }
    .mobile-nav button svg { width: 19px; height: 19px; }
    .mobile-nav button span { font-size: 10px; line-height: 1.2; }
    .quick-menu { top: 50px; right: 10px; }
    .mobile-menu:not(.hidden) { display: grid; }
    .toast-region { right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
    .search-overlay { padding: 8px; padding-top: 8vh; }
    .search-dialog { max-height: 78vh; }
    .modal-card { max-height: 92vh; }
    .form-grid { grid-template-columns: 1fr; }
    .form-field.full { grid-column: auto; }
    .modal-card form { padding: 14px; }
    .modal-card footer { grid-template-columns: auto 1fr auto auto; }
    .login-shell { width: min(430px, calc(100% - 24px)); min-height: 0; grid-template-columns: 1fr; margin-top: 5vh; }
    .login-brand { min-height: 170px; justify-content: flex-end; padding: 24px; }
    .login-brand p { margin-top: 16px; }
    .login-brand h1 { font-size: 24px; }
    .login-panel { padding: 28px 24px; }
}

@media (max-width: 390px) {
    .main-content { padding-right: 9px; padding-left: 9px; }
    .metric-card { min-height: 88px; grid-template-columns: 30px minmax(0, 1fr); padding: 10px; }
    .metric-icon { width: 30px; height: 30px; }
    .metric-card > span:last-child { grid-template-columns: 1fr; }
    .quote-grid { grid-template-columns: 1fr 1fr; }
    .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-heading h1,
    .dashboard-heading h1 { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.ws-agent-offline {
    display: flex;
    min-height: 58px;
    align-items: center;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #ead7a8;
    border-radius: 7px;
    background: #fff9e9;
    color: #8b6412;
    gap: 11px;
}

.ws-agent-offline.hidden { display: none; }
.ws-agent-offline > svg { width: 22px; height: 22px; flex: 0 0 auto; }
.ws-agent-offline > div { display: grid; gap: 3px; }
.ws-agent-offline strong { color: #684a0d; font-size: 12px; }
.ws-agent-offline span { font-size: 11px; line-height: 1.45; }
.ws-metric-grid { margin-bottom: 14px; }
.ws-metric-grid .metric-card > span:last-child { grid-template-columns: minmax(66px, auto) minmax(0, 1fr); }
.ws-metric-grid .metric-card strong { white-space: nowrap; }
.ws-group-toolbar { overflow: hidden; }
.ws-group-toolbar .segmented { width: 100%; }
.ws-group-toolbar .segmented button { flex: 1 0 auto; }
.ws-group-pane { display: none; }
.ws-group-pane.active { display: block; }

.ws-native-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
}

.ws-span-full { grid-column: 1 / -1; }
.ws-kv-list { padding: 8px 16px 14px; }
.ws-kv-row {
    display: grid;
    min-height: 38px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-bottom: 1px solid var(--line);
    gap: 12px;
    font-size: 12px;
}
.ws-kv-row:last-child { border-bottom: 0; }
.ws-kv-row span { color: var(--muted); }

.ws-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px;
    gap: 9px;
}
.ws-action-grid button { justify-content: flex-start; }

.ws-account-list,
.ws-edit-list { padding: 4px 14px 14px; }
.ws-account-row {
    display: grid;
    min-height: 54px;
    grid-template-columns: 30px minmax(120px, 0.8fr) minmax(150px, 1fr) 64px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    gap: 10px;
}
.ws-account-row:last-child { border-bottom: 0; }
.ws-account-name { display: grid; min-width: 0; gap: 2px; }
.ws-account-name strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ws-account-name span { color: var(--muted); font-size: 10px; }
.ws-account-row > input,
.ws-edit-row input {
    width: 100%;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    outline: 0;
    background: #fff;
    font-size: 12px;
}
.ws-account-row > input:focus,
.ws-edit-row input:focus { border-color: #61927a; box-shadow: 0 0 0 3px rgba(20, 91, 64, 0.09); }
.ws-account-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ws-account-toggle span {
    position: relative;
    display: block;
    width: 27px;
    height: 16px;
    border-radius: 9px;
    background: #cbd3ce;
    cursor: pointer;
    transition: background 140ms ease;
}
.ws-account-toggle span::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    content: '';
    transition: transform 140ms ease;
}
.ws-account-toggle input:checked + span { background: var(--primary); }
.ws-account-toggle input:checked + span::after { transform: translateX(11px); }

.ws-persona-list { display: grid; padding: 4px 14px 16px; gap: 10px; }
.ws-persona-card {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface-muted);
}
.ws-persona-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
}
.ws-persona-card header > span { display: grid; min-width: 0; gap: 2px; }
.ws-persona-card header strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ws-persona-card header small { color: var(--muted); font-size: 10px; }
.ws-persona-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ws-persona-fields label { display: grid; gap: 5px; }
.ws-persona-fields .ws-persona-field-wide { grid-column: 1 / -1; }
.ws-persona-fields label span { color: var(--muted); font-size: 10px; font-weight: 600; }
.ws-persona-fields input {
    width: 100%;
    min-height: 35px;
    padding: 7px 9px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    outline: 0;
    background: #fff;
    font-size: 11px;
}
.ws-persona-fields input:focus { border-color: #61927a; box-shadow: 0 0 0 3px rgba(20, 91, 64, 0.09); }

.ws-edit-row {
    display: grid;
    min-height: 48px;
    grid-template-columns: 28px minmax(0, 1fr) 34px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    gap: 9px;
}
.ws-edit-row:last-child { border-bottom: 0; }
.ws-edit-row > span { color: var(--muted); font-size: 11px; text-align: center; }

.ws-settings-form { align-content: start; }
.ws-settings-form label.checkbox-field { display: flex; grid-template-columns: none; }
.ws-settings-form > div { display: grid; gap: 7px; }
.ws-form-label { color: var(--muted); font-size: 11px; font-weight: 600; }
.ws-check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ws-check-list label {
    display: flex;
    min-width: 0;
    min-height: 32px;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    gap: 7px;
}
.ws-check-list label span { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.ws-check-list input { width: 15px; min-height: 15px; padding: 0; accent-color: var(--primary); }
.ws-inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.muted-copy { color: var(--muted); font-size: 11px; }

.ws-bar-list { padding: 8px 16px 16px; }
.ws-bar-row { display: grid; margin-bottom: 12px; gap: 6px; }
.ws-bar-row:last-child { margin-bottom: 0; }
.ws-bar-row > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.ws-bar-row > div:first-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-bar-track { height: 6px; overflow: hidden; border-radius: 3px; background: #e8eeea; }
.ws-bar-track span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }

.ws-log-list { max-height: 560px; overflow: auto; }
.ws-log-row {
    display: grid;
    min-height: 40px;
    grid-template-columns: 66px 64px minmax(0, 1fr);
    align-items: start;
    padding: 9px 14px;
    border-bottom: 1px solid var(--line);
    gap: 8px;
    font-size: 11px;
    line-height: 1.5;
}
.ws-log-row:last-child { border-bottom: 0; }
.ws-log-row time { color: var(--muted); font-variant-numeric: tabular-nums; }
.ws-log-row strong { color: var(--primary); font-size: 10px; }
.ws-log-row.warning strong { color: var(--amber); }
.ws-log-row.error strong { color: var(--red); }
.ws-log-row span { min-width: 0; overflow-wrap: anywhere; }

.ws-diagnostic-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ws-diagnostic-list { display: grid; gap: 10px; }
.ws-diagnostic-item {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    padding: 13px 15px;
    border-left: 4px solid var(--line-strong);
    gap: 16px;
}
.ws-diagnostic-item.ok { border-left-color: var(--primary); }
.ws-diagnostic-item.warn { border-left-color: var(--amber); }
.ws-diagnostic-item.bad { border-left-color: var(--red); }
.ws-diagnostic-item > div { display: grid; gap: 4px; }
.ws-diagnostic-item strong { font-size: 12px; }
.ws-diagnostic-item span { color: var(--muted); font-size: 11px; line-height: 1.5; }

.ws-draft-list { padding: 4px 14px 14px; }
.ws-draft-row {
    display: grid;
    grid-template-columns: minmax(140px, 0.45fr) minmax(0, 1fr) auto;
    align-items: start;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    gap: 14px;
}
.ws-draft-row:last-child { border-bottom: 0; }
.ws-draft-row > div:first-child { display: grid; gap: 3px; }
.ws-draft-row > div:first-child strong { font-size: 11px; }
.ws-draft-row > div:first-child span { color: var(--muted); font-size: 10px; }
.ws-draft-row p { margin: 0; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.ws-draft-row > div:last-child { display: flex; gap: 7px; }

@media (max-width: 768px) {
    #view-tools .heading-actions { display: grid; grid-template-columns: 1fr auto auto; width: 100%; }
    #view-tools .heading-actions .sync-pill { justify-content: center; }
    #view-tools .heading-actions .secondary-button { display: inline-flex; min-width: 76px; }
    .ws-native-grid { grid-template-columns: 1fr; }
    .ws-span-full { grid-column: auto; }
    .ws-account-row { grid-template-columns: 28px minmax(90px, 0.75fr) minmax(100px, 1fr); padding: 7px 0; }
    .ws-account-row > .status-chip { grid-column: 2 / -1; justify-self: start; }
    .ws-persona-fields { grid-template-columns: 1fr; }
    .ws-check-list { grid-template-columns: 1fr; }
    .ws-log-row { grid-template-columns: 48px 48px minmax(0, 1fr); padding-right: 9px; padding-left: 9px; gap: 5px; }
    .ws-diagnostic-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ws-diagnostic-metrics .metric-card { grid-template-columns: 1fr; }
    .ws-diagnostic-metrics .metric-icon { display: none; }
    .ws-diagnostic-item { align-items: flex-start; flex-direction: column; }
    .ws-draft-row { grid-template-columns: 1fr; gap: 8px; }
    .ws-draft-row > div:last-child { justify-content: flex-end; }
}