@import url('/src/styles/global/root.css');
@import url('/src/styles/global/theme.css');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

.ad_header{
  margin: 0 auto;
  width: 40%;
  text-align: center;
}

.ad_header img {
  max-width: 100%;
  height: auto;
}

button {
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-components);
  cursor: pointer;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font-family: var(--font-components);
  scrollbar-color: var(--md-sys-color-primary) var(--md-sys-color-surface-container);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-tertiary);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--md-sys-color-on-tertiary);
}

.app-main {
  margin-left: var(--sidebar-width);
  width: auto;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  overflow-wrap: anywhere;
  padding: var(--padding-md);
  padding-top: calc(64px + var(--padding-md));
  min-height: calc(100vh - 64px);
  background-image: url('/public/img/backgound_page_home.png');
  background-size: contain;
  background-repeat: no-repeat;
}



.app-main > *,
.app-main section,
.app-main article,
.app-main header {
  min-width: 0;
  max-width: 100%;
}

.app-main *,
.app-main *::before,
.app-main *::after {
  min-width: 0;
  max-inline-size: 100%;
}

.app-main h1,
.app-main h2,
.app-main h3,
.app-main p,
.app-main strong,
.app-main span,
.app-main a,
.app-main button,
.app-main label,
.app-main dt,
.app-main dd {
  overflow-wrap: anywhere;
}

.app-main img,
.app-main iframe,
.app-main video {
  max-width: 100%;
}

.app-main .videos-grid,
.app-main .project-list,
.app-main .exercise-grid,
.app-main .settings-layout,
.app-main .profile-details,
.app-main .profile-stats,
.app-main .profile-badges {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.app-main .video-card,
.app-main .project-explore-card,
.app-main .exercise-card,
.app-main .settings-card,
.app-main .profile-card,
.app-main .profile-badge {
  min-width: 0;
  max-width: 100%;
}

.page-title {
  margin: 0;
  color: var(--md-sys-color-on-background);
  font: 600 clamp(2rem, 4vw, 3rem)/1.05 var(--font-main);
  letter-spacing: -.04em;
}

.skeleton-card {
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
}

.skeleton-block,
.skeleton-line {
  display: block;
  background: linear-gradient(
    90deg,
    var(--md-sys-color-surface-container-high) 25%,
    var(--md-sys-color-surface-container-highest) 50%,
    var(--md-sys-color-surface-container-high) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.4s ease-in-out infinite;
}

.skeleton-line {
  width: 82%;
  height: 12px;
}

.skeleton-line--title { width: 64%; height: 18px; }
.skeleton-line--short { width: 42%; }
.skeleton-line--small { width: 28%; }
.skeleton-line--tiny { width: 18%; }
.skeleton-row { display: flex; justify-content: space-between; gap: 12px; }

@keyframes skeleton-loading {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.reduced-motion .skeleton-block,
.reduced-motion .skeleton-line {
  animation: none;
}

@media (max-width: 900px) {
  .app-main {
    margin-left: 0;
    width: auto;
    padding: var(--padding-sm);
    padding-top: calc(64px + var(--padding-sm));
  }

  .page-title { font-size: clamp(2rem, 8vw, 3rem); }
}

.app-main > *,
.app-main .dashboard-section,
.app-main .settings-layout,
.app-main .profile-page,
.app-main .project-detail-page,
.app-main .video-detail-page,
.app-main .exercise-detail-page {
  max-inline-size: 100%;
}