/* Shared visual hierarchy: quiet surfaces, compact facts, explicit sections. */
:root {--canvas:#f5f6f8;--line:#e1e6eb;--muted:#5e707c;--radius:12px;--shadow:0 2px 8px rgba(20,40,55,.045)}
.card {box-shadow:var(--shadow);border-radius:var(--radius)}
.page-heading h1 {font-size:1.65rem;letter-spacing:-.025em}
.page-heading .subtitle {max-width:72ch;line-height:1.55}
.eyebrow {letter-spacing:.08em;font-weight:600}
.card-header h2,.card-header h3,.detail-section h3 {font-size:1rem;line-height:1.4}
.primary-button,.secondary-button,.text-button,.chip {font-weight:600;box-shadow:none}
.primary-button {background:#12516e;border-color:#12516e;color:#fff}
.primary-button:hover {background:#0a3a56}
.secondary-button {background:#fff;border-color:#d8e0e6;border-radius:7px}
.text-button {text-underline-offset:3px}
button:focus-visible,a:focus-visible,summary:focus-visible,[role=button]:focus-visible {outline:3px solid #247aa2;outline-offset:3px}
[hidden] {display:none!important}
.detail-hero,.support-hero {background:#fff;color:var(--ink);border-bottom:1px solid var(--line);padding:22px}
.detail-name {align-items:flex-start;gap:12px}
.detail-name h1,.detail-name h2 {font-size:1.3rem;line-height:1.35;margin:0 0 5px;overflow-wrap:anywhere}
.detail-name p {color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.detail-name .avatar {width:44px;height:44px;border-radius:10px;color:#12516e;background:#eaf2f6}
.detail-actions {display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.detail-actions button {min-height:36px;padding:7px 11px;border:1px solid #d8e0e6;border-radius:7px;color:#254453;background:#fff;font-size:.83rem;font-weight:600}
.detail-actions button:hover:not(:disabled) {background:#eef4f7;border-color:#a4bac7}
.detail-actions button:disabled {opacity:.5;cursor:not-allowed}
.detail-body,.ticket-detail-body {background:#fafbfc;padding:20px}
.detail-body>.detail-section,.ticket-detail-body>.detail-section,.customer-overview,.customer-source-details {background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px;margin:0 0 16px}
.detail-section h2,.detail-section h3,.customer-overview h3 {margin:0 0 14px;font-size:1rem}
.customer-facts {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px;margin:0}
.customer-facts>div {min-width:0}
.customer-facts dt,.identifier-summary small,.ticket-facts small {font-size:.75rem;color:var(--muted);font-weight:500;margin-bottom:5px}
.customer-facts dd {margin:0;font-size:.9rem;font-weight:600;line-height:1.45;overflow-wrap:anywhere}
.customer-facts small {font-size:.72rem;color:var(--muted);display:block;margin-top:4px}
.customer-facts .customer-plan {grid-column:1/-1;padding-top:12px;border-top:1px solid var(--line)}
.customer-facts .status {font-size:.78rem;padding:4px 9px}
.identifier-summary {gap:16px}
.identifier-summary b {font-size:.88rem;font-weight:500;line-height:1.6;overflow-wrap:anywhere}
.identifier-summary em {font-size:.7rem;font-weight:400;color:var(--muted)}
.detail-tabs {display:flex;gap:0;margin:20px 0 0;border-bottom:1px solid #cdd9e0;overflow-x:auto}
.detail-tabs button {background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;padding:12px 14px;color:var(--muted);font-size:.84rem;font-weight:600;cursor:pointer;white-space:normal}
.detail-tabs button.active {border-bottom-color:#12516e;background:#fff;color:#12516e}
.detail-timeline-grid {display:block;margin:0 0 16px}
.detail-timeline-grid .timeline-panel {border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;background:#fff;margin:0;padding:18px}
.detail-timeline-grid .timeline-panel.tab-hidden {display:none}
.timeline {gap:12px}
.timeline-item {padding:11px 13px;border:1px solid #e7ebef;border-radius:8px;background:#fff;min-width:0;overflow-wrap:anywhere}
.timeline-item:before {top:16px}
.timeline-item b,.timeline-item .text-button {font-size:.86rem;font-weight:600}
.timeline-item time {display:block;margin-top:7px;font-size:.73rem}
.timeline-item p {color:#526674;line-height:1.55}
.customer-source-details>summary,.mobile-more>summary {font-size:.88rem;font-weight:600;cursor:pointer;line-height:1.5}
.customer-source-details[open]>summary {margin-bottom:16px}
.customer-source-details .detail-section {margin-top:14px}
.customer-identity {display:flex;align-items:center;flex-wrap:wrap;gap:5px 9px;margin:7px 0;font-size:.75rem;line-height:1.45;color:#425e6c;min-width:0}
.identity-known {padding:2px 7px;border:1px solid #beded1;border-radius:5px;background:#edf8f2;color:#226549;font-weight:650}
.identity-member {font-weight:650;color:#284958}
.identity-plan {flex-basis:100%;white-space:normal;overflow-wrap:anywhere}
.identity-state {font-size:.71rem;color:#5e707c}
.identity-unlinked {color:#687680;font-style:italic}
.thread-item {padding:15px 14px;gap:9px;grid-template-columns:32px minmax(0,1fr)}
.thread-item .channel-icon {width:30px;height:30px;font-size:.68rem;border-radius:7px}
.thread-head {align-items:flex-start;gap:8px;flex-wrap:wrap}
.thread-head b {font-size:.87rem;line-height:1.4}
.thread-head time {font-size:.69rem;white-space:nowrap}
.thread-item .thread-subject {font-weight:600;color:#294754;margin-top:8px}
.thread-item.selected {background:#eef5f8;box-shadow:inset 3px 0 #12516e}
.thread-item.unread {border-left:0}
.thread-item.unread .thread-head b:before {content:'';display:inline-block;width:6px;height:6px;background:#197097;border-radius:50%;margin-right:6px;vertical-align:middle}
.conversation-head {align-items:flex-start;padding:18px 20px;background:#fff}
.conversation-head>div {min-width:0;flex:1}
.conversation-head h2 {font-size:1.05rem;line-height:1.4}
.conversation-head .customer-identity {font-size:.77rem;margin:7px 0}
.conversation-head .identity-plan {flex-basis:auto}
.inbox-compact .conversation-head {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:8px}
.inbox-compact .conversation-head>.avatar {display:none}
.inbox-compact .conversation-head .customer-identity {margin:3px 0;gap:2px 6px;font-size:.7rem;line-height:1.25}
.inbox-compact .conversation-head .identity-state {display:none}
.inbox-compact .conversation-head .identity-known {padding:1px 4px}
.inbox-compact .conversation-head h2 {font-size:.9rem;line-height:1.25}
.inbox-compact .conversation-head p {font-size:.73rem}
.inbox-compact .conversation-actions {padding:5px 8px;gap:8px}
.inbox-compact .email-signature-preview {max-height:30px}
.conversation-actions {background:#fafbfc;border-top:1px solid #edf0f3;border-bottom:1px solid #edf0f3;padding:10px 18px;gap:12px}
.conversation-actions .text-button {font-size:.8rem}
.message {box-shadow:none;border-radius:9px}
.inbox-customer-toolbar {background:#fff;border-bottom:1px solid var(--line)}
.ticket-detail-head {background:#fff;padding:22px;border-bottom:1px solid var(--line)}
.ticket-detail-head h2 {font-size:1.25rem;line-height:1.45}
.ticket-actions {gap:7px;flex-wrap:wrap}
.ticket-facts {background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;gap:18px}
.ticket-facts b {font-size:.88rem;font-weight:600}
.page-statistics>div,.stat-card {box-shadow:none;border-color:var(--line)}
.admin-card {padding:22px}
.admin-card>h2 {font-size:1.05rem;margin-top:0}
.admin-card>p,.admin-card form>p {font-size:.87rem;line-height:1.6;color:var(--muted);max-width:85ch}
.admin-fields {gap:14px 20px}
.form-dialog-head,.form-dialog-foot {background:#fafbfc}
.form-dialog-body label {font-weight:600;font-size:.84rem}
.contact-row,.ticket-row,.task-row {border-color:#e9edf1}
.contact-row b,.ticket-row b,.task-row b {font-size:.9rem;font-weight:600}
.status {font-weight:600;border-radius:5px}
@media(max-height:600px) and (max-width:1000px){
 .mobile-ui .conversation-head {max-height:32dvh;overflow:auto;padding:8px}
 .mobile-ui .composer {padding:8px;gap:4px}
 .mobile-ui .composer textarea {height:46px;min-height:46px}
 .mobile-ui .email-signature-preview {max-height:30px}
}
@media(max-width:700px){
 .detail-hero,.detail-body,.ticket-detail-head,.ticket-detail-body {padding:16px}
 .detail-body>.detail-section,.customer-overview,.customer-source-details {padding:15px}
 .detail-actions button {min-height:42px}
 .customer-facts {gap:14px}
 .conversation-head {padding:12px;gap:8px}
 .conversation-head>.avatar {display:none}
 .conversation-head .customer-identity {gap:4px 7px;font-size:.72rem}
 .conversation-head .identity-plan {flex-basis:100%}
 .conversation-head h2 {font-size:1rem}
 .admin-card {padding:16px}
 .detail-tabs button {min-height:44px;padding:10px;font-size:.8rem}
}