/* Shared screen UI identity for printable activity tools. */
@media screen {
  body {
    background:
      linear-gradient(180deg, #f8fafc 0%, #eef2ff 42%, #f8fafc 100%) !important;
    color: #1f2937;
  }

  main {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  main > div,
  #controls,
  .no-print,
  #preview-section,
  #preview-area {
    letter-spacing: 0;
  }

  main > div[class*="bg-white"],
  #controls,
  #preview-section,
  #preview-area > div,
  #printable-area-container,
  #printable-container,
  #printableArea {
    border-radius: 0.75rem !important;
  }

  main > div[class*="bg-white"] {
    border: 1px solid rgba(99, 102, 241, 0.12);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08) !important;
  }

  #controls h1,
  .no-print h1,
  main h1 {
    color: #312e81 !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
  }

  #controls > .text-center:first-child,
  .no-print > .text-center:first-child,
  main > div > .no-print.text-center:first-child {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 2rem !important;
    padding-bottom: 1.5rem;
  }

  #controls p,
  .no-print p {
    color: #4b5563;
  }

  #controls .border,
  .no-print .border,
  #controls [class*="bg-gray-50"],
  .no-print [class*="bg-gray-50"] {
    border-color: #e5e7eb !important;
  }

  #controls .border,
  .no-print .border {
    border-radius: 0.75rem !important;
  }

  #controls label,
  .no-print label,
  #controls h2,
  #controls h3,
  .no-print h2,
  .no-print h3 {
    color: #1f2937;
  }

  #controls select,
  #controls input[type="number"],
  #controls input[type="text"],
  #controls input[type="file"],
  .no-print select,
  .no-print input[type="number"],
  .no-print input[type="text"],
  .no-print input[type="file"] {
    border-color: #c7d2fe !important;
  }

  #controls select:focus,
  #controls input:focus,
  .no-print select:focus,
  .no-print input:focus {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18) !important;
    border-color: #6366f1 !important;
  }

  #generate-button,
  #generateBtn {
    background: #4f46e5 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0.5rem !important;
    font-weight: 800 !important;
  }

  #generate-button:hover,
  #generateBtn:hover {
    background: #4338ca !important;
  }

  #print-button,
  #printBtn {
    background: #374151 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0.5rem !important;
    font-weight: 800 !important;
  }

  #print-button:hover,
  #printBtn:hover {
    background: #1f2937 !important;
  }

  .type-selector {
    border: 1px solid #e0e7ff;
  }

  .type-selector button {
    border-radius: 0.5rem !important;
    font-weight: 700;
  }

  #preview-section,
  #preview-area {
    margin-top: 2.5rem !important;
  }

  #preview-section h2,
  #preview-area h2 {
    color: #312e81 !important;
  }

  #printable-area-container,
  #printable-container,
  #printableArea {
    background: #fff !important;
    border: 0 !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08) !important;
    overflow-x: auto;
    padding: 1rem !important;
  }

  #printable-container:empty,
  #printableArea:empty,
  #printable-area-container:empty {
    display: none;
  }

  #printable-area-container .page,
  #printable-area-container .a4-page,
  #printable-container .page,
  #printable-container .printable-page,
  #printableArea .printable-page,
  #printableArea .activity-page {
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .pdf-download-btn {
    border-radius: 0.5rem !important;
  }

  @media (max-width: 640px) {
    main {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }

    #controls h1,
    .no-print h1,
    main h1 {
      font-size: 2rem !important;
    }
  }
}