/* Skeleton Illustration System — Pure CSS wireframe mockups */

/* Base wrapper & frame */
.skel-wrap { position: relative; margin-top: 48px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xl); border: 1px solid var(--surface-3); max-width: 800px; margin-left: auto; margin-right: auto; }
.skel-frame { width: 100%; background: linear-gradient(135deg, var(--surface-dark), var(--surface-dark-2)); aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; }
.skel-inner { width: 90%; height: 85%; background: var(--surface-1); border-radius: var(--radius-sm); overflow: hidden; display: flex; flex-direction: column; }

/* Shimmer animation */
@keyframes skel-shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* Primitives */
.skel-bar { border-radius: 4px; background: var(--surface-3); }
.skel-bar--shimmer { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: skel-shimmer 2s ease-in-out infinite; }
.skel-bar--gold { background: var(--warm-gold); opacity: 0.6; }
.skel-bar--accent { background: var(--royal-navy); opacity: 0.25; }
.skel-circle { border-radius: 50%; background: var(--surface-3); }
.skel-circle--gold { background: var(--warm-gold); opacity: 0.6; }

/* ===== CRM / Contacts — Pipeline Kanban ===== */
.skel-crm .skel-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--surface-3); }
.skel-crm .skel-header .skel-bar:first-child { width: 100px; height: 12px; }
.skel-crm .skel-header .skel-bar:nth-child(2) { width: 70px; height: 10px; margin-left: auto; }
.skel-crm .skel-header .skel-bar:last-child { width: 80px; height: 28px; border-radius: 6px; }
.skel-crm .skel-cols { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--surface-3); }
.skel-crm .skel-col { background: var(--surface-2); padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.skel-crm .skel-col-head { height: 10px; width: 60%; border-radius: 3px; background: var(--surface-3); margin-bottom: 4px; }
.skel-crm .skel-deal { background: var(--surface-1); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.skel-crm .skel-deal .skel-bar { height: 7px; }
.skel-crm .skel-deal .skel-bar:first-child { width: 70%; }
.skel-crm .skel-deal .skel-bar:nth-child(2) { width: 50%; height: 6px; }
.skel-crm .skel-deal .skel-bar:last-child { width: 40%; height: 5px; }

/* ===== Messaging — Chat Interface ===== */
.skel-chat { flex-direction: row !important; }
.skel-chat .skel-sidebar { width: 180px; background: var(--surface-2); border-right: 1px solid var(--surface-3); padding: 12px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.skel-chat .skel-ch-item { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; }
.skel-chat .skel-ch-item--active { background: var(--surface-3); }
.skel-chat .skel-ch-item .skel-circle { width: 24px; height: 24px; flex-shrink: 0; }
.skel-chat .skel-ch-item .skel-bar { height: 8px; flex: 1; }
.skel-chat .skel-messages { flex: 1; display: flex; flex-direction: column; padding: 16px; gap: 12px; }
.skel-chat .skel-msg { display: flex; gap: 8px; align-items: flex-start; max-width: 75%; }
.skel-chat .skel-msg--right { align-self: flex-end; flex-direction: row-reverse; }
.skel-chat .skel-msg .skel-circle { width: 28px; height: 28px; flex-shrink: 0; }
.skel-chat .skel-msg-body { display: flex; flex-direction: column; gap: 4px; }
.skel-chat .skel-msg-bubble { padding: 10px 14px; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 5px; }
.skel-chat .skel-msg--right .skel-msg-bubble { background: var(--royal-navy); opacity: 0.15; border-radius: 12px 12px 4px 12px; }
.skel-chat .skel-msg-bubble .skel-bar { height: 6px; }
.skel-chat .skel-input { margin-top: auto; padding: 10px 16px; border-top: 1px solid var(--surface-3); display: flex; gap: 8px; align-items: center; }
.skel-chat .skel-input .skel-bar { flex: 1; height: 32px; border-radius: 16px; background: var(--surface-2); }
.skel-chat .skel-input .skel-circle { width: 32px; height: 32px; }

/* ===== Project Management — Task Board ===== */
.skel-pm .skel-tabs { display: flex; gap: 0; padding: 0 16px; border-bottom: 1px solid var(--surface-3); }
.skel-pm .skel-tab { padding: 12px 14px; }
.skel-pm .skel-tab .skel-bar { height: 9px; width: 50px; }
.skel-pm .skel-tab--active { border-bottom: 2px solid var(--warm-gold); }
.skel-pm .skel-tab--active .skel-bar { background: var(--warm-gold); opacity: 0.6; }
.skel-pm .skel-board { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px; }
.skel-pm .skel-lane { background: var(--surface-2); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.skel-pm .skel-lane-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.skel-pm .skel-lane-head .skel-circle { width: 8px; height: 8px; }
.skel-pm .skel-lane-head .skel-bar { height: 9px; width: 60px; }
.skel-pm .skel-task { background: var(--surface-1); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.skel-pm .skel-task .skel-bar { height: 6px; }
.skel-pm .skel-task .skel-bar:first-child { width: 75%; height: 8px; }
.skel-pm .skel-task .skel-bar:nth-child(2) { width: 55%; }
.skel-pm .skel-task-foot { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.skel-pm .skel-task-foot .skel-circle { width: 18px; height: 18px; }
.skel-pm .skel-task-foot .skel-bar { height: 5px; width: 30px; margin-left: auto; }

/* ===== Finance / Invoicing — Invoice Document ===== */
.skel-invoice { background: var(--surface-2) !important; }
.skel-invoice .skel-doc { margin: 16px auto; width: 85%; background: var(--surface-1); border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 20px; display: flex; flex-direction: column; flex: 1; }
.skel-invoice .skel-doc-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.skel-invoice .skel-doc-logo { width: 44px; height: 44px; border-radius: 8px; }
.skel-invoice .skel-doc-meta { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.skel-invoice .skel-doc-meta .skel-bar { height: 7px; }
.skel-invoice .skel-doc-meta .skel-bar:first-child { width: 80px; }
.skel-invoice .skel-doc-meta .skel-bar:nth-child(2) { width: 60px; }
.skel-invoice .skel-table { flex: 1; }
.skel-invoice .skel-trow { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--surface-3); }
.skel-invoice .skel-trow--head .skel-bar { height: 8px; background: var(--surface-dark); opacity: 0.15; }
.skel-invoice .skel-trow .skel-bar { height: 6px; }
.skel-invoice .skel-doc-total { display: flex; justify-content: flex-end; gap: 16px; margin-top: 14px; align-items: center; }
.skel-invoice .skel-doc-total .skel-bar:first-child { width: 60px; height: 8px; }
.skel-invoice .skel-doc-total .skel-bar:last-child { width: 80px; height: 14px; }

/* ===== People / HR — Org Chart ===== */
.skel-hr { align-items: center; justify-content: center; }
.skel-hr .skel-org { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px; width: 100%; }
.skel-hr .skel-person { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.skel-hr .skel-person .skel-circle { width: 40px; height: 40px; }
.skel-hr .skel-person .skel-bar { height: 8px; width: 60px; }
.skel-hr .skel-person .skel-bar:last-child { width: 40px; height: 6px; }
.skel-hr .skel-org-line { width: 2px; height: 16px; background: var(--surface-3); }
.skel-hr .skel-org-branch { display: flex; gap: 40px; position: relative; }
.skel-hr .skel-org-branch::before { content: ''; position: absolute; top: -10px; left: 20%; right: 20%; height: 2px; background: var(--surface-3); }
.skel-hr .skel-org-row { display: flex; gap: 48px; }

/* ===== Time Tracking — Timesheet Grid ===== */
.skel-time .skel-tsheet { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.skel-time .skel-tsheet-head { display: grid; grid-template-columns: 120px repeat(5, 1fr) 60px; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--surface-3); margin-bottom: 8px; }
.skel-time .skel-tsheet-head .skel-bar { height: 9px; }
.skel-time .skel-tsheet-row { display: grid; grid-template-columns: 120px repeat(5, 1fr) 60px; gap: 6px; padding: 7px 0; align-items: center; }
.skel-time .skel-tsheet-row .skel-bar { height: 24px; border-radius: 4px; background: var(--surface-2); }
.skel-time .skel-tsheet-row .skel-bar:first-child { background: var(--surface-3); height: 8px; }
.skel-time .skel-tsheet-row .skel-bar:last-child { height: 8px; }
.skel-time .skel-tsheet-total { margin-top: auto; padding-top: 10px; border-top: 2px solid var(--surface-3); display: flex; justify-content: flex-end; gap: 12px; align-items: center; }
.skel-time .skel-tsheet-total .skel-bar:first-child { width: 60px; height: 8px; }
.skel-time .skel-tsheet-total .skel-bar:last-child { width: 50px; height: 12px; }

/* ===== Support Tickets — Ticket List ===== */
.skel-tickets .skel-tkt-bar { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--surface-3); align-items: center; }
.skel-tickets .skel-tkt-bar .skel-bar:first-child { flex: 1; height: 28px; border-radius: 6px; background: var(--surface-2); }
.skel-tickets .skel-tkt-bar .skel-bar:last-child { width: 90px; height: 28px; border-radius: 6px; }
.skel-tickets .skel-tkt-head { display: grid; grid-template-columns: 40px 2fr 1fr 1fr 80px; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--surface-3); }
.skel-tickets .skel-tkt-head .skel-bar { height: 8px; }
.skel-tickets .skel-tkt-list { flex: 1; display: flex; flex-direction: column; }
.skel-tickets .skel-tkt-row { display: grid; grid-template-columns: 40px 2fr 1fr 1fr 80px; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--surface-2); align-items: center; }
.skel-tickets .skel-tkt-row .skel-circle { width: 24px; height: 24px; }
.skel-tickets .skel-tkt-row .skel-bar { height: 7px; }
.skel-tickets .skel-tkt-row .skel-status { width: 48px; height: 18px; border-radius: 10px; }

/* ===== Dashboard — Analytics Charts ===== */
.skel-dash .skel-dash-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px; }
.skel-dash .skel-kpi { background: var(--surface-2); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.skel-dash .skel-kpi .skel-bar:first-child { height: 6px; width: 50%; }
.skel-dash .skel-kpi .skel-bar:last-child { height: 16px; width: 65%; }
.skel-dash .skel-dash-charts { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; padding: 0 14px 14px; flex: 1; }
.skel-dash .skel-chart { background: var(--surface-2); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; }
.skel-dash .skel-chart-head { height: 8px; width: 80px; margin-bottom: 12px; border-radius: 4px; background: var(--surface-3); }
.skel-dash .skel-chart-bars { flex: 1; display: flex; align-items: flex-end; gap: 6px; }
.skel-dash .skel-chart-bar { flex: 1; border-radius: 3px 3px 0 0; background: var(--surface-3); min-height: 12px; }
.skel-dash .skel-chart-bar:nth-child(odd) { background: var(--warm-gold); opacity: 0.35; }
.skel-dash .skel-donut { flex: 1; display: flex; align-items: center; justify-content: center; }
.skel-dash .skel-donut-ring { width: 80px; height: 80px; border-radius: 50%; border: 10px solid var(--surface-3); border-top-color: var(--warm-gold); opacity: 0.6; }

/* ===== Security — Shield + Checklist ===== */
.skel-security .skel-shield { display: flex; align-items: center; justify-content: center; padding: 24px; gap: 32px; flex: 1; }
.skel-security .skel-shield-icon { width: 100px; height: 120px; position: relative; }
.skel-security .skel-shield-icon::before { content: ''; position: absolute; inset: 0; background: var(--warm-gold); opacity: 0.15; clip-path: polygon(50% 0%, 100% 20%, 100% 65%, 50% 100%, 0% 65%, 0% 20%); }
.skel-security .skel-shield-icon::after { content: '🔒'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28px; }
.skel-security .skel-checks { display: flex; flex-direction: column; gap: 12px; }
.skel-security .skel-check { display: flex; align-items: center; gap: 10px; }
.skel-security .skel-check-icon { width: 24px; height: 24px; border-radius: 50%; background: var(--warm-gold); opacity: 0.3; display: flex; align-items: center; justify-content: center; }
.skel-security .skel-check-icon::after { content: '✓'; font-size: 12px; color: var(--surface-dark); font-weight: 700; }
.skel-security .skel-check .skel-bar { height: 8px; }

/* ===== Integrations — Connected Grid ===== */
.skel-integrations .skel-int-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 20px; flex: 1; align-content: center; }
.skel-integrations .skel-int-card { background: var(--surface-2); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.skel-integrations .skel-int-card .skel-circle { width: 36px; height: 36px; }
.skel-integrations .skel-int-card .skel-bar { height: 6px; width: 50px; }
.skel-integrations .skel-int-card:nth-child(3n+1) .skel-circle { background: var(--warm-gold); opacity: 0.4; }
.skel-integrations .skel-int-card:nth-child(3n+2) .skel-circle { background: var(--royal-navy); opacity: 0.3; }

/* ===== Files — File Browser ===== */
.skel-files .skel-file-bar { display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--surface-3); align-items: center; }
.skel-files .skel-file-bar .skel-bar { height: 8px; }
.skel-files .skel-file-bar .skel-bar:first-child { width: 80px; }
.skel-files .skel-file-bar .skel-bar:last-child { width: 28px; height: 28px; border-radius: 6px; margin-left: auto; }
.skel-files .skel-file-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px; flex: 1; align-content: start; }
.skel-files .skel-file { background: var(--surface-2); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.skel-files .skel-file-icon { width: 36px; height: 44px; border-radius: 4px; background: var(--surface-3); position: relative; }
.skel-files .skel-file-icon::after { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent var(--surface-1) transparent transparent; }
.skel-files .skel-file .skel-bar { height: 6px; width: 60px; }

/* ===== Safety Compliance — Checklist ===== */
.skel-safety .skel-checklist { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.skel-safety .skel-cl-head { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--surface-3); margin-bottom: 6px; }
.skel-safety .skel-cl-head .skel-bar:first-child { width: 120px; height: 10px; }
.skel-safety .skel-cl-head .skel-bar:last-child { width: 80px; height: 24px; border-radius: 12px; margin-left: auto; }
.skel-safety .skel-cl-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.skel-safety .skel-cl-check { width: 20px; height: 20px; border-radius: 4px; border: 2px solid var(--surface-3); flex-shrink: 0; }
.skel-safety .skel-cl-check--done { background: var(--warm-gold); opacity: 0.4; border-color: var(--warm-gold); }
.skel-safety .skel-cl-row .skel-bar { height: 7px; flex: 1; }
.skel-safety .skel-cl-row .skel-status { width: 48px; height: 16px; border-radius: 8px; background: var(--surface-3); flex-shrink: 0; }
.skel-safety .skel-cl-row .skel-status--pass { background: #2ecc71; opacity: 0.3; }

/* ===== Industry — Generic workflow ===== */
.skel-workflow .skel-wf-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--surface-3); }
.skel-workflow .skel-wf-header .skel-bar:first-child { width: 28px; height: 28px; border-radius: 6px; }
.skel-workflow .skel-wf-header .skel-bar:nth-child(2) { width: 90px; height: 10px; }
.skel-workflow .skel-wf-header .skel-bar:last-child { width: 60px; height: 24px; border-radius: 6px; margin-left: auto; }
.skel-workflow .skel-wf-body { flex: 1; display: grid; grid-template-columns: 200px 1fr; }
.skel-workflow .skel-wf-sidebar { background: var(--surface-2); border-right: 1px solid var(--surface-3); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.skel-workflow .skel-wf-nav { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; }
.skel-workflow .skel-wf-nav--active { background: var(--surface-3); }
.skel-workflow .skel-wf-nav .skel-circle { width: 20px; height: 20px; flex-shrink: 0; }
.skel-workflow .skel-wf-nav .skel-bar { height: 7px; flex: 1; }
.skel-workflow .skel-wf-content { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.skel-workflow .skel-wf-row { display: flex; gap: 10px; align-items: center; }
.skel-workflow .skel-wf-row .skel-bar { height: 7px; }
.skel-workflow .skel-wf-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; flex: 1; }
.skel-workflow .skel-wf-card { background: var(--surface-2); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.skel-workflow .skel-wf-card .skel-bar { height: 6px; }
.skel-workflow .skel-wf-card .skel-bar:first-child { width: 60%; height: 8px; }

/* ===== Mobile Phone Device ===== */
.skel-phone-wrap { display: flex; align-items: flex-end; justify-content: center; gap: 24px; margin-top: 48px; max-width: 800px; margin-left: auto; margin-right: auto; }
.skel-phone { width: 220px; flex-shrink: 0; background: linear-gradient(135deg, var(--surface-dark), var(--surface-dark-2)); border-radius: 28px; padding: 12px; box-shadow: var(--shadow-xl); border: 1px solid var(--surface-3); }
.skel-phone-screen { background: var(--surface-1); border-radius: 18px; overflow: hidden; aspect-ratio: 9/16; display: flex; flex-direction: column; }
.skel-phone-notch { width: 80px; height: 6px; background: var(--surface-dark); border-radius: 0 0 8px 8px; margin: 0 auto; flex-shrink: 0; }
.skel-phone-status { display: flex; justify-content: space-between; padding: 6px 12px 4px; }
.skel-phone-status .skel-bar { height: 4px; width: 24px; }
.skel-phone-nav { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--surface-3); align-items: center; }
.skel-phone-nav .skel-bar { height: 8px; }
.skel-phone-nav .skel-bar:first-child { width: 20px; height: 20px; border-radius: 4px; }
.skel-phone-nav .skel-bar:nth-child(2) { flex: 1; }
.skel-phone-nav .skel-circle { width: 20px; height: 20px; flex-shrink: 0; }
.skel-phone-body { flex: 1; display: flex; flex-direction: column; padding: 10px; gap: 8px; overflow: hidden; }
.skel-phone-home { width: 40px; height: 5px; background: var(--surface-3); border-radius: 3px; margin: 6px auto 4px; flex-shrink: 0; }

/* Phone variant: Task list */
.skel-phone--tasks .skel-phone-task { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--surface-2); border-radius: 8px; }
.skel-phone--tasks .skel-phone-task .skel-cl-check { width: 16px; height: 16px; border-radius: 3px; border: 2px solid var(--surface-3); flex-shrink: 0; }
.skel-phone--tasks .skel-phone-task .skel-cl-check--done { background: var(--warm-gold); opacity: 0.4; border-color: var(--warm-gold); }
.skel-phone--tasks .skel-phone-task .skel-bar { height: 6px; flex: 1; }
.skel-phone--tasks .skel-phone-task .skel-bar:last-child { width: 30px; height: 14px; border-radius: 7px; flex: none; }

/* Phone variant: Chat */
.skel-phone--chat .skel-phone-msg { display: flex; gap: 6px; align-items: flex-end; max-width: 85%; }
.skel-phone--chat .skel-phone-msg--right { align-self: flex-end; flex-direction: row-reverse; }
.skel-phone--chat .skel-phone-msg .skel-circle { width: 20px; height: 20px; flex-shrink: 0; }
.skel-phone--chat .skel-phone-bubble { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 3px; }
.skel-phone--chat .skel-phone-msg--right .skel-phone-bubble { background: var(--royal-navy); opacity: 0.15; border-radius: 10px 10px 4px 10px; }
.skel-phone--chat .skel-phone-bubble .skel-bar { height: 5px; }
.skel-phone--chat .skel-phone-input { margin-top: auto; display: flex; gap: 6px; align-items: center; }
.skel-phone--chat .skel-phone-input .skel-bar { flex: 1; height: 28px; border-radius: 14px; background: var(--surface-2); }
.skel-phone--chat .skel-phone-input .skel-circle { width: 28px; height: 28px; }

/* Phone variant: Time clock */
.skel-phone--time .skel-phone-clock { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; }
.skel-phone--time .skel-phone-clock-face { width: 72px; height: 72px; border-radius: 50%; border: 4px solid var(--warm-gold); opacity: 0.5; display: flex; align-items: center; justify-content: center; }
.skel-phone--time .skel-phone-clock-face .skel-bar { width: 50px; height: 14px; border-radius: 4px; }
.skel-phone--time .skel-phone-clockin { width: 80%; height: 32px; border-radius: 8px; }
.skel-phone--time .skel-phone-job { display: flex; align-items: center; gap: 6px; padding: 8px; background: var(--surface-2); border-radius: 8px; width: 100%; }
.skel-phone--time .skel-phone-job .skel-circle { width: 16px; height: 16px; flex-shrink: 0; }
.skel-phone--time .skel-phone-job .skel-bar { height: 6px; flex: 1; }

/* Desktop + Phone combo layout */
.skel-combo { display: flex; align-items: flex-end; justify-content: center; gap: 0; margin-top: 48px; max-width: 900px; margin-left: auto; margin-right: auto; }
.skel-combo .skel-wrap { margin-top: 0; flex: 1; min-width: 0; }
.skel-combo .skel-phone { margin-left: -40px; margin-bottom: -12px; z-index: 2; position: relative; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .skel-wrap { margin-top: 32px; }
  .skel-crm .skel-cols { grid-template-columns: 1fr 1fr; }
  .skel-chat .skel-sidebar { display: none; }
  .skel-pm .skel-board { grid-template-columns: 1fr; }
  .skel-dash .skel-dash-top { grid-template-columns: repeat(2, 1fr); }
  .skel-dash .skel-dash-charts { grid-template-columns: 1fr; }
  .skel-integrations .skel-int-grid { grid-template-columns: repeat(2, 1fr); }
  .skel-files .skel-file-grid { grid-template-columns: repeat(2, 1fr); }
  .skel-time .skel-tsheet-head, .skel-time .skel-tsheet-row { grid-template-columns: 100px repeat(3, 1fr) 60px; }
  .skel-tickets .skel-tkt-head, .skel-tickets .skel-tkt-row { grid-template-columns: 30px 2fr 1fr 60px; }
  .skel-tickets .skel-tkt-head .skel-bar:nth-child(4), .skel-tickets .skel-tkt-row > :nth-child(4) { display: none; }
  .skel-hr .skel-org-branch { gap: 20px; }
  .skel-hr .skel-org-row { gap: 24px; }
  .skel-invoice .skel-trow { grid-template-columns: 2fr 1fr 1fr; }
  .skel-invoice .skel-trow > :nth-child(3) { display: none; }
  .skel-security .skel-shield { flex-direction: column; gap: 20px; }
  .skel-workflow .skel-wf-body { grid-template-columns: 1fr; }
  .skel-workflow .skel-wf-sidebar { display: none; }
  .skel-workflow .skel-wf-cards { grid-template-columns: 1fr; }
  .skel-combo { flex-direction: column; align-items: center; gap: 24px; }
  .skel-combo .skel-phone { margin-left: 0; margin-bottom: 0; }
  .skel-combo .skel-wrap { width: 100%; }
  .skel-phone-wrap { margin-top: 32px; }
  .skel-phone { width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .skel-bar--shimmer { animation: none; }
}