/* =====================================
   Page
===================================== */

.page {

  width: min(100%, var(--content-width));

  margin: 0 auto;

  padding:
    var(--space-8)
    var(--space-4)
    var(--space-12);

}



/* =====================================
   Header
===================================== */

.page-header {

  margin-bottom: var(--space-8);

  text-align: center;

}


.page-header h1 {

  margin: 0 0 var(--space-4);

  font-size: var(--font-size-2xl);

}


.page-header p {

  margin: 0;

  color: var(--text-secondary);

}



/* =====================================
   Form
===================================== */

.upload-form {

  display: flex;

  flex-direction: column;

  gap: var(--space-6);

}



/* =====================================
   Drop Area
===================================== */

.drop-area {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: var(--space-4);

  padding: var(--space-10);

  background: var(--bg-secondary);

  border: 2px dashed var(--border-color);

  border-radius: var(--radius-lg);

  text-align: center;

  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);

}


.drop-area.dragover {

  border-color: var(--primary-500);

  background: var(--primary-50);

}


.drop-area h2 {

  margin: 0;

  font-size: var(--font-size-lg);

}


.drop-area p {

  margin: 0;

  color: var(--text-secondary);

}


.or-text {

  color: var(--text-tertiary);

}



/* =====================================
   File Info
===================================== */

.file-info {

  padding: var(--space-6);

  background: var(--bg-secondary);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-sm);

}


.file-info h2 {

  margin:
    0
    0
    var(--space-5);

  font-size: var(--font-size-lg);

}


.file-info dl {

  display: grid;

  grid-template-columns: auto 1fr;

  gap:
    var(--space-3)
    var(--space-5);

  margin: 0;

}


.file-info dt {

  font-weight: 600;

  color: var(--text-secondary);

}


.file-info dd {

  margin: 0;

  word-break: break-all;

}



/* =====================================
   Download
===================================== */

.download-section {

  display: flex;

  justify-content: center;

}


.download-section .button {

  min-width: 260px;
  padding:10px ;

}


.download-section button:disabled,
.download-section .button:disabled {

  opacity: 0.5;

  cursor: not-allowed;

}



/* =====================================
   Information
===================================== */

.information {

  margin-top: var(--space-8);

  padding: var(--space-6);

}


.information h2 {

  margin: var(--space-4);

  font-size: var(--font-size-lg);

}


.information ul {

  margin: 0;

  padding-left: 1.4rem;

  list-style: none;

}


.information li {

  margin-bottom: var(--space-2);

  color: var(--text-secondary);

}


.information li:last-child {

  margin-bottom: 0;

}



/* =====================================
   Responsive
===================================== */

@media (max-width: 768px) {

  .page {

    padding:
      var(--space-6)
      var(--space-4)
      var(--space-8);

  }


  .drop-area {

    padding: var(--space-8);

  }


  .download-section .button {

    width: 100%;

    min-width: auto;

  }


  .file-info dl {

    grid-template-columns: 1fr;

    gap: var(--space-2);

  }

}