/* YouTube-style loading placeholders (skeleton.js) */
:root{--sk-base:#e4ebf4;--sk-shine:rgba(255,255,255,.7);--sk-panel:#fff;--sk-line:#dce6f1;--sk-bar:#0068d6}
html[data-theme=dark]{--sk-base:#1f2c3f;--sk-shine:rgba(255,255,255,.07);--sk-panel:#162234;--sk-line:#26364c;--sk-bar:#3d8bff}

.sk{position:relative;display:block;overflow:hidden;background:var(--sk-base);border-radius:8px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--sk-shine),transparent);animation:sk-shimmer 1.4s ease-in-out infinite}
@keyframes sk-shimmer{100%{transform:translateX(100%)}}
.sk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sk-wrap{display:grid;gap:14px}

.sk-line{height:11px;border-radius:6px;width:100%}
.sk-w20{width:20%}.sk-w25{width:25%}.sk-w30{width:30%}.sk-w35{width:35%}.sk-w40{width:40%}.sk-w50{width:50%}.sk-w60{width:60%}.sk-w70{width:70%}.sk-w80{width:80%}.sk-w90{width:90%}.sk-w95{width:95%}
.sk-heading{height:26px;width:80%;border-radius:8px}
.sk-heading.sk-w40{width:40%}.sk-heading.sk-w60{width:60%}
.sk-button{width:112px;height:38px;border-radius:10px;flex:0 0 auto}
.sk-button-small{width:84px;height:32px}
.sk-button-wide{width:100%}
.sk-pill{height:40px;border-radius:10px}
.sk-search{height:48px;border-radius:12px}
.sk-row{display:flex;align-items:center;gap:12px}
.sk-row .sk-line{flex:1 1 auto}
.sk-body{display:grid;gap:10px;flex:1 1 auto;min-width:0}
.sk-panel{display:grid;gap:12px;padding:18px;border:1px solid var(--sk-line);border-radius:14px;background:var(--sk-panel)}

/* catalog cards */
.sk-cards{display:grid;gap:12px}
.sk-cards-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.sk-card{display:flex;gap:16px;align-items:center;padding:12px 16px 12px 12px;border:1px solid var(--sk-line);border-radius:14px;background:var(--sk-panel);min-height:88px}
.sk-thumb{flex:0 0 64px;height:64px;border-radius:12px}
.sk-side-actions{display:grid;gap:10px;justify-items:end;flex:0 0 120px}
.sk-card-grid{flex-direction:column;align-items:stretch;padding:0;overflow:hidden}
.sk-cover{height:150px;border-radius:0}
.sk-card-grid .sk-body{padding:0 16px 16px}

/* first page load */
.sk-page{padding-top:24px;padding-bottom:48px}
.sk-hero{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:32px;border:1px solid var(--sk-line);border-radius:22px;background:var(--sk-panel);margin-bottom:28px}
.sk-hero-text{display:grid;gap:14px;align-content:center}
.sk-hero-list{display:grid;gap:10px}
.sk-mini{display:flex;align-items:center;gap:14px;padding:10px;border:1px solid var(--sk-line);border-radius:12px}
.sk-mini .sk-line{flex:1 1 auto}
.sk-mini-thumb{flex:0 0 52px;height:52px;border-radius:10px}
.sk-layout{display:grid;grid-template-columns:200px 1fr;gap:32px}
.sk-sidebar{display:grid;gap:10px;align-content:start}
.sk-label{margin-top:14px}
.sk-main{display:grid;gap:14px;align-content:start;min-width:0}
.sk-crumb{margin:6px 0 18px}
.sk-product{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;margin-bottom:24px}
.sk-gallery{height:360px;border-radius:18px}
.sk-product-info{display:grid;gap:14px;align-content:start}
.sk-sections{display:grid;gap:16px}
.sk-account{display:grid;grid-template-columns:240px 1fr;gap:28px}
.sk-account-nav{display:grid;gap:10px;align-content:start;justify-items:center;padding:20px;border:1px solid var(--sk-line);border-radius:16px;background:var(--sk-panel)}
.sk-account-nav .sk-pill{width:100%}
.sk-avatar{width:80px;height:80px;border-radius:50%}
.sk-avatar-small{width:64px;height:64px;flex:0 0 64px}
.sk-avatar-tiny{width:36px;height:36px;flex:0 0 36px}
.sk-home{display:flex;align-items:center;gap:16px}
.sk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

/* top progress bar */
.sk-progress{position:fixed;top:0;left:0;z-index:2000;height:3px;width:100%;background:var(--sk-bar);box-shadow:0 0 8px var(--sk-bar);transform-origin:0 50%;transform:scaleX(0);opacity:0;pointer-events:none}
.sk-progress.is-loading{opacity:1;animation:sk-progress 8s cubic-bezier(.08,.8,.2,1) forwards}
.sk-progress.is-done{opacity:0;transform:scaleX(1);transition:transform .2s ease-out,opacity .3s .2s}
@keyframes sk-progress{0%{transform:scaleX(0)}100%{transform:scaleX(.9)}}

/* static fallback in index.html (before scripts run) */
.sk-boot-header{height:72px;border-bottom:1px solid var(--sk-line);background:var(--sk-panel)}
.sk-boot-header .container{display:flex;align-items:center;gap:24px;height:100%}
.sk-boot-logo{width:150px;height:30px}
.sk-boot-search{flex:0 1 360px;height:42px;border-radius:12px}
.sk-boot-actions{margin-left:auto;display:flex;gap:12px}
.sk-boot-actions .sk{width:44px;height:42px;border-radius:12px}

@media (max-width:900px){
  .sk-hero{grid-template-columns:1fr;padding:22px}
  .sk-hero-list{display:none}
  .sk-layout,.sk-account{grid-template-columns:1fr}
  .sk-sidebar,.sk-account-nav{display:none}
  .sk-product{grid-template-columns:1fr}
  .sk-gallery{height:240px}
  .sk-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .sk-side-actions{display:none}
  .sk-boot-search{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sk::after{animation:none}
  .sk-progress.is-loading{animation:none;transform:scaleX(.6)}
}
.app-loading-fallback:has(.sk-boot){display:block;min-height:0;padding:0;text-align:left}
.app-loading-fallback noscript{display:block;padding:24px;text-align:center}
.app-loading-fallback .sk-seo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}