:root {
    --lw-primary: #0f766e;
    --lw-primary-dark: #115e59;
    --lw-accent: #f59e0b;
    --lw-surface: rgba(255, 255, 255, 0.92);
    --lw-bg: #eef4f6;
    --lw-border: #d8e3ea;
    --lw-text: #10222d;
    --lw-muted: #64748b;
    --lw-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
    --lw-radius: 24px;
}

* { box-sizing: border-box; }
body {
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.12), transparent 22%),
        linear-gradient(180deg, #f8fbfc 0%, var(--lw-bg) 100%);
    color: var(--lw-text);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
}
a { color: inherit; }
.app-shell { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 100vh; }
.app-sidebar {
    background: linear-gradient(180deg, #12323b 0%, #0f172a 100%);
    color: #f8fafc;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: sticky;
    top: 0;
    min-height: 100vh;
}
.app-brand { display: flex; gap: 14px; align-items: center; text-decoration: none; color: inherit; }
.app-brand-mark {
    width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 16px; background: linear-gradient(135deg, var(--lw-accent) 0%, #f97316 100%); color: #fff; font-weight: 700;
}
.app-brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: block;
}
.app-brand-title { font-size: 1.05rem; font-weight: 700; }
.app-brand-subtitle { color: rgba(248, 250, 252, 0.72); font-size: 0.88rem; }
.app-nav { gap: 8px; }
.app-nav-link { padding: 12px 14px; border-radius: 16px; color: rgba(248, 250, 252, 0.78); text-decoration: none; transition: 0.2s ease; }
.app-nav-link:hover, .app-nav-link.is-active { color: #fff; background: rgba(255, 255, 255, 0.1); }
.app-nav-group { display: grid; gap: 6px; }
.app-nav-parent-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    color: rgba(248, 250, 252, 0.78);
    border-radius: 16px;
    padding: 12px 14px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.2s ease;
}
.app-nav-parent-toggle:hover,
.app-nav-parent-toggle.is-open {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.app-nav-parent-toggle[aria-expanded="true"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.app-nav-caret { transition: transform 0.2s ease; }
.app-nav-parent-toggle.is-open .app-nav-caret { transform: rotate(180deg); }
.app-nav-parent-toggle[aria-expanded="true"] .app-nav-caret { transform: rotate(180deg); }
.app-sub-nav {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px dashed rgba(255, 255, 255, 0.18);
    display: grid;
    gap: 6px;
}
.app-user-panel { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 18px; }
.app-content { padding: 28px; }
.app-header { margin-bottom: 24px; }
.app-page-title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; }
.header-tools { display: flex; gap: 10px; align-items: center; }
.header-search { min-width: 320px; }
.header-search .form-control { min-height: 44px; }
.notification-bell { position: relative; }
.notification-bell-btn { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.notification-counter {
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: #ef4444; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.74rem; font-weight: 700;
}
.notification-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0; width: 360px; max-width: 92vw;
    background: #fff; border: 1px solid var(--lw-border); border-radius: 16px; box-shadow: var(--lw-shadow);
    z-index: 40; padding: 10px;
}
.notification-dropdown-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 6px 10px; border-bottom: 1px solid var(--lw-border); }
.notification-dropdown-list { max-height: 300px; overflow: auto; padding-top: 8px; display: grid; gap: 8px; }
.notification-mini-item {
    text-decoration: none; border: 1px solid var(--lw-border); border-radius: 12px; padding: 10px 12px; background: rgba(248, 250, 252, 0.92);
}
.notification-mini-item.is-unread { border-color: rgba(15, 118, 110, 0.36); background: rgba(15, 118, 110, 0.08); }
.eyebrow { color: var(--lw-primary); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.app-main { display: flex; flex-direction: column; gap: 24px; }
.surface-card, .metric-card, .auth-card, .auth-panel, .project-card, .card, .side-panel, .note-card {
    background: var(--lw-surface); border: 1px solid rgba(216, 227, 234, 0.9); box-shadow: var(--lw-shadow); border-radius: var(--lw-radius);
}
.surface-card, .project-card, .auth-panel, .auth-card, .side-panel { padding: 28px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.section-title { font-size: 1.5rem; font-weight: 700; }
.metric-card { padding: 22px; }
.metric-label { display: block; color: var(--lw-muted); font-size: 0.92rem; margin-bottom: 12px; }
.metric-value { display: block; font-size: 2rem; line-height: 1; }
.stack-list, .notes-list { display: grid; gap: 14px; }
.stack-item, .permission-card {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px;
    border: 1px solid var(--lw-border); border-radius: 18px; background: rgba(248, 250, 252, 0.9);
}
.permission-card { justify-content: flex-start; align-items: flex-start; height: 100%; cursor: pointer; }
.color-dot, .color-swatch { display: inline-block; border-radius: 999px; }
.color-dot { width: 12px; height: 12px; }
.color-swatch { width: 34px; height: 34px; }
.premium-table thead th { border-bottom: 1px solid var(--lw-border); color: var(--lw-muted); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.premium-table tbody td { border-bottom: 1px solid rgba(216, 227, 234, 0.7); padding-top: 18px; padding-bottom: 18px; }
.table-link { text-decoration: none; font-weight: 600; }
.status-pill, .project-chip, .badge-soft {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; padding: 0.45rem 0.9rem; font-weight: 600; font-size: 0.86rem;
}
.status-active { background: rgba(34, 197, 94, 0.16); color: #15803d; }
.status-inactive { background: rgba(148, 163, 184, 0.18); color: #475569; }
.status-suspended { background: rgba(245, 158, 11, 0.18); color: #b45309; }
.status-blocked { background: rgba(239, 68, 68, 0.16); color: #b91c1c; }
.status-queued, .status-pending { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; }
.status-processing, .status-processed { background: rgba(15, 118, 110, 0.14); color: var(--lw-primary-dark); }
.status-completed { background: rgba(34, 197, 94, 0.16); color: #15803d; }
.status-overdue { background: rgba(239, 68, 68, 0.16); color: #b91c1c; }
.status-cancelled, .status-skipped { background: rgba(148, 163, 184, 0.18); color: #475569; }
.status-failed { background: rgba(239, 68, 68, 0.16); color: #b91c1c; }
.status-sent, .status-delivered, .status-read, .status-received { background: rgba(34, 197, 94, 0.16); color: #15803d; }
.status-queued, .status-pending { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; }
.status-approved { background: rgba(34, 197, 94, 0.16); color: #15803d; }
.status-pending_approval { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; }
.status-draft { background: rgba(148, 163, 184, 0.18); color: #475569; }
.status-rejected, .status-disabled { background: rgba(239, 68, 68, 0.16); color: #b91c1c; }
.badge-soft { background: rgba(15, 118, 110, 0.1); color: var(--lw-primary-dark); }
.text-muted-strong { color: var(--lw-muted); }
.table-avatar, .avatar-preview-image { width: 48px; height: 48px; object-fit: cover; border-radius: 16px; }
.avatar-circle {
    width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 16px; background: rgba(15, 118, 110, 0.16); color: var(--lw-primary-dark); font-weight: 700;
}
.avatar-sm { width: 42px; height: 42px; border-radius: 14px; }
.avatar-preview {
    min-height: 120px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(245, 158, 11, 0.12));
    border-radius: 20px; border: 1px dashed rgba(15, 118, 110, 0.2);
}
.avatar-preview-image { width: 96px; height: 96px; border-radius: 24px; }
.avatar-preview-placeholder { color: var(--lw-muted); font-weight: 600; }
.project-card, .side-panel { height: 100%; }
.project-meta-grid, .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.detail-grid-single { grid-template-columns: 1fr; }
.detail-label { display: block; color: var(--lw-muted); font-size: 0.82rem; margin-bottom: 6px; }
.note-card + .note-card, .permission-group + .permission-group { margin-top: 16px; }
.permission-group + .permission-group { padding-top: 24px; border-top: 1px solid var(--lw-border); }
.auth-shell { min-height: calc(100vh - 3rem); display: flex; align-items: center; }
.layout-auth {
    background:
        radial-gradient(circle at top left, rgba(245, 158, 11, 0.16), transparent 20%),
        radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.16), transparent 24%),
        linear-gradient(180deg, #f9fbfc 0%, #eef4f6 100%);
}
.auth-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.auth-feature-card, .auth-hint {
    padding: 16px; border-radius: 18px; background: rgba(248, 250, 252, 0.9); border: 1px solid var(--lw-border); display: flex; flex-direction: column; gap: 4px;
}
.auth-feature-card span, .auth-hint span { color: var(--lw-muted); }
.wizard-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wizard-step {
    padding: 14px 16px; border: 1px solid var(--lw-border); border-radius: 18px; background: rgba(248, 250, 252, 0.9);
    display: flex; align-items: center; gap: 10px; color: var(--lw-muted);
}
.wizard-step span {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: rgba(148, 163, 184, 0.16); font-weight: 700;
}
.wizard-step.is-active { border-color: rgba(15, 118, 110, 0.4); color: var(--lw-primary-dark); background: rgba(15, 118, 110, 0.08); }
.wizard-step.is-complete { border-color: rgba(34, 197, 94, 0.35); color: #15803d; background: rgba(34, 197, 94, 0.08); }
.upload-dropzone {
    min-height: 220px; border: 2px dashed rgba(15, 118, 110, 0.28); border-radius: 26px; padding: 28px;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(245, 158, 11, 0.08)); cursor: pointer;
}
.upload-dropzone-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.upload-dropzone-subtitle, .upload-file-name { color: var(--lw-muted); }
.upload-file-name { margin-top: 18px; font-weight: 600; }
.mapping-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.1fr); gap: 16px;
    align-items: center; padding: 16px; border: 1px solid var(--lw-border); border-radius: 20px; background: rgba(248, 250, 252, 0.86);
}
.mapping-source, .mapping-target { min-width: 0; }
.mapping-label { display: block; color: var(--lw-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.mapping-arrow { text-align: center; color: var(--lw-muted); font-size: 1.25rem; }
.strategy-card {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--lw-border);
    border-radius: 16px; background: rgba(248, 250, 252, 0.9); cursor: pointer;
}
.report-banner {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px;
    border-radius: 24px; background: linear-gradient(135deg, rgba(15, 118, 110, 0.10), rgba(34, 197, 94, 0.10)); border: 1px solid rgba(15, 118, 110, 0.16);
}
.conversation-page { display: grid; gap: 16px; }
.conversation-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; min-height: 70vh; }
.conversation-list-card, .conversation-chat-card { margin-bottom: 0; }
.conversation-list { display: grid; gap: 10px; max-height: 70vh; overflow: auto; padding-right: 4px; }
.conversation-list-item {
    border: 1px solid var(--lw-border); border-radius: 16px; padding: 12px; text-decoration: none;
    background: rgba(248, 250, 252, 0.95);
}
.conversation-list-item.is-active { border-color: rgba(15, 118, 110, 0.4); box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.25); }
.conversation-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.chat-messages {
    min-height: 360px; max-height: 420px; overflow: auto; display: grid; gap: 12px;
    padding: 12px; border: 1px solid var(--lw-border); border-radius: 18px; background: #f8fbfc;
}
.chat-bubble { max-width: 72%; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--lw-border); }
.chat-bubble-inbound { background: #fff; justify-self: start; }
.chat-bubble-outbound { background: rgba(15, 118, 110, 0.12); border-color: rgba(15, 118, 110, 0.22); justify-self: end; }
.chat-bubble-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 0.78rem; color: var(--lw-muted); }
.chat-composer { margin-top: 16px; }
.composer-alert { padding: 10px 12px; border-radius: 12px; margin-bottom: 10px; font-weight: 600; }
.composer-alert.is-open { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.composer-alert.is-closed { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }
.composer-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; margin-bottom: 10px; }
.composer-panels { display: grid; gap: 10px; margin-bottom: 10px; }
.composer-panel { border: 1px solid var(--lw-border); border-radius: 14px; background: rgba(248, 250, 252, 0.92); padding: 10px; }
.composer-panel-title { font-size: 0.82rem; font-weight: 700; color: var(--lw-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.06em; }
.composer-item-list { max-height: 180px; overflow: auto; display: grid; gap: 8px; }
.composer-item {
    width: 100%; border: 1px solid var(--lw-border); background: #fff; border-radius: 12px;
    padding: 10px 12px; text-align: left; display: flex; flex-direction: column; gap: 3px;
}
.composer-item span { font-size: 0.82rem; color: var(--lw-muted); }
.composer-preview {
    min-height: 80px; border: 1px dashed var(--lw-border); border-radius: 12px;
    padding: 12px; white-space: pre-wrap; background: rgba(248, 250, 252, 0.75);
}
.empty-chat-state {
    min-height: 60vh; display: flex; align-items: center; justify-content: center;
    flex-direction: column; text-align: center; gap: 8px;
}
.empty-state-box {
    min-height: 220px; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 8px; text-align: center;
    border: 1px dashed rgba(148, 163, 184, 0.45); border-radius: 20px; background: rgba(248, 250, 252, 0.88); padding: 26px;
}
.notifications-list { display: grid; gap: 10px; }
.notification-item {
    border: 1px solid var(--lw-border); border-radius: 16px; padding: 14px; background: rgba(248, 250, 252, 0.9);
}
.notification-item.is-unread { border-color: rgba(15, 118, 110, 0.4); background: rgba(15, 118, 110, 0.08); }
.audit-json {
    white-space: pre-wrap; margin: 0; font-size: 0.76rem;
    background: rgba(248, 250, 252, 0.96); border: 1px solid var(--lw-border); border-radius: 10px; padding: 8px;
}
.attendance-page { display: grid; gap: 16px; }
.attendance-toolbar { display: grid; gap: 14px; }
.attendance-toolbar-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.attendance-metrics { display: flex; gap: 8px; flex-wrap: wrap; }
.attendance-filters { border-top: 1px solid var(--lw-border); padding-top: 14px; }
.attendance-scope .btn.is-active { background: rgba(15, 118, 110, 0.12); border-color: rgba(15, 118, 110, 0.35); color: var(--lw-primary-dark); }
.attendance-flags .form-check-label { color: var(--lw-muted); font-weight: 600; }
.attendance-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr) 360px; gap: 16px; min-height: 75vh; }
.attendance-inbox, .attendance-chat, .attendance-side { margin-bottom: 0; display: flex; flex-direction: column; }
.attendance-conversation-list { display: grid; gap: 10px; overflow: auto; max-height: calc(100vh - 320px); padding-right: 4px; }
.attendance-conversation-item {
    width: 100%; text-align: left; border: 1px solid var(--lw-border); border-radius: 16px; padding: 12px;
    background: rgba(248, 250, 252, 0.96); transition: 0.2s ease;
}
.attendance-conversation-item:hover { border-color: rgba(15, 118, 110, 0.35); }
.attendance-conversation-item.is-active { border-color: rgba(15, 118, 110, 0.45); box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.2); }
.js-active-attendance-app .attendance-conversation-item.js-lead-card.is-active {
    border-color: rgba(15, 118, 110, 0.75);
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.16), rgba(20, 184, 166, 0.08));
    box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.3), 0 10px 24px rgba(15, 118, 110, 0.12);
    transform: translateY(-1px);
    position: relative;
}
.js-active-attendance-app .attendance-conversation-item.js-lead-card.is-active::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 10px;
    bottom: 10px;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, #0f766e 0%, #14b8a6 100%);
}
.attendance-item-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.attendance-item-name-wrap { min-width: 0; }
.attendance-item-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attendance-item-phone, .attendance-item-time { color: var(--lw-muted); font-size: 0.82rem; }
.attendance-item-meta { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.attendance-item-badges { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.attendance-item-badges .status-pill { padding: 0.2rem 0.6rem; font-size: 0.72rem; }

.admin-hero-panel {
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.16), transparent 40%),
        radial-gradient(circle at bottom left, rgba(15, 118, 110, 0.12), transparent 34%),
        var(--lw-surface);
}
.admin-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 300px; }
.admin-kpi-card {
    border: 1px solid var(--lw-border);
    border-radius: 16px;
    padding: 12px 14px;
    background: rgba(248, 250, 252, 0.95);
}

.funnel-board {
    border: 1px solid var(--lw-border);
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.06), rgba(245, 158, 11, 0.08));
}
.funnel-stage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.funnel-stage-card {
    border: 1px solid rgba(15, 118, 110, 0.2);
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    text-align: left;
    display: grid;
    gap: 4px;
}
.funnel-stage-card.is-active {
    border-color: rgba(15, 118, 110, 0.6);
    box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.2);
}
.funnel-stage-index {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lw-muted);
}
.funnel-stage-goal {
    font-size: 0.8rem;
    color: var(--lw-muted);
}
.funnel-stage-preview {
    border: 1px dashed var(--lw-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    padding: 12px;
    white-space: pre-wrap;
}
.funnel-editor-item {
    border: 1px solid var(--lw-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    padding: 12px;
    margin-bottom: 10px;
}
.admin-kpi-label { display: block; color: var(--lw-muted); font-size: 0.8rem; margin-bottom: 4px; }
.admin-kpi-value { font-size: 1.25rem; line-height: 1; }
.admin-form-card {
    border: 1px solid var(--lw-border);
    border-radius: 20px;
    background: rgba(248, 250, 252, 0.92);
    padding: 18px;
}
.admin-mini-card {
    border: 1px solid var(--lw-border);
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.92);
    padding: 16px;
    height: 100%;
}
.admin-inline-meta { display: grid; gap: 6px; color: var(--lw-muted); font-size: 0.86rem; }
.admin-module-toggle-card { min-height: 88px; }
.admin-drag-cell {
    cursor: grab;
    color: var(--lw-muted);
    font-weight: 700;
    letter-spacing: 1px;
    user-select: none;
}
.js-module-row.is-dragging {
    opacity: 0.6;
    background: rgba(15, 118, 110, 0.08);
}

@media (max-width: 991px) {
    .admin-kpi-grid { min-width: 0; width: 100%; }
}
.attendance-item-assigned { margin-top: 6px; }
.attendance-item-last-message {
    margin-top: 8px; color: var(--lw-muted); font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.active-att-grid { grid-template-columns: 380px minmax(0, 1fr); }
.stars-wrap { display: flex; gap: 6px; }
.star-btn { border: 1px solid var(--lw-border); background: #fff; border-radius: 10px; width: 38px; height: 38px; color: #94a3b8; font-size: 1rem; }
.star-btn.is-on { color: #f59e0b; border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.08); }
.status-low { background: rgba(148, 163, 184, 0.2); color: #475569; }
.status-normal { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
.status-high { background: rgba(245, 158, 11, 0.2); color: #b45309; }
.status-urgent { background: rgba(239, 68, 68, 0.2); color: #b91c1c; }
.status-open-window { background: rgba(34, 197, 94, 0.16); color: #15803d; }
.status-closed-window { background: rgba(239, 68, 68, 0.16); color: #b91c1c; }
.status-new-conversation { background: rgba(14, 165, 233, 0.16); color: #0369a1; }
.attendance-chat-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--lw-border); padding-bottom: 12px; margin-bottom: 12px; }
.attendance-messages {
    min-height: 420px; max-height: calc(100vh - 460px); overflow: auto; display: grid; gap: 12px; padding: 12px;
    border: 1px solid var(--lw-border); border-radius: 18px; background: #f8fbfc;
}
.chat-day-divider {
    justify-self: center; padding: 4px 10px; border-radius: 999px;
    background: rgba(148, 163, 184, 0.22); color: #475569; font-size: 0.74rem; font-weight: 700;
}
.chat-bubble-footer { margin-top: 8px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.chat-source { color: var(--lw-muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; }
.chat-status { font-size: 0.72rem; padding: 0.3rem 0.58rem; }
.attendance-composer { margin-top: 12px; }
.attendance-side { overflow: hidden; }
.attendance-side .section-head { margin-bottom: 16px; }
.attendance-lead-meta { border-bottom: 1px solid var(--lw-border); padding-bottom: 14px; margin-bottom: 14px; }
.attendance-side-forms { overflow: auto; padding-right: 4px; max-height: calc(100vh - 360px); }
.attendance-side-forms .form-label { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lw-muted); font-weight: 700; }
.attendance-history-block { border-top: 1px solid var(--lw-border); margin-top: 14px; padding-top: 14px; }
.attendance-history-item { padding: 8px 0; border-bottom: 1px dashed rgba(148, 163, 184, 0.35); }
.attendance-history-item:last-child { border-bottom: 0; }
.form-control, .form-select { border-radius: 16px; border-color: var(--lw-border); min-height: 50px; padding-left: 16px; padding-right: 16px; }
textarea.form-control { min-height: auto; }
.btn { border-radius: 16px; padding: 0.72rem 1.15rem; font-weight: 600; }
.btn-success { background: linear-gradient(135deg, var(--lw-primary) 0%, #14b8a6 100%); border: 0; }
.btn-success:hover { background: linear-gradient(135deg, var(--lw-primary-dark) 0%, #0f766e 100%); }
@media (max-width: 1199.98px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar { position: static; min-height: auto; }
    .conversation-grid { grid-template-columns: 1fr; }
    .attendance-grid { grid-template-columns: 1fr; }
    .attendance-conversation-list { max-height: 420px; }
    .attendance-messages { max-height: 460px; }
    .attendance-side-forms { max-height: 520px; }
    .header-search { min-width: 240px; }
}
@media (max-width: 767.98px) {
    .app-content { padding: 18px; }
    .surface-card, .project-card, .auth-panel, .auth-card, .side-panel { padding: 20px; }
    .section-head, .detail-grid, .project-meta-grid, .auth-feature-grid, .wizard-steps, .mapping-row { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; }
    .composer-tools { grid-template-columns: 1fr; }
    .chat-bubble { max-width: 100%; }
    .attendance-toolbar-head { flex-direction: column; }
    .attendance-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .header-tools { width: 100%; }
    .header-search { min-width: 0; width: 100%; }
}