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

      :root {
        --border: #ddd;
        --thinking: #664a98;
        --thinking-light: #f5f0fb;
        --social: #0774b8;
        --social-light: #f0f6fc;
        --comm: #4d7a2a;
        --selfmgmt: #bc8410;
        --research: #d45f80;
      }

      body {
        font-family: "Outfit", sans-serif;
        font-weight: 300;
        background: #fff;
        color: #222;
      }

      .page-wrapper {
        max-width: 1400px;
        margin: 0 auto;
        padding: 10px 12px 20px;
      }

      /* ── HEADER ── */
      .report-header {
        text-align: center;
        margin-bottom: 8px;
      }
      .report-header h1 {
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: center;
        font-size: 24px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #111;
        line-height: 1.15;
      }
      .report-header h1::before,
      .report-header h1::after {
        content: "";
        flex: 1;
        height: 1px;
        background-color: #111;
      }
      .report-header .subtitle {
        font-size: 12px;
        color: #666;
        font-style: italic;
        margin-top: 4px;
      }

      /* ── TABLE WRAPPER ── */
      .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      /* ── TABLE ── */
      .unit-table {
        border-collapse: collapse;
        width: 100%;
        min-width: 1100px;
        table-layout: fixed;
        border: 1px solid #ddd;
      }
      .unit-table th,
      .unit-table td {
        border: 1px solid var(--border);
        vertical-align: top;
        padding: 8px 6px;
      }

      /* ── THEAD ── */
      .unit-table thead th {
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-align: center;
        padding: 6px 6px;
        line-height: 1.2;
      }
      .unit-table thead th span {
        display: block;
        margin-bottom: 8px;
      }

      /* Text formatting in cells */
      .unit-table tbody td em {
        font-style: italic;
        font-weight: 300;
        font-size: 11px;
      }
      .unit-table thead th:nth-child(1) {
        background: #022156;
      }
      .unit-table thead th:nth-child(2) {
        background: #664a98;
      }
      .unit-table thead th:nth-child(3) {
        background: #476cb1;
      }
      .unit-table thead th:nth-child(4) {
        background: #1a8c91;
      }
      .unit-table thead th:nth-child(5) {
        background: #628c46;
      }
      .unit-table thead th:nth-child(6) {
        background: #c28604;
      }
      .unit-table thead th:nth-child(7) {
        background: #d04b71;
      }
      .unit-table thead th:nth-child(8) {
        background: #012056;
      }
      .unit-table thead tr:nth-child(2) th:nth-child(1) {
        background: #7a63b2 !important;
      }
      .unit-table thead tr:nth-child(2) th:nth-child(2) {
        background: #4f76be !important;
      }
      .unit-table thead tr:nth-child(2) th:nth-child(3) {
        background: #1b9b9e !important;
      }

      .atl-details-header {
        background: #012056 !important;
        color: #fff !important;
      }

      /* ── DATA CELLS ── */
      .unit-table tbody td {
        font-size: 10px;
        color: #333;
        line-height: 1.4;
        text-align: left;
        vertical-align: top;
      }

      .unit-table thead th i {
        font-size: 18px;
        display: block;
        margin-top: 6px;
      }

      /* Cell color definitions */
      .subject-cell {
        color: #001f55;
        background: #f9f9f9;
      }
      .unit-name-cell {
        color: var(--thinking);
        background: var(--thinking-light);
      }
      .grade-level-cell {
        color: var(--social);
        background: var(--social-light);
      }
      .key-concepts-cell {
        color: #1a8c91;
        background: #e8f5f7;
      }
      .related-concepts-cell {
        color: #628c46;
        background: #ecf3e8;
      }
      .global-context-cell {
        color: #c28604;
        background: #faf6f0;
      }
      .atl-cell-new {
        color: #d04b71;
        background: #faf2f5;
      }
      .statement-cell {
        color: #7a63b2;
        background: #f3f0fa;
      }
      .statement-alt-cell {
        color: #1b9b9e;
        background: #e8f3f3;
      }
      .skill-category-cell {
        color: #4f76be;
        background: #eff3fa;
      }

      /* Content containers (apply flex to wrapper divs inside cells) */
      .subject-content,
      .unit-name-content,
      .grade-level-content,
      .key-concepts-content,
      .related-concepts-content,
      .global-context-content,
      .atl-content,
      .statement-content,
      .statement-alt-content,
      .skill-category-content {
        display: flex;
        align-items: flex-start;
        gap: 12px;
      }

      /* Icons in cells */
      .subject-cell .subject-icon {
        font-size: 16px;
        flex-shrink: 0;
        margin-top: 1px;
        color: #001f55;
      }
      .unit-name-cell .unit-name-icon {
        font-size: 16px;
        flex-shrink: 0;
        margin-top: 1px;
        color: var(--thinking);
      }
      .grade-level-cell .grade-level-icon {
        font-size: 16px;
        flex-shrink: 0;
        margin-top: 1px;
        color: var(--social);
      }
      .key-concepts-cell .key-concepts-icon {
        font-size: 16px;
        flex-shrink: 0;
        margin-top: 1px;
        color: #1a8c91;
      }
      .related-concepts-cell .related-concepts-icon {
        font-size: 16px;
        flex-shrink: 0;
        margin-top: 1px;
        color: #628c46;
      }
      .global-context-cell .global-context-icon {
        font-size: 16px;
        flex-shrink: 0;
        margin-top: 1px;
        color: #c28604;
      }
      .atl-cell-new .atl-icon-main {
        font-size: 16px;
        flex-shrink: 0;
        margin-top: 1px;
        color: #d04b71;
      }
      .statement-cell .statement-icon {
        font-size: 16px;
        flex-shrink: 0;
        margin-top: 1px;
        color: #7a63b2;
      }
      .statement-alt-cell .statement-alt-icon {
        font-size: 16px;
        flex-shrink: 0;
        margin-top: 1px;
        color: #1b9b9e;
      }
      .skill-category-cell .skill-category-icon {
        font-size: 16px;
        flex-shrink: 0;
        margin-top: 1px;
        color: #4f76be;
      }

      /* Text containers in cells */
      .subject-cell .subject-text,
      .unit-name-cell .unit-name-text,
      .grade-level-cell .grade-level-text,
      .key-concepts-cell .key-concepts-text,
      .related-concepts-cell .related-concepts-text,
      .global-context-cell .global-context-text,
      .atl-cell-new .atl-text,
      .statement-cell .statement-text,
      .statement-alt-cell .statement-alt-text,
      .skill-category-cell .skill-category-text {
        text-align: left;
        font-size: 13px;
        line-height: 1.4;
      }

      /* Labels in cells */
      .subject-cell .subject-label {
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        color: #001f55;
      }
      .unit-name-cell .unit-name-label {
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        color: var(--thinking);
      }
      .grade-level-cell .grade-level-label {
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        color: var(--social);
      }
      .key-concepts-cell .key-concepts-label {
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        color: #1a8c91;
      }
      .related-concepts-cell .related-concepts-label {
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        color: #628c46;
      }
      .global-context-cell .global-context-label {
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        color: #c28604;
      }
      .atl-cell-new .atl-label {
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        color: #d04b71;
      }
      .statement-cell .statement-label {
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        color: #7a63b2;
      }
      .statement-alt-cell .statement-alt-label {
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        color: #1b9b9e;
      }
      .skill-category-cell .skill-category-label {
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        color: #4f76be;
      }

      /* Examples in cells */
      .subject-cell .subject-examples {
        font-style: italic;
        font-size: 12px;
        display: block;
        color: #001f55;
      }
      .unit-name-cell .unit-name-examples {
        font-style: italic;
        font-size: 12px;
        display: block;
        color: var(--thinking);
      }
      .grade-level-cell .grade-level-examples {
        font-style: italic;
        font-size: 12px;
        display: block;
        color: var(--social);
      }
      .key-concepts-cell .key-concepts-examples {
        font-style: italic;
        font-size: 12px;
        display: block;
        color: #1a8c91;
      }
      .related-concepts-cell .related-concepts-examples {
        font-style: italic;
        font-size: 12px;
        display: block;
        color: #628c46;
      }
      .global-context-cell .global-context-examples {
        font-style: italic;
        font-size: 12px;
        display: block;
        color: #c28604;
      }
      .atl-cell-new .atl-examples {
        font-style: italic;
        font-size: 12px;
        display: block;
        color: #d04b71;
      }
      .statement-cell .statement-examples {
        font-style: italic;
        font-size: 12px;
        display: block;
        color: #7a63b2;
      }
      .statement-alt-cell .statement-alt-examples {
        font-style: italic;
        font-size: 12px;
        display: block;
        color: #1b9b9e;
      }
      .skill-category-cell .skill-category-examples {
        font-style: italic;
        font-size: 12px;
        display: block;
        color: #4f76be;
      }

      /* ── KEY SECTION ── */
      .key-section {
        margin-top: 10px;
        padding: 12px 16px 14px;
        background: #f2f2f2;
        border: 1px solid #ddd;
        border-radius: 3px;
        position: relative;
      }
      .key-title {
        position: absolute;
        top: -5px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #222;
        background: #fff;
        padding: 0 10px;
        margin-bottom: 0;
      }
      .key-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px 12px;
        padding-top: 12px;
        list-style: none;
        padding-left: 0;
      }
      .key-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        flex: 1 1 180px;
        max-width: none;
      }
      .key-circle {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #fff;
        flex-shrink: 0;
      }
      .key-circle.thinking {
        background: var(--thinking);
      }
      .key-circle.comm {
        background: var(--comm);
      }
      .key-circle.social {
        background: var(--social);
      }
      .key-circle.selfmgmt {
        background: var(--selfmgmt);
      }
      .key-circle.research {
        background: var(--research);
      }
      .key-text strong {
        font-size: 13px;
        font-weight: 700;
        display: block;
        margin-bottom: 3px;
        color: #111;
      }
      .key-text p {
        font-size: 11px;
        color: #555;
        line-height: 1.5;
        margin: 0;
      }