:root { --tt-placeholder: #e3e6e8; --tt-loading-canvas: var(--bg, #f6f7f9); }
/* --bg is still light on :root in some shells; their dark override lives on body.
   Keep loader colours independent of that inherited, already-resolved variable. */
html[data-theme="dark"] { --tt-placeholder: #1c1c1c; --tt-loading-canvas: #000000; }
html[data-theme="dark"] .tt-skeleton { background: var(--tt-loading-canvas); }
.tt-skeleton { display: grid; gap: 20px; padding: 24px; width: 100%; box-sizing: border-box; }
.tt-skeleton [data-sk] { display: block; background: var(--tt-placeholder); border-radius: 7px; min-height: 16px; }
.tt-skeleton [data-sk="heading"] { width: 42%; height: 28px; margin-bottom: 10px; }
.tt-skeleton [data-sk="line"] { width: 68%; }
.tt-skeleton [data-sk="field"] { height: 44px; }
.tt-skeleton [data-sk="card"] { height: 128px; }
.tt-skeleton [data-sk="row"] { height: 48px; }
.tt-skeleton [data-sk="map"] { height: 230px; }
.tt-skeleton-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.tt-skeleton-calendar { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 8px; }
.tt-skeleton-calendar [data-sk] { height: 30px; }
.tt-skeleton-form { max-width: 680px; margin: auto; }
.tt-skeleton-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tt-navigation-skeleton { position: fixed; z-index: 90; overflow: auto; background: var(--tt-loading-canvas); }
.tt-content-loading { position: relative; }
.tt-content-loading > :not(.tt-inline-skeleton) { visibility: hidden; }
.tt-inline-skeleton { position: absolute; inset: 0; background: var(--tt-loading-canvas); overflow: hidden; }
.tt-hover-tip { position: fixed; z-index: 2147483647; margin: 0; padding: 7px 10px; max-width: min(260px, calc(100vw - 16px)); box-sizing: border-box; border: 0; border-radius: 7px; background: #252a30; color: #fff; font: 500 12px/1.4 system-ui, sans-serif; box-shadow: 0 3px 12px #0002; pointer-events: none; }
html[data-theme="dark"] .tt-hover-tip { background: #e6e9ed; color: #181c20; }
.tt-hover-tip[hidden] { display: none; }
@media(max-width: 600px) { .tt-skeleton { padding: 16px; gap: 16px; } .tt-skeleton-grid { gap: 10px; } }