:root {
  --skeleton-base: color-mix(in oklch, var(--fg) 7%, var(--surface-2));
  --skeleton-glint: color-mix(in oklch, var(--fg) 13%, var(--surface));
}

.data-loading-skeleton { display: none !important; }
.js .is-loading > [data-loading-skeleton] { display: grid !important; }
.js .is-loading > [data-loading-content] { display: none; }
.js .is-loading[data-loading-auto-shell] > :not([data-loading-static]):not([data-loading-skeleton]):not([data-loading-status]) { display: none !important; }
.data-loading-skeleton { gap: 18px; animation: skeleton-enter .18s ease-out both; }
.data-loading-skeleton[aria-hidden='true'] { user-select: none; }
.skeleton-grid { display: grid; grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.skeleton-card { min-height: 132px; display: grid; align-content: center; gap: 13px; padding: 22px; border-right: 1px solid var(--border); }
.skeleton-card:last-child { border-right: 0; }
.skeleton-risk { display: grid; grid-template-columns: 1.15fr repeat(2, minmax(0, .75fr)); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.skeleton-risk > div { min-height: 92px; display: grid; align-content: center; gap: 11px; padding: 18px 20px; border-right: 1px solid var(--border); }
.skeleton-risk > div:last-child { border-right: 0; }
.skeleton-workspace { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.skeleton-toolbar { min-height: 108px; display: grid; grid-template-columns: 160px minmax(260px, 1fr) repeat(3, 130px); gap: 14px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.skeleton-table-head, .skeleton-table-row { display: grid; grid-template-columns: 28px minmax(250px, 1.5fr) 150px 140px repeat(4, 110px) 62px; gap: 16px; align-items: center; min-height: 48px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.skeleton-table-head { min-height: 42px; background: var(--surface-2); }
.skeleton-table-row:last-child { border-bottom: 0; }
.skeleton-line, .skeleton-block, .skeleton-circle { position: relative; overflow: hidden; background: var(--skeleton-base); }
.skeleton-line::after, .skeleton-block::after, .skeleton-circle::after { content: ''; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(90deg, transparent, var(--skeleton-glint), transparent); animation: skeleton-shimmer 1.35s ease-in-out infinite; }
.skeleton-line { width: var(--sk-w, 72%); height: var(--sk-h, 10px); border-radius: 4px; }
.skeleton-block { width: var(--sk-w, 100%); height: var(--sk-h, 34px); border-radius: 6px; }
.skeleton-circle { width: var(--sk-size, 28px); height: var(--sk-size, 28px); border-radius: 50%; }
.skeleton-stack { display: grid; gap: 8px; }
.skeleton-inline-stat { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
.conversation-summary-card > .data-loading-skeleton { grid-column: 1 / -1; }
.skeleton-inline-stat .skeleton-line:first-child { width: 34px; }
.skeleton-local-list { display: grid; }
.skeleton-local-list > div { min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) 84px 58px; gap: 14px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.skeleton-local-list > div:last-child { border-bottom: 0; }
.skeleton-local-briefing { gap: 8px; }
.skeleton-local-briefing > div { border: 1px solid color-mix(in oklch, var(--yes) 14%, var(--border)); border-radius: var(--radius-sm); background: var(--surface); }
.skeleton-local-portfolio { min-height: 174px; display: grid; align-content: start; gap: 18px; padding: 16px; }
.skeleton-local-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 22px; padding-top: 15px; border-top: 1px solid var(--border); }
.skeleton-local-running > div { min-height: 86px; }
.skeleton-local-community > div { min-height: 112px; grid-template-columns: minmax(0, 1fr) 72px 56px; }
.skeleton-local-creators > div { min-height: 76px; grid-template-columns: minmax(0, 1fr) 84px 64px; }
.skeleton-compact-rows, .skeleton-table-rows { display: grid; }
.skeleton-compact-rows > div, .skeleton-table-rows > div { min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, .65fr) 88px; gap: 16px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.skeleton-compact-rows > div:last-child, .skeleton-table-rows > div:last-child { border-bottom: 0; }
.skeleton-settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 20px; }
.skeleton-settings-fields > :last-child { grid-column: 1 / -1; }
.skeleton-market-metrics { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; padding: 8px 0; }
.skeleton-chart { min-height: 276px; display: flex; align-items: end; gap: 7%; padding: 34px 24px 22px; border-bottom: 1px solid var(--border); }
.skeleton-chart > span { flex: 1; min-width: 10px; height: 42%; border-radius: 4px 4px 0 0; background: var(--skeleton-base); position: relative; overflow: hidden; }
.skeleton-chart > span:nth-child(2), .skeleton-chart > span:nth-child(6) { height: 58%; }
.skeleton-chart > span:nth-child(3) { height: 72%; }
.skeleton-chart > span:nth-child(4) { height: 50%; }
.skeleton-chart > span:nth-child(5) { height: 82%; }
.skeleton-chart > span:nth-child(7) { height: 66%; }
.skeleton-chart > span::after { content: ''; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(90deg, transparent, var(--skeleton-glint), transparent); animation: skeleton-shimmer 1.35s ease-in-out infinite; }
.skeleton-book { min-height: 360px; }
.skeleton-book .skeleton-compact-rows > div { min-height: 43px; grid-template-columns: repeat(3, 1fr); }
.connection-summary > .data-loading-skeleton, .tiles > .skeleton-preset-stat-tiles { grid-column: 1 / -1; }
.skeleton-preset-summary .skeleton-auto-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.skeleton-preset-connection-cards .skeleton-auto-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skeleton-preset-connection-cards .skeleton-auto-card:last-child { grid-column: 1 / -1; min-height: 132px; }
.skeleton-auto-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.skeleton-auto-stat, .skeleton-auto-panel, .skeleton-auto-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.skeleton-auto-stat { min-height: 104px; display: grid; align-content: center; gap: 12px; padding: 18px; }
.skeleton-auto-columns { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); gap: 14px; }
.skeleton-auto-panel { min-height: 286px; overflow: hidden; }
.skeleton-auto-panel-head { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 18px; border-bottom: 1px solid var(--border); }
.skeleton-auto-list { display: grid; }
.skeleton-auto-list > div { min-height: 58px; display: grid; grid-template-columns: minmax(180px, 1fr) 110px 92px; gap: 18px; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--border); }
.skeleton-auto-list > div:last-child { border-bottom: 0; }
.skeleton-auto-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.skeleton-auto-card { min-height: 178px; display: grid; align-content: space-between; gap: 18px; padding: 20px; }
.skeleton-detail-hero { min-height: 126px; display: grid; grid-template-columns: minmax(260px, 1fr) repeat(4, minmax(90px, .35fr)); gap: 22px; align-items: center; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.skeleton-detail-panes { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(340px, 1.2fr) minmax(250px, .9fr); gap: 14px; }
.skeleton-detail-panes .skeleton-auto-panel { min-height: 410px; }
.skeleton-settings-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; }
.skeleton-settings-nav { display: grid; align-content: start; gap: 12px; padding-top: 8px; }
.skeleton-settings-stack { display: grid; gap: 14px; }
.skeleton-settings-stack .skeleton-auto-panel { min-height: 190px; padding: 22px; }
.data-loading-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.is-loading-out > [data-loading-content] { animation: skeleton-content-in .2s ease-out both; }
.is-loading-out[data-loading-auto-shell] > :not([data-loading-static]):not([data-loading-skeleton]):not([data-loading-status]) { animation: skeleton-content-in .2s ease-out both; }

@keyframes skeleton-shimmer { 100% { transform: translateX(110%); } }
@keyframes skeleton-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes skeleton-content-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

@media (max-width: 1240px) {
  .skeleton-table-head, .skeleton-table-row { grid-template-columns: 28px minmax(220px, 1.5fr) 120px 120px repeat(2, 100px); }
  .skeleton-table-head > :nth-last-child(-n+3), .skeleton-table-row > :nth-last-child(-n+3) { display: none; }
  .skeleton-auto-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skeleton-preset-connection-cards .skeleton-auto-card-grid { grid-template-columns: 1fr; }
  .skeleton-detail-panes { grid-template-columns: minmax(240px, .8fr) minmax(360px, 1.2fr); }
  .skeleton-detail-panes > :last-child { display: none; }
}
@media (max-width: 900px) {
  .skeleton-preset-summary .skeleton-auto-stats { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .skeleton-grid, .skeleton-risk { grid-template-columns: 1fr; }
  .skeleton-card, .skeleton-risk > div { min-height: 92px; border-right: 0; border-bottom: 1px solid var(--border); }
  .skeleton-card:last-child, .skeleton-risk > div:last-child { border-bottom: 0; }
  .skeleton-toolbar { grid-template-columns: 1fr 1fr; min-height: 156px; }
  .skeleton-toolbar > :nth-child(n+3) { display: none; }
  .skeleton-table-head { display: none; }
  .skeleton-table-row { grid-template-columns: 28px minmax(0, 1fr) 82px; gap: 12px; min-height: 86px; }
  .skeleton-table-row > :nth-child(n+4) { display: none; }
  .skeleton-auto-stats, .skeleton-auto-columns, .skeleton-auto-card-grid, .skeleton-detail-hero, .skeleton-detail-panes, .skeleton-settings-layout { grid-template-columns: 1fr; }
  .skeleton-auto-stat { min-height: 82px; }
  .skeleton-auto-columns > :last-child { display: none; }
  .skeleton-auto-list > div { grid-template-columns: minmax(0, 1fr) 82px; min-height: 72px; }
  .skeleton-auto-list > div > :last-child { display: none; }
  .skeleton-detail-hero > :nth-child(n+3) { display: none; }
  .skeleton-detail-panes > :not(:first-child) { display: none; }
  .skeleton-settings-nav { display: flex; gap: 8px; overflow: hidden; }
  .skeleton-settings-nav .skeleton-block { min-width: 84px; }
  .skeleton-settings-fields { grid-template-columns: 1fr; }
  .skeleton-settings-fields > :last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line::after, .skeleton-block::after, .skeleton-circle::after, .skeleton-chart > span::after { animation: none; display: none; }
  .data-loading-skeleton, .is-loading-out > [data-loading-content] { animation: none; }
}
