.tcs-loading { --skeleton-fill: #e5e5e5; --skeleton-card: var(--surface, #fff); min-width: 0; pointer-events: none; }
.tcs-loading[hidden] { display: none !important; }
html[data-theme="dark"] .tcs-loading { --skeleton-fill: #292929; --skeleton-card: var(--surface, #111); }
.tcs-skeleton-caption { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tcs-skeleton-visual { position: relative; display: grid; gap: 14px; overflow: hidden; isolation: isolate; }
.tcs-skeleton-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.25) 48%, transparent 66%); transform: translateX(-100%); animation: tcs-skeleton-shimmer 2.2s ease-in-out infinite; pointer-events: none; }
html[data-theme="dark"] .tcs-skeleton-visual::after { opacity: .16; }
.tcs-skeleton-card { display: grid; align-content: start; gap: 13px; padding: 22px; border: 1px solid var(--line, #ddd); border-radius: 8px; background: var(--skeleton-card); min-width: 0; }
.tcs-skeleton-bar { display: block; width: 100%; height: 11px; border-radius: 4px; background: var(--skeleton-fill); }
.tcs-skeleton-bar.is-short { width: 32%; }
.tcs-skeleton-bar.is-medium { width: 68%; }
.tcs-skeleton-bar.is-title { height: 23px; margin-bottom: 5px; }
.tcs-skeleton-bar.is-input { height: 48px; }
.tcs-skeleton-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.tcs-skeleton-panels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.tcs-skeleton-messages { grid-template-columns: minmax(180px,.7fr) minmax(0,1.5fr); align-items: start; gap: 20px; }
.tcs-skeleton-list { display: grid; gap: 12px; }
.tcs-skeleton-form { padding-block: 12px; max-width: 700px; gap: 18px; }
.tcs-skeleton-line { padding-block: 8px; gap: 12px; }
.tcs-skeleton-calendar { padding: 22px; border: 1px solid var(--line, #ddd); border-radius: 8px; background: var(--skeleton-card); gap: 24px; }
.tcs-skeleton-calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; }
.tcs-skeleton-cell { height: 60px; background: var(--skeleton-fill); border-radius: 4px; }
.tcs-skeleton-map-block { height: clamp(220px,40vw,460px); border-radius: 8px; background: var(--skeleton-fill); }
#studio-loading, #portal-loading { margin-block: 20px 32px; }
.portal-main:has(#portal-loading:not([hidden])) .portal-total,
.portal-main:has(#portal-loading:not([hidden])) .portal-unread { visibility: hidden; }
#project-map-loading { position: absolute; inset: 0; padding: 20px; z-index: 3; background: var(--bg, #f5f5f5); }
#project-map-loading .tcs-skeleton-map-block { height: 100%; min-height: 240px; }
#project-map-loading .tcs-skeleton-visual { height: 100%; grid-template-rows: 1fr 12px; }
#my-cal-inline-30min { position: relative; }
#enquiry-cal-loading { position: absolute; inset: 0; z-index: 1; padding: 12px; background: var(--theme-bg, #fff); }
#portal-project-loading { flex: 1; padding: 24px; min-height: 420px; }
#project-form-skeleton { padding: 24px; }
.studio-main:has(#studio-loading:not([hidden])) > #studio-status,
.portal-main:has(#portal-loading:not([hidden])) #portal-notice,
#portal-panel-settings:has(#account-loading:not([hidden])) #account-status,
body:has(#project-form-skeleton:not([hidden])) > #project-form-loading,
#studio-review-emails:has(#studio-email-loading:not([hidden])) #studio-email-status,
#studio-onboarding:has(#studio-onboarding-loading:not([hidden])) #studio-onboarding-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes tcs-skeleton-shimmer { to { transform: translateX(100%); } }
@media(max-width:1100px) { .tcs-skeleton-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .tcs-skeleton-panels, .tcs-skeleton-messages { grid-template-columns: 1fr; } .tcs-skeleton-card { padding: 18px; } .tcs-skeleton-messages > .tcs-skeleton-list { max-height: 170px; overflow: hidden; } .tcs-skeleton-cell { height: 42px; } .tcs-skeleton-calendar { padding: 16px; } .tcs-skeleton-calendar-grid { gap: 5px; } }
@media(prefers-reduced-motion:reduce) { .tcs-skeleton-visual::after { animation: none; display: none; } }