/* =============================================================================
   Timetable Generator — Overlay, Steps, Viewer
   Accent colour: orange (#ff9671) — mirrors CertificateBuilder but with orange.
   All classes use the tg- prefix to avoid collisions.
   ============================================================================= */

/* ─────────────────────────────────────────────────
   Overlay
   ───────────────────────────────────────────────── */
.tg-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tg-overlay.is-open {
    display: flex;
}

/* ─────────────────────────────────────────────────
   Modal
   ───────────────────────────────────────────────── */
/* Modal with scrollable step content (steps 3 etc. can be tall) */
.tg-modal {
    position: relative;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 0;
    width: 100%;
    max-width: 480px;
    max-height: min(92vh, 820px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
    transition: max-width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-radius 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Close button sits outside scroll area — absolute to modal */
.tg-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: #98989D;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
    z-index: 2;
}

/* The scrollable content wrapper for step modals */
/* .tg-content (non-viewer): scroll container */
.tg-modal:not(.tg-modal--viewer):not(.tg-modal--wide) .tg-content,
.tg-modal.tg-modal--wide .tg-content {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Each step gets its own inner padding (actions are now a separate footer) */
.tg-step {
    padding: 40px 40px 20px;
}
.tg-modal--wide .tg-step {
    padding: 36px 32px 20px;
}

/* Step actions bar is sticky at the bottom of the modal */
.tg-step-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 40px 24px;
    border-top: 1px solid #F0F0F2;
    background: #FFFFFF;
    border-radius: 0 0 20px 20px;
    flex-shrink: 0;
}

/* Next-button wrapper for tooltip positioning */
.tg-s3-next-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
}
.tg-s3-err-tip {
    position: fixed;
    background: #1a1a2e;
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.45;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    z-index: 20;
    pointer-events: none;
    animation: tg-tip-in 0.15s ease;
}
.tg-s3-err-tip[hidden] { display: none; }
.tg-s3-err-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 14px;
    border: 6px solid transparent;
    border-top-color: #1a1a2e;
}
@keyframes tg-tip-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* Wide — manual entry table */
.tg-modal.tg-modal--wide {
    max-width: min(1020px, 97vw);
    max-height: min(92vh, 820px);
}

/* ─────────────────────────────────────────────────
   Wizard steps 1–5 — consistent fixed-size modal
   ───────────────────────────────────────────────── */
.tg-modal.tg-modal--step {
    width: min(900px, 96vw);
    max-width: none;
    height: min(88vh, 820px);
    max-height: none;
}

/* Step dot indicator header */
.tg-wizard-header {
    flex-shrink: 0;
    background: #FAFAFA;
    border-bottom: 1px solid #EBEBF0;
    border-radius: 20px 20px 0 0;
    padding: 18px 48px 16px;
}

.tg-wz-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 380px;
    margin: 0 auto;
}

.tg-wz-step {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #E5E5EA;
    color: #98989D;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid transparent;
    transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}

.tg-wz-step.is-done {
    background: #ff9671;
    color: #fff;
    border-color: #ff9671;
}

.tg-wz-step.is-active {
    background: #fff;
    color: #ff9671;
    border-color: #ff9671;
    box-shadow: 0 0 0 4px rgba(255, 150, 113, 0.15);
}

.tg-wz-conn {
    flex: 1;
    height: 2px;
    background: #E5E5EA;
    min-width: 40px;
    max-width: 100px;
    transition: background 0.25s;
}

.tg-wz-conn.is-done {
    background: #ff9671;
}

/* Step content — snug padding so nothing scrolls */
.tg-modal--step .tg-step {
    padding: 24px 48px 14px;
}

/* Step footer */
.tg-modal--step .tg-step-actions {
    padding: 14px 48px 22px;
}

/* Highlighted step badge — smaller margin */
.tg-modal--step .tg-step-badge {
    background: linear-gradient(135deg, #FFF3EF 0%, #FDE8DC 100%);
    color: #e07a55;
    border: 1px solid rgba(255, 150, 113, 0.25);
    margin-bottom: 10px;
}

/* Title — same size as before, not inflated */
.tg-modal--step .tg-title {
    font-size: 1.45rem;
    margin-bottom: 6px;
}

/* Desc — tighter margin, max-width so it doesn't stretch */
.tg-modal--step .tg-desc {
    font-size: 0.9rem;
    margin-bottom: 18px;
    max-width: 640px;
    line-height: 1.5;
}

/* Step 1 — option buttons centred and well-spaced */
.tg-modal--step .tg-input-options {
    gap: 24px;
    margin-bottom: 20px;
    justify-content: center;
}

.tg-modal--step .tg-option-btn {
    max-width: 260px;
    padding: 26px 20px 20px;
    border-radius: 18px;
    gap: 12px;
}

/* Step 5 — side-by-side schedule cards */
.tg-times-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

/* Manual-entry table (step 2) stays wider */
.tg-modal.tg-modal--wide.tg-modal--step {
    width: min(1020px, 97vw);
    height: min(88vh, 820px);
    max-width: none;
    max-height: none;
}

/* Viewer — full-screen editor style */
.tg-modal.tg-modal--viewer {
    max-width: min(1380px, 97vw);
    height: min(90vh, 880px);
    padding: 0;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tg-modal.tg-modal--viewer .tg-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Close button — viewer hides it */
.tg-modal--viewer .tg-close {
    display: none;
}

/* ─────────────────────────────────────────────────
   Step chrome
   ───────────────────────────────────────────────── */
.tg-step-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6E6E73;
    background: #F0F0F5;
    border-radius: 20px;
    padding: 3px 10px;
    margin-bottom: 16px;
}

.tg-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1D1D1F;
    margin: 0 0 6px;
    line-height: 1.2;
}

.tg-desc {
    font-size: 0.92rem;
    color: #6E6E73;
    margin: 0 0 28px;
    line-height: 1.5;
}

.tg-step--table .tg-desc {
    margin-bottom: 14px;
}

/* ─────────────────────────────────────────────────
   STEP 1 — Input option buttons
   ───────────────────────────────────────────────── */
.tg-input-options {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 24px;
}

.tg-option-btn {
    flex: 1;
    max-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #F5F5F7;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 24px 16px 20px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s,
                transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tg-option-btn:hover {
    background: #EBEBED;
    transform: translateY(-2px);
}

.tg-option-btn:focus-visible {
    outline: 2px solid #ff9671;
    outline-offset: 2px;
}

.tg-option-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EBEBED;
    border-radius: 12px;
    color: #3A3A3C;
    transition: background 0.18s, color 0.18s;
}

.tg-option-icon svg {
    width: 22px;
    height: 22px;
}

.tg-option-btn:hover .tg-option-icon {
    background: #FFEEDD;
    color: #ff9671;
}

.tg-option-name {
    font-size: 0.94rem;
    font-weight: 600;
    color: #1D1D1F;
}

.tg-option-sub {
    font-size: 0.78rem;
    color: #98989D;
    margin-top: -6px;
}

/* Download template bar */
.tg-template-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 18px;
    background: #fff3ef;
    border: 1px solid #FED7AA;
    border-radius: 12px;
    flex-wrap: wrap;
}

.tg-template-label {
    font-size: 0.86rem;
    color: #6E6E73;
}

.tg-template-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #ff9671;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tg-template-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tg-template-btn:hover {
    background: #e07a55;
    transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────
   STEP 2 (a) — Upload areas
   ───────────────────────────────────────────────── */
.tg-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 2px dashed #D1D1D6;
    border-radius: 14px;
    padding: 32px 24px 28px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.18s, background 0.18s;
    background: #FAFAFA;
    margin-bottom: 16px;
}

.tg-upload-area:hover,
.tg-upload-area.is-dragover {
    border-color: #ff9671;
    background: #fff3ef;
}

.tg-file-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tg-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #EBEBED;
    border-radius: 12px;
    color: #3A3A3C;
    margin-bottom: 4px;
}

.tg-upload-icon svg {
    width: 24px;
    height: 24px;
}

.tg-upload-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1D1D1F;
}

.tg-upload-hint {
    font-size: 0.78rem;
    color: #98989D;
}

.tg-success-msg {
    font-size: 0.86rem;
    color: #166534;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0;
}

.tg-error-msg {
    font-size: 0.84rem;
    color: #DC2626;
    background: #FFF5F5;
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0;
}

/* ─────────────────────────────────────────────────
   STEP 2 (b) — Manual data table
   ───────────────────────────────────────────────── */
.tg-table-wrap {
    overflow-x: auto;
    border: 1px solid #EBEBED;
    border-radius: 12px;
    margin-bottom: 12px;
}

.tg-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    min-width: 700px;
}

.tg-data-table thead th {
    background: #F5F5F7;
    color: #6E6E73;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 9px 10px;
    border-bottom: 1px solid #EBEBED;
    text-align: left;
    white-space: nowrap;
}

.tg-data-table thead th:last-child {
    width: 36px;
}

.tg-data-table tbody tr:nth-child(even) td {
    background: #FAFAFA;
}

.tg-data-table tbody tr:hover td {
    background: #fff3ef;
}

.tg-data-table tbody td {
    padding: 5px 6px;
    border-bottom: 1px solid #F0F0F5;
    vertical-align: middle;
}

.tg-th-sub {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: none;
    color: #98989D;
}

/* Cell inputs */
.tg-ci {
    width: 100%;
    min-width: 60px;
    height: 32px;
    padding: 0 8px;
    border: 1.5px solid #D1D1D6;
    border-radius: 7px;
    font-family: inherit;
    font-size: 0.84rem;
    color: #1D1D1F;
    background: #FFFFFF;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.tg-ci:focus {
    border-color: #ff9671;
    box-shadow: 0 0 0 3px rgba(255, 150, 113, 0.12);
}

.tg-ci--wide { min-width: 130px; }
.tg-ci--num  { max-width: 72px; text-align: center; }
.tg-ci--sm   { max-width: 70px; }

/* delete row button */
.tg-row-del {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #98989D;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.13s, color 0.13s;
}

.tg-row-del:hover {
    background: #FEE2E2;
    color: #DC2626;
}

/* Add row button */
.tg-btn--add-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1.5px dashed #D1D1D6;
    border-radius: 8px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    color: #6E6E73;
    cursor: pointer;
    margin-bottom: 4px;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.tg-btn--add-row:hover {
    border-color: #ff9671;
    color: #ff9671;
    background: #fff3ef;
}

/* ─────────────────────────────────────────────────
   STEP 3 — School schedule
   ───────────────────────────────────────────────── */
.tg-cycle-section {
    background: #fff3ef;
    border: 1px solid #FED7AA;
    border-radius: 10px;
    padding: 16px 20px 12px;
    margin-bottom: 24px;
}

.tg-cycle-section .tg-num-input {
    width: 90px;
}

.tg-cycle-hint {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: #92400E;
    line-height: 1.5;
}

.tg-time-pair {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.tg-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.80rem;
    font-weight: 600;
    color: #6E6E73;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tg-label--inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.88rem;
    font-weight: 500;
    color: #3A3A3C;
}

.tg-time-input {
    height: 38px;
    padding: 0 10px;
    border: 1.5px solid #D1D1D6;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.9rem;
    color: #1D1D1F;
    background: #FFFFFF;
    outline: none;
    transition: border-color 0.15s;
    min-width: 130px;
}

.tg-time-input:focus {
    border-color: #ff9671;
    box-shadow: 0 0 0 3px rgba(255, 150, 113, 0.12);
}

.tg-num-input {
    height: 38px;
    padding: 0 10px;
    border: 1.5px solid #D1D1D6;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.9rem;
    text-align: center;
    color: #1D1D1F;
    background: #FFFFFF;
    outline: none;
    width: 90px;
    transition: border-color 0.15s;
}

.tg-num-input:focus {
    border-color: #ff9671;
    box-shadow: 0 0 0 3px rgba(255, 150, 113, 0.12);
}

.tg-breaks-section {
    margin-bottom: 24px;
}

.tg-breaks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.tg-sub-heading {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1D1D1F;
}

.tg-break-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: #FAFAFA;
    border: 1px solid #EBEBED;
    border-radius: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.tg-break-num {
    font-size: 0.82rem;
    font-weight: 600;
    color: #ff9671;
    min-width: 60px;
}

/* ─────────────────────────────────────────────────
   STEP 3 — Periods per Day
   ───────────────────────────────────────────────── */
.tg-periods-section {
    margin-top: 28px;
}

.tg-periods-hint {
    font-size: 0.80rem;
    color: #6E6E73;
    line-height: 1.5;
    margin-bottom: 14px;
}

.tg-period-seg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 14px;
    background: #FAFAFA;
    border: 1px solid #EBEBED;
    border-radius: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.tg-seg-lbl {
    font-size: 0.83rem;
    font-weight: 600;
    color: #1D1D1F;
    min-width: 130px;
}

.tg-unit {
    font-size: 0.80rem;
    color: #6E6E73;
    white-space: nowrap;
}

.tg-same-days-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 10px;
    font-size: 0.84rem;
    color: #1D1D1F;
    cursor: pointer;
}

.tg-same-days-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #ff9671;
    cursor: pointer;
    flex-shrink: 0;
}

/* Per-day periods grid */
.tg-per-day-grid {
    border: 1px solid #EBEBED;
    border-radius: 10px;
    overflow-x: auto;
    margin-top: 4px;
}

.tg-pdg-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EBEBED;
}

.tg-pdg-row:last-child {
    border-bottom: none;
}

.tg-pdg-row--head {
    background: #F5F5F7;
}

.tg-pdg-cell {
    flex: 1;
    min-width: 70px;
    padding: 8px 10px;
    font-size: 0.80rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tg-pdg-cell--day {
    flex: 0 0 70px;
    font-weight: 700;
    font-size: 0.78rem;
    color: #ff9671;
    justify-content: flex-start;
    padding-left: 12px;
}

.tg-pdg-cell--hd {
    font-weight: 600;
    color: #6E6E73;
    font-size: 0.75rem;
    text-align: center;
    justify-content: center;
}

.tg-pdg-inp {
    width: 52px !important;
    text-align: center;
    padding: 5px 4px;
}

/* ─────────────────────────────────────────────────
   STEP 4 — Fixed subject times
   ───────────────────────────────────────────────── */
.tg-fixed-panel {
    background: #FAFAFA;
    border: 1px solid #EBEBED;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 4px;
}

.tg-fixed-scroll {
    max-height: 180px;
    overflow-y: auto;
    padding: 12px 14px 6px;
    border-bottom: 1px solid #EBEBED;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tg-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s;
}

.tg-check-item:hover {
    background: #fff3ef;
}

.tg-check {
    width: 16px;
    height: 16px;
    accent-color: #ff9671;
    cursor: pointer;
    flex-shrink: 0;
}

.tg-check-label {
    font-size: 0.88rem;
    color: #1D1D1F;
}

.tg-assign-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #EBEBED;
    flex-wrap: wrap;
}

.tg-assign-msg {
    font-size: 0.84rem;
    font-weight: 600;
    color: #166534;
    background: #F0FDF4;
    padding: 8px 14px;
    border-bottom: 1px solid #EBEBED;
}

.tg-assigned-list {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 40px;
}

.tg-no-fixed {
    font-size: 0.82rem;
    color: #98989D;
    font-style: italic;
    text-align: center;
    padding: 4px 0;
}

.tg-fixed-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85rem;
    color: #3A3A3C;
    background: #fff3ef;
    border: 1px solid #FED7AA;
    border-radius: 8px;
    padding: 6px 10px;
}

.tg-fixed-item strong {
    color: #ff9671;
}

.tg-fixed-rm {
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    color: #98989D;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}

.tg-fixed-rm:hover {
    background: #FEE2E2;
    color: #DC2626;
}

/* ─────────────────────────────────────────────────
   Shared buttons
   ───────────────────────────────────────────────── */
.tg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: 10px;
    padding: 10px 22px;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s,
                transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.15s, opacity 0.15s;
}

.tg-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

.tg-btn--primary {
    background: #ff9671;
    color: #FFFFFF;
}

.tg-btn--primary:not(:disabled):hover {
    background: #e07a55;
    transform: translateY(-1px) scale(1.02);
}

.tg-btn--ghost {
    background: transparent;
    color: #3A3A3C;
    border: 1.5px solid #D1D1D6;
}

.tg-btn--ghost:hover {
    background: #F5F5F7;
    border-color: #B0B0B8;
}

.tg-btn--sm {
    font-size: 0.84rem;
    padding: 8px 16px;
    border-radius: 8px;
}

.tg-btn--export {
    background: #ff9671;
    color: #FFFFFF;
    font-size: 0.84rem;
    padding: 8px 18px;
    border-radius: 8px;
}

.tg-btn--export:hover {
    background: #e07a55;
    transform: translateY(-1px);
}

/* Step action bar — now sticky footer, defined above with .tg-step-actions */

/* ─────────────────────────────────────────────────
   Schedule Conflict Dialog
   ───────────────────────────────────────────────── */
.tg-conflict-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tg-conflict-dialog {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 32px 32px 28px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.24);
    max-height: 90vh;
    overflow-y: auto;
}

.tg-conflict-icon {
    width: 44px;
    height: 44px;
    background: #fff3ef;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: #ff9671;
}

.tg-conflict-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1D1D1F;
    margin: 0 0 6px;
}

.tg-conflict-detail {
    font-size: 0.88rem;
    color: #6E6E73;
    line-height: 1.6;
    margin: 0 0 20px;
}

.tg-conflict-issues {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tg-conflict-issues li {
    background: #fff3ef;
    border: 1px solid #FED7AA;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.84rem;
    color: #92400E;
    line-height: 1.5;
}

.tg-conflict-issues li strong {
    color: #e07a55;
}

.tg-suggestions-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6E6E73;
    margin: 0 0 10px;
}

.tg-suggestions {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 20px;
}

.tg-suggestion-btn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #F5F5F7;
    border: 1px solid #EBEBED;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
    transition: background 0.14s, border-color 0.14s;
    width: 100%;
}

.tg-suggestion-btn:hover {
    background: #fff3ef;
    border-color: #FED7AA;
}

.tg-suggestion-btn-icon {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.tg-suggestion-btn-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tg-suggestion-label {
    font-size: 0.86rem;
    font-weight: 600;
    color: #1D1D1F;
}

.tg-suggestion-sub {
    font-size: 0.78rem;
    color: #6E6E73;
}

.tg-conflict-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ─────────────────────────────────────────────────
   STEP 5 — Viewer
   ───────────────────────────────────────────────── */
.tg-viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Viewer toolbar */
.tg-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 20px;
    background: #F5F5F7;
    border-bottom: 1px solid #EBEBED;
    flex-shrink: 0;
}

.tg-viewer-left,
.tg-viewer-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tg-viewer-title {
    font-size: 0.84rem;
    font-weight: 600;
    color: #6E6E73;
    padding-left: 4px;
}

/* Grade / Teacher toggle */
.tg-view-toggle {
    display: flex;
    background: #EBEBED;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.tg-toggle-btn {
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    color: #6E6E73;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 6px 16px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.tg-toggle-btn:hover {
    color: #1D1D1F;
}

.tg-toggle-btn.is-active {
    background: #ff9671;
    color: #FFFFFF;
    box-shadow: 0 1px 4px rgba(255, 150, 113, 0.30);
}

/* Toolbar close */
.tg-toolbar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: none;
    border: 1.5px solid #D1D1D6;
    border-radius: 8px;
    font-size: 1.2rem;
    line-height: 1;
    color: #6E6E73;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.tg-toolbar-close:hover {
    color: #1D1D1F;
    background: #F0F0F2;
    border-color: #B0B0B8;
}

/* Warning bar */
.tg-warning-bar {
    padding: 8px 20px;
    background: #FFFBEB;
    border-bottom: 1px solid #FDE68A;
    font-size: 0.82rem;
    color: #92400E;
    font-weight: 500;
    flex-shrink: 0;
}

/* Viewer body — scrollable */
.tg-viewer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 28px;
    background: #F9F9FB;
}

/* Per-grade timetable section */
.tg-tt-section {
    margin-bottom: 40px;
}

.tg-tt-grade-heading {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1D1D1F;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2.5px solid #3a3a3c;
    letter-spacing: -0.01em;
    text-align: center;
}

/* Scrollable table wrapper — native scrollbar hidden; global bar handles scrolling */
.tg-table-scroll {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tg-table-scroll::-webkit-scrollbar {
    display: none;
}

/* Global horizontal scrollbar — fixed at the very bottom of .tg-viewer, outside the body */
.tg-global-scrollbar {
    flex-shrink: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    background: #EBEBED;
    border-top: 1px solid #D1D1D6;
}

.tg-global-scrollbar > div {
    height: 1px;
}

.tg-global-scrollbar::-webkit-scrollbar {
    height: 10px;
}

.tg-global-scrollbar::-webkit-scrollbar-track {
    background: #EBEBED;
}

.tg-global-scrollbar::-webkit-scrollbar-thumb {
    background: #AEAEB2;
    border-radius: 10px;
    border: 2px solid #EBEBED;
}

.tg-global-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #8E8E93;
}

/* Timetable table */
.tg-tt-table {
    border-collapse: collapse;
    font-size: 0.84rem;
    min-width: 600px;
    background: #FFFFFF;
    /* No width:100% — cell widths drive the table width so size controls are visible */
}

.tg-tt-table thead th {
    background: #EBEBED;
    color: #1D1D1F;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 12px 22px;
    text-align: left;
    border-bottom: 2px solid #D1D1D6;
    white-space: nowrap;
    overflow: visible;
    position: relative;
}

.tg-tt-table thead th.tg-th-clock {
    width: 70px;
    color: #1D1D1F;
    background: #F5F5F7;
}

/* Period column header */
.tg-th-period {
    text-transform: none !important;
    letter-spacing: 0 !important;
    min-width: 96px;
}

/* Break column header */
.tg-th-break {
    background: #DCDCDC;
    color: #555;
    text-align: center !important;
    width: 52px;
    font-size: 0.68rem !important;
    font-style: normal;
    border-bottom: 2px solid #B0B0B8 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 8px 3px 22px !important;
    white-space: normal !important;
    word-break: break-word;
}

.tg-tt-table tbody tr:last-child td {
    border-bottom: none;
}

.tg-tt-table tbody tr:hover .tg-td--filled {
    background: #EDEDF0;
}

/* Day label cell (left stub, replaces old time column) */
.tg-td-day {
    font-weight: 700;
    font-size: 0.75rem;
    color: #1D1D1F;
    white-space: nowrap;
    padding: 6px 8px;
    border-bottom: 1.5px solid #C8C8CC;
    background: #F5F5F7;
    vertical-align: middle;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    text-align: center;
}

/* Break data cell */
.tg-td-break {
    background: #DCDCDC;
    border-bottom: 1px solid #AEAEB2;
    border-left: 1px solid #AEAEB2;
    padding: 8px 2px;
    width: 52px;
    vertical-align: top;
}

/* Regular cell — width comes from CSS variable set by cell-size controls */
.tg-td {
    padding: 8px 12px;
    border-bottom: 1.5px solid #C8C8CC;
    border-left: 1.5px solid #C8C8CC;
    vertical-align: top;
    min-width: var(--tg-cell-w, 100px);
    /* min-height on td is ignored by browsers — row height is set via tbody tr below */
}

/* Period number header — sets column width for all cells in that column */
.tg-th-period-num {
    min-width: var(--tg-cell-w, 100px);
}
.tg-th-event {
    position: relative;
    overflow: visible;
}

/* Empty period cells */
.tg-td-empty,
.tg-td-empty--add {
    min-width: var(--tg-cell-w, 100px);
    vertical-align: top;
    padding: 4px 6px;
    border-bottom: 1.5px solid #C8C8CC;
    border-left: 1.5px solid #C8C8CC;
}
/* Empty addable cells: override time at top, + absolutely centered */
.tg-td-empty--add {
    vertical-align: top;
    text-align: left;
}

/* Row height — height on tr is the reliable way to set table row height */
.tg-tt-table tbody tr {
    height: var(--tg-cell-h, 40px);
}

.tg-td--filled {
    background: #F0F0F5;
    cursor: pointer;
}

/* Structural header cells are clickable to style them */
.tg-td-day,
.tg-th-period-num,
.tg-th-break,
.tg-th-event {
    cursor: pointer;
}
.tg-td-day:hover,
.tg-th-period-num:hover,
.tg-th-break:hover,
.tg-th-event:hover {
    filter: brightness(0.92);
}

.tg-td-subj {
    display: block;
    font-weight: 700;
    font-size: var(--tg-cell-fs, 0.86rem);
    color: #1D1D1F;
    margin-bottom: 2px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

.tg-td-meta {
    display: block;
    font-size: var(--tg-cell-mfs, 0.68rem);
    color: #6E6E73;
    margin-bottom: 1px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* When a cell has inline colour, let it cascade into the content spans */
.tg-td[style] .tg-td-subj,
.tg-td[style] .tg-td-meta {
    color: inherit;
}

.tg-td-time {
    display: block;
    font-size: 0.74rem;
    color: #444444;
    font-weight: 500;
}

/* ─────────────────────────────────────────────────
   Step 4 — Empty Timetable
   ───────────────────────────────────────────────── */

/* Full-height step container for the timetable viewer */
.tg-step--tt {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 0;
    position: relative; /* anchor for .tg-sz-overlay */
}

/* Two-column layout: sidebar + timetable */
.tg-tt-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* When sidebar is removed, tg-tt-main fills full height directly */
.tg-step--tt > .tg-tt-main {
    flex: 1;
    min-height: 0;
}

/* ── Left settings sidebar ── */
.tg-tt-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #FFFFFF;
    border-right: 1px solid #E5E7EB;
    overflow-y: auto;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tg-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tg-sidebar-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #9e9e9e;
    padding-bottom: 4px;
    border-bottom: 1px solid #F0F0F2;
}

.tg-sidebar-section-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.tg-sidebar-toggle-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.tg-sidebar-toggle-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: #F7F7FA;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
}

.tg-sidebar-toggle-btn:hover {
    border-color: #ff9671;
    background: #FFF8F5;
}

.tg-sidebar-toggle-btn.is-active {
    border-color: #ff9671;
    background: #FFF3EC;
    box-shadow: 0 0 0 3px rgba(255, 150, 113, 0.10);
}

/* Mini cell preview inside each toggle button */
.tg-stb-preview {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    padding: 4px 7px;
    min-width: 64px;
    flex-shrink: 0;
}

.tg-stb-top {
    font-size: 10px;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
}

.tg-stb-bot {
    font-size: 9px;
    font-weight: 400;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
}

.tg-stb-label {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    flex: 1;
}

.tg-sidebar-toggle-btn.is-active .tg-stb-label {
    color: #ff9671;
}

/* ── Right timetable column ── */
.tg-tt-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Toolbar row: Back + Add Global Event */
/* ─────────────────────────────────────────────────
   Viewer topbar — 2-row layout
   ───────────────────────────────────────────────── */
.tg-tt-topbar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
}

/* Row 1 — back button, title, utilities */
.tg-topbar-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid #F0F0F5;
}

.tg-topbar-brand {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1D1D1F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-topbar-utils {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.tg-util-sep {
    width: 1px;
    height: 20px;
    background: #D1D1D6;
    flex-shrink: 0;
}

/* Row 2 — labelled control groups */
.tg-topbar-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 20px;
    background: #F9F9FB;
    flex-wrap: wrap;
}

.tg-ctrl-group {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tg-ctrl-group-lbl {
    font-size: 0.68rem;
    font-weight: 700;
    color: #8E8E93;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex-shrink: 0;
}

.tg-ctrl-divider {
    width: 1px;
    height: 24px;
    background: #D1D1D6;
    flex-shrink: 0;
    margin: 0 6px;
}

.tg-ctrl-spacer {
    flex: 1;
    min-width: 8px;
}

/* Separator inside toggle groups */
.tg-ctg-sep {
    width: 1px;
    align-self: stretch;
    background: #E5E5EA;
    flex-shrink: 0;
}

/* Classes / Teachers view toggle */
.tg-view-toggle {
    display: flex;
    align-items: center;
    background: #F0F0F5;
    border-radius: 9px;
    padding: 2px;
    gap: 1px;
}

.tg-view-toggle-btn {
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.80rem;
    font-weight: 600;
    color: #6E6E73;
    padding: 5px 13px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    line-height: 1;
}

.tg-view-toggle-btn:hover {
    color: #1D1D1F;
    background: #E5E5EA;
}

.tg-view-toggle-btn.is-active {
    background: #FFFFFF;
    color: #ff9671;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* Cell heading toggle — borderless inside ctrl-group */
.tg-heading-toggle-group {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #E5E5EA;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.tg-cell-display-btn {
    border: none;
    background: none;
    border-radius: 0;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: #3a3a3c;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
    line-height: 1;
}

.tg-cell-display-btn:hover {
    background: #F0F0F5;
    color: #1D1D1F;
}

.tg-cell-display-btn.is-active {
    background: #FFF3EF;
    color: #ff9671;
    font-weight: 700;
}

/* Color toggle group — Random + Reset */
.tg-color-toggle-group {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #E5E5EA;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.tg-color-toggle-group .tg-rand-colors-btn,
.tg-color-toggle-group .tg-rm-colors-btn {
    background: none;
    border: none;
    border-radius: 0;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
    line-height: 1;
}

.tg-color-toggle-group .tg-rand-colors-btn {
    color: #3a3a3c;
}
.tg-color-toggle-group .tg-rand-colors-btn:hover {
    background: #F5F5F7;
    color: #1D1D1F;
}
.tg-color-toggle-group .tg-rm-colors-btn {
    color: #c0392b;
}
.tg-color-toggle-group .tg-rm-colors-btn:hover {
    background: #FFF5F5;
    color: #a93226;
}

/* Zoom control */
.tg-zoom-ctrl {
    display: flex;
    align-items: center;
    background: #F0F0F5;
    border-radius: 8px;
    padding: 2px 4px;
    gap: 2px;
}

.tg-zoom-btn {
    border: none;
    background: none;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1D1D1F;
    cursor: pointer;
    padding: 3px 9px;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.12s;
}

.tg-zoom-btn:hover:not(:disabled) {
    background: #E5E5EA;
}

.tg-zoom-btn:disabled {
    color: #AEAEB2;
    cursor: not-allowed;
}

.tg-zoom-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1D1D1F;
    min-width: 36px;
    text-align: center;
    user-select: none;
    font-variant-numeric: tabular-nums;
}

/* Zoom content wrapper — zoom is applied to this div */
#tg-tt-zoom-inner {
    display: block;
    width: 100%;
    transform-origin: 0 0;
}

/* Copy JSON button */
/* Mobile-only elements — hidden on desktop, shown in @media (max-width: 640px) */
.tg-mobile-settings-btn { display: none; }
.tg-mobile-global-bar   { display: none; }
.tg-mobile-view-bar     { display: none; }

.tg-copy-json-btn {
    display: none;
    border: 1.5px solid #D1D1D6;
    background: #F5F5F7;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1D1D1F;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tg-copy-json-btn:hover {
    background: #EBEBED;
    border-color: #B0B0B8;
}

.tg-copy-json-btn.is-copied {
    background: #ECFDF5;
    border-color: #6EE7B7;
    color: #065F46;
}

/* Fill-in timetables banner */
.tg-fill-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 20px;
    background: #fff3ef;
    border-bottom: 1px solid #FED7AA;
    font-size: 13px;
    color: #7c4a00;
    flex-shrink: 0;
}

.tg-fill-hint-icon {
    font-size: 14px;
    color: #ff9671;
    flex-shrink: 0;
}

.tg-fill-hint-text {
    color: #7c4a00;
}

.tg-fill-all-btn {
    display: inline-flex;
    align-items: center;
    background: #ff9671;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}

.tg-fill-all-btn:hover {
    background: #e07a55;
}

.tg-fill-all-btn:active {
    background: #9a3412;
}

.tg-reshuffle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    color: #3a3a3c;
    border: 1.5px solid #E5E5EA;
    border-radius: 8px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}
.tg-reshuffle-btn:hover {
    background: #F0F0F5;
    color: #1D1D1F;
}
.tg-reshuffle-btn:active {
    background: #E5E5EA;
    color: #1D1D1F;
}

.tg-clear-schedule-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    color: #c0392b;
    border: 1.5px solid #E5E5EA;
    border-radius: 8px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}
.tg-clear-schedule-btn:hover {
    background: #FFF5F5;
    color: #a93226;
}
.tg-clear-schedule-btn:active {
    background: #FDECEA;
}

/* Help / ? circle button */
.tg-ev-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid #D1D1D6;
    background: #F5F5F7;
    color: #6E6E73;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    font-family: inherit;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tg-ev-help-btn:hover {
    background: #EBEBED;
    border-color: #B0B0B8;
    color: #1D1D1F;
}

.tg-ev-tooltip {
    position: absolute;
    right: 0;
    top: 34px;
    background: #1D1D1F;
    color: #FFFFFF;
    font-size: 0.76rem;
    font-weight: 400;
    border-radius: 8px;
    padding: 8px 12px;
    width: 230px;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 30;
    line-height: 1.5;
    font-family: inherit;
}

.tg-ev-help-btn:hover .tg-ev-tooltip {
    opacity: 1;
}

/* Add-event panel — inline strip below toolbar */
.tg-add-ev-panel {
    flex-shrink: 0;
}

.tg-add-ev-panel:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 10500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 24px 20px;
}

.tg-add-ev-panel-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 520px;
    background: #FFFFFF;
    border-radius: 18px;
    padding: 40px 32px 28px;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}

/* Close button — visible on all viewports */
.tg-add-ev-mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.06);
    color: #3A3A3C;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
}
.tg-add-ev-mobile-close:hover {
    background: rgba(0,0,0,0.12);
}

.tg-add-ev-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 160px;
}

.tg-add-ev-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6E6E73;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tg-add-ev-field .tg-ci {
    width: 100%;
    box-sizing: border-box;
}

.tg-add-ev-field select {
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid #D1D1D6;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #FFFFFF;
    color: #1D1D1F;
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
}

.tg-add-ev-field select:focus,
.tg-add-ev-field .tg-ci:focus {
    border-color: #ff9671;
    box-shadow: 0 0 0 3px rgba(255,150,113,0.12);
}

/* Full-width field (day checkboxes row) */
.tg-add-ev-field--full {
    flex-basis: 100%;
    flex-grow: 0;
}

/* Hint text inside label */
.tg-ev-days-hint {
    font-size: 0.70rem;
    font-weight: 400;
    color: #98989D;
    text-transform: none;
    letter-spacing: 0;
}

/* Day checkbox row */
.tg-ev-day-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.tg-ev-day-lbl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #3A3A3C;
    background: #FFFFFF;
    border: 1.5px solid #D1D1D6;
    border-radius: 7px;
    padding: 4px 8px;
    cursor: pointer;
    transition: border-color 0.13s, background 0.13s;
    text-transform: none;
    letter-spacing: 0;
    user-select: none;
}

.tg-ev-day-lbl:has(input:checked) {
    border-color: #ff9671;
    background: #fff3ef;
    color: #ff9671;
}

.tg-ev-day-lbl input {
    display: none;
}

.tg-add-ev-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    padding-top: 4px;
}

/* Conflict row — shown when a new event overlaps an existing one at the same position */
.tg-ev-conflict-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 24px 14px;
    border-top: 1.5px solid #FED7AA;
}

/* ─────────────────────────────────────────────────
   Table Size button (toolbar)
   ───────────────────────────────────────────────── */
.tg-table-size-btn {
    display: none;
    align-items: center;
    gap: 5px;
    background: #F5F5F7;
    border: 1.5px solid #E5E5EA;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: #3a3a3c;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.tg-table-size-btn:hover {
    background: #EBEBED;
    border-color: #B0B0B8;
    color: #1D1D1F;
}

/* ─────────────────────────────────────────────────
   Table Size popup overlay
   ───────────────────────────────────────────────── */
.tg-sz-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tg-sz-overlay[hidden] { display: none; }

.tg-sz-panel {
    background: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.22);
    display: flex;
    flex-direction: column;
    width: 520px;
    max-width: 100%;
    max-height: 90vh;
    overflow: hidden;
}

.tg-sz-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #F0F0F2;
    flex-shrink: 0;
}

.tg-sz-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1D1D1F;
    letter-spacing: -0.01em;
}

.tg-sz-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: #98989D;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}
.tg-sz-close:hover { background: #F5F5F7; color: #1D1D1F; }

.tg-sz-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 22px;
    overflow-y: auto;
    flex: 1;
}

/* Info text above controls */
.tg-sz-info {
    margin: 0 0 12px;
    font-size: 0.80rem;
    color: #6E6E73;
    line-height: 1.5;
}

/* Controls row */
.tg-sz-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tg-sz-ctrl-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tg-sz-lbl {
    font-size: 0.84rem;
    font-weight: 600;
    color: #3A3A3C;
    min-width: 110px;
}

.tg-sz-step-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F5F5F7;
    border: 1.5px solid #E5E5EA;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1D1D1F;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    flex-shrink: 0;
}
.tg-sz-step-btn:hover:not(:disabled) { background: #EBEBED; border-color: #B0B0B8; }
.tg-sz-step-btn:disabled { color: #AEAEB2; cursor: not-allowed; }

.tg-sz-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ff9671;
    min-width: 36px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.tg-sz-unit {
    font-size: 0.78rem;
    color: #8E8E93;
    font-weight: 500;
}

/* A4 preview area */
.tg-sz-preview-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tg-sz-preview-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #8E8E93;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* The A4 landscape frame — fixed display size, overflow clipped */
.tg-sz-a4-frame {
    width: 420px;
    height: 297px;
    background: #FFFFFF;
    border: 2px solid #D1D1D6;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color 0.2s;
}

.tg-sz-a4-frame--over {
    border-color: #ff9671;
    box-shadow: 0 0 0 3px rgba(255,150,113,0.18), 0 4px 16px rgba(0,0,0,0.10);
}

/* Margin inset */
.tg-sz-a4-margin {
    position: absolute;
    inset: 14px; /* 10mm margin in preview scale */
    overflow: hidden;
}

/* The generated preview table sits inside and may overflow (clipped by parent) */
.tg-sz-table-preview {
    position: absolute;
    top: 0;
    left: 0;
    line-height: 0;
    font-size: 0;
}

/* Fit indicator line */
.tg-sz-fit-line {
    font-size: 0.80rem;
    font-weight: 600;
    padding: 4px 0;
}

.tg-sz-fit-line--ok   { color: #166534; }
.tg-sz-fit-line--warn { color: #92400E; }

/* ── Fit-to-A4 checkboxes ───────────────────────────────────── */
/* (kept for legacy safety but no longer rendered) */
.tg-sz-fit-opts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: #fff3ef;
    border: 1px solid #FED7AA;
    border-radius: 10px;
    margin-bottom: 12px;
}

.tg-sz-fit-lbl {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.tg-sz-fit-chk {
    width: 15px;
    height: 15px;
    accent-color: #ff9671;
    cursor: pointer;
    margin-top: 2px;
    flex-shrink: 0;
}

.tg-sz-fit-txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tg-sz-fit-txt strong {
    font-size: 0.84rem;
    font-weight: 700;
    color: #1D1D1F;
}

.tg-sz-fit-txt span {
    font-size: 0.73rem;
    color: #6E6E73;
}

/* "auto" pill badge shown next to value when fit mode is on */
.tg-sz-auto-tag {
    display: inline-flex;
    align-items: center;
    background: #ff9671;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 20px;
    margin-left: 4px;
    user-select: none;
}
.tg-sz-auto-tag[hidden] { display: none; }

/* Dim the value display when it is auto-controlled */
.tg-sz-val--auto {
    color: #A0A0A8;
}

.tg-sz-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid #F0F0F2;
    flex-shrink: 0;
}

.tg-ev-conflict-msg {
    flex: 1;
    min-width: 200px;
    margin: 0;
    font-size: 0.81rem;
    color: #92400E;
    line-height: 1.5;
}

/* Event chips row */
.tg-ev-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 24px;
    flex-shrink: 0;
    background: #FFFFFF;
    border-bottom: 1px solid #F0F0F5;
}

.tg-ev-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #FFF4EE;
    border: 1.5px solid #ff9671;
    color: #ff9671;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 20px;
    padding: 4px 10px 4px 12px;
}

.tg-ev-chip-rm {
    background: none;
    border: none;
    cursor: pointer;
    color: #ff9671;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    opacity: 0.7;
}

.tg-ev-chip-rm:hover { opacity: 1; }

.tg-ev-chip-pos {
    font-weight: 400;
    font-size: 0.75rem;
    opacity: 0.75;
}

/* Global event column header */
.tg-th-event {
    background: #E8E8ED;
    color: #3C3C43;
    text-align: center !important;
    font-style: normal;
    font-size: 0.68rem !important;
    white-space: normal !important;
    border-bottom: 2px solid #C8C8D0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    overflow: visible;
    position: relative;
    padding: 8px 3px 22px !important;
}

/* Event column header label — font size is shrunk by JS to fit the column */
.tg-th-event-label {
    display: block;
    white-space: nowrap;
    text-align: center;
    line-height: normal;
}

/* Global event data cell */
.tg-td-event {
    background: #EFEFF3;
    text-align: center;
    font-size: 0.68rem;
    font-style: normal;
    color: #3C3C43;
    font-weight: 500;
    border-bottom: 1.5px solid #C8C8CC;
    border-left: 1.5px solid #C8C8CC;
    padding: 8px 4px;
    white-space: normal;
    word-break: break-word;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    overflow: hidden;
    vertical-align: top;
}

/* Off-day event cell (partial event, day not active) — invisible */
.tg-td-event--off {
    background: #F9F9FB;
    color: transparent;
    font-size: 0;
}

/* Numbered period column header */
.tg-th-period-num {
    text-align: center !important;
    width: 52px;
    min-width: 52px;
    font-size: 0.9rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Empty period cell */
.tg-td-empty {
    min-width: 52px;
    width: 52px;
    height: 36px;
    border-bottom: 1.5px solid #C8C8CC;
    border-left: 1.5px solid #C8C8CC;
    background: #FFFFFF;
}

.tg-no-sessions {
    font-size: 0.88rem;
    color: #98989D;
    font-style: italic;
    padding: 8px 0;
}

/* Assembly column header */
.tg-th-assembly {
    background: #E8E8ED !important;
    color: #3C3C43 !important;
    text-align: center !important;
    width: 64px;
    font-style: italic;
    border-bottom: 2px solid #B0B0B8 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Assembly data cell */
.tg-td-assembly {
    background: #EBEBED;
    text-align: center;
    font-size: 0.78rem;
    font-style: italic;
    color: #3C3C43;
    border-bottom: 1px solid #D8D8DC;
    border-left: 1px solid #D8D8DC;
    vertical-align: middle;
    padding: 6px 8px;
    min-width: 64px;
}

.tg-td-assembly.tg-td-assembly--off {
    color: #B0B0B8;
    background: #F5F5F7;
}

/* OFF period cell — teacher view only */
.tg-td.tg-td-off {
    background: #F5F5F7;
    color: #98989D;
    font-style: italic;
    text-align: center;
    font-size: 0.78rem;
    vertical-align: middle;
}

/* Assembly step add-row */
.tg-assembly-section {
    margin-top: 4px;
}

.tg-assembly-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    padding: 14px;
    background: #F5F5F7;
    border-radius: 10px;
    margin-bottom: 12px;
}

.tg-select {
    display: block;
    padding: 7px 10px;
    border: 1.5px solid #D1D1D6;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1D1D1F;
    background: #FFFFFF;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
    margin-top: 4px;
}

.tg-select:focus {
    border-color: #ff9671;
}

.tg-asm-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 32px;
}

/* Teacher load warning bar variant */
.tg-warning-bar--load {
    background: #FFF3CD;
    border-color: #D4A017;
    color: #7D5A00;
}

/* Clash error bar — red; shown when double-bookings are detected */
.tg-warning-bar--clash {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #991B1B;
    font-weight: 600;
}

/* All-clear bar — green; shown when clash check passes */
.tg-warning-bar--ok {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #166534;
}

/* ─────────────────────────────────────────────────
   Step 3 — Constraints section
   ───────────────────────────────────────────────── */

.tg-constraints-section {
    margin-bottom: 28px;
}

.tg-constraints-section + .tg-constraints-section {
    border-top: 1px solid #E5E5EA;
    padding-top: 24px;
}

.tg-optional-tag {
    display: inline-block;
    font-size: 0.725rem;
    font-weight: 500;
    color: #6E6E73;
    background: #F2F2F7;
    border: 1px solid #D1D1D6;
    border-radius: 20px;
    padding: 1px 8px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────────
   Step 4 — Suggestion Cards
   ───────────────────────────────────────────────── */

.tg-suggestion-grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
    gap: 16px;
    margin-bottom: 20px;
}

.tg-suggestion-card {
    border: 1.5px solid #D1D1D6;
    border-radius: 14px;
    padding: 18px 18px 16px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tg-suggestion-card:hover {
    border-color: #ff9671;
    box-shadow: 0 4px 16px rgba( 234, 88, 12, 0.10 );
}

.tg-sug-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tg-sug-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: #ff9671;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tg-sug-title {
    font-size: 0.97rem;
    font-weight: 700;
    color: #1D1D1F;
    line-height: 1.3;
}

.tg-sug-details {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.tg-sug-details li {
    font-size: 0.82rem;
    color: #444;
    line-height: 1.45;
    padding-left: 14px;
    position: relative;
}

.tg-sug-details li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #ff9671;
    font-size: 0.8rem;
    line-height: 1.6;
}

.tg-sug-note {
    font-weight: 600;
    color: #ff9671;
}

.tg-manual-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #F5F5F7;
    border-radius: 10px;
    margin-bottom: 8px;
}

.tg-manual-label {
    font-size: 0.875rem;
    color: #6E6E73;
}

/* ─────────────────────────────────────────────────
   Step 4 — Preference Form
   ───────────────────────────────────────────────── */

.tg-pref-section {
    margin-bottom: 24px;
}

.tg-pref-break-choice {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.tg-pref-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 8px 18px;
    border: 1.5px solid #D1D1D6;
    border-radius: 20px;
    background: #FFFFFF;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    user-select: none;
}

.tg-pref-radio:has(input:checked) {
    border-color: #ff9671;
    background: #FFF4EE;
    color: #ff9671;
    font-weight: 600;
}

.tg-pref-radio input {
    display: none;
}

.tg-pref-structure {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 16px 0 8px;
    gap: 0;
}

.tg-pref-seg-block {
    background: #FFFFFF;
    border: 1.5px solid #D1D1D6;
    border-radius: 12px;
    padding: 14px 16px;
    min-width: 110px;
    text-align: center;
    flex-shrink: 0;
}

.tg-pref-seg-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6E6E73;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 6px;
}

.tg-pref-seg-row {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.tg-pref-break-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 14px;
    flex-shrink: 0;
}

.tg-pref-brk-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.tg-pref-brk-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #6E6E73;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tg-pref-bk-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tg-pref-unit {
    font-size: 0.78rem;
    color: #6E6E73;
}

/* ─────────────────────────────────────────────────
   Step 5 — Day Structure Timeline
   ───────────────────────────────────────────────── */

/* Horizontal flex chain: Cap → Segment → Divider → Segment → Cap */
.tg-day-timeline {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1.5px solid #D1D1D6;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #FFFFFF;
}

/* School start / end caps */
.tg-dts-cap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #1D1D1F;
    background: #F5F5F7;
    border-right: 1px solid #E5E5EA;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.04em;
    min-height: 80px;
}

.tg-dts-cap--end {
    border-right: none;
    border-left: 1px solid #E5E5EA;
}

/* Teaching segment block */
.tg-dts-seg {
    flex: 1;
    min-width: 90px;
    background: #fff3ef;
    border-left: 1px solid #FED7AA;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
}

.tg-dts-seg:first-of-type {
    border-left: none;
}

.tg-dts-seg-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.tg-dts-seg-label {
    font-size: 0.70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ff9671;
}

.tg-dts-period-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.tg-dts-inp {
    width: 52px !important;
    text-align: center;
    font-weight: 700;
}

/* Break divider */
.tg-dts-break {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 10px;
    background: #DCDCDC;
    border-left: 1px solid #B8B8C0;
    border-right: 1px solid #B8B8C0;
    min-width: 56px;
    text-align: center;
}

/* Assembly / event divider */
.tg-dts-event {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 10px;
    background: #E8E8ED;
    border-left: 1px solid #C8C8D4;
    border-right: 1px solid #C8C8D4;
    min-width: 60px;
    text-align: center;
}

.tg-dts-div-icon {
    font-size: 1rem;
    line-height: 1;
}

.tg-dts-div-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: #3C3C43;
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-dts-div-time {
    font-size: 0.68rem;
    color: #6E6E73;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────
   Step 3 — Setup Cards
   ───────────────────────────────────────────────── */
.tg-setup-card {
    background: #F9F9FB;
    border: 1.5px solid #EBEBED;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 14px;
}

.tg-setup-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.tg-setup-card-icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.tg-setup-card-title {
    font-size: 0.93rem;
    font-weight: 700;
    color: #1D1D1F;
    line-height: 1.3;
}

.tg-setup-card-sub {
    font-size: 0.79rem;
    color: #6E6E73;
    margin-top: 2px;
}

/* Break count pills — 0 through 5 */
.tg-setup-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tg-setup-pill {
    width: 44px;
    height: 44px;
    border: 1.5px solid #D1D1D6;
    border-radius: 10px;
    background: #FFFFFF;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #3A3A3C;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.tg-setup-pill:hover {
    border-color: #ff9671;
    color: #ff9671;
    background: #fff3ef;
}

.tg-setup-pill.is-active {
    background: #ff9671;
    border-color: #ff9671;
    color: #FFFFFF;
}

/* Slot chain — blocks stacked vertically with break dividers between */
.tg-slot-chain {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tg-slot-block {
    background: #FFFFFF;
    border: 1.5px solid #D1D1D6;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tg-slot-block-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #3A3A3C;
}

.tg-slot-block-input {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.tg-slot-block-input .tg-num-input {
    width: 64px;
}

.tg-slot-unit {
    font-size: 0.78rem;
    color: #6E6E73;
}

.tg-slot-connector {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
}

.tg-slot-connector-icon {
    font-size: 1rem;
    line-height: 1;
}

.tg-slot-connector-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ff9671;
    white-space: nowrap;
}

/* Days row */
.tg-setup-days-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.tg-setup-days-hint {
    font-size: 0.80rem;
    color: #98989D;
}

/* ─────────────────────────────────────────────────
   Step 4 — period meter sidebar layout
   (width governed by .tg-modal--step above)
   ───────────────────────────────────────────────── */

.tg-setup-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.tg-setup-main {
    flex: 1;
    min-width: 0;
}

.tg-period-meter {
    width: 168px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
    background: #F9F9FB;
    border: 1.5px solid #E5E5EA;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ? tooltip */
.tg-meter-tip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tg-meter-tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #D1D1D6;
    color: #3A3A3C;
    font-size: 0.62rem;
    font-weight: 800;
    font-style: normal;
    cursor: default;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.tg-meter-tip-wrap:hover .tg-meter-tip-icon {
    background: #ff9671;
    color: #FFFFFF;
}

.tg-meter-tip-bubble {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1C1C1E;
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    padding: 8px 10px;
    border-radius: 8px;
    white-space: normal;
    width: 190px;
    text-align: left;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.tg-meter-tip-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1C1C1E;
}

.tg-meter-tip-wrap:hover .tg-meter-tip-bubble {
    display: block;
}

.tg-meter-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tg-meter-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.tg-meter-lbl {
    font-size: 0.75rem;
    color: #6E6E73;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tg-meter-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1C1C1E;
    transition: color 0.2s;
}

.tg-meter-val.is-ok    { color: #16A34A; }
.tg-meter-val.is-short { color: #DC2626; }

.tg-meter-bar-track {
    height: 6px;
    border-radius: 3px;
    background: #E5E5EA;
    overflow: hidden;
}

.tg-meter-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: width 0.35s ease, background 0.25s ease;
    background: #DC2626;
}

.tg-meter-bar-fill.is-ok    { background: #16A34A; }
.tg-meter-bar-fill.is-short { background: #DC2626; }

.tg-meter-status {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    padding: 5px 8px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}

.tg-meter-status.is-ok {
    background: #DCFCE7;
    color: #16A34A;
}

.tg-meter-status.is-short {
    background: #FEE2E2;
    color: #DC2626;
}

/* ─────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Modal: let modal, scroll body, and step-actions stack naturally */
    .tg-modal {
        max-height: 96vh;
        border-radius: 16px;
    }

    .tg-step {
        padding: 24px 20px 16px;
    }

    .tg-step-actions {
        padding: 12px 20px 20px;
        border-radius: 0 0 16px 16px;
    }

    .tg-input-options {
        gap: 12px;
    }

    .tg-time-pair {
        flex-direction: column;
        gap: 12px;
    }

    .tg-break-row {
        gap: 8px;
    }

    .tg-viewer-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .tg-viewer-body {
        padding: 16px;
    }

    .tg-modal.tg-modal--wide {
        max-height: 96vh;
    }

    .tg-modal.tg-modal--step {
        width: calc(100vw - 16px);
        height: 96vh;
        max-width: none;
        max-height: none;
    }

    .tg-wizard-header {
        padding: 14px 52px 12px 20px; /* extra right padding keeps step dots clear of the × button */
    }

    .tg-wz-track {
        padding-right: 0; /* track centres within the padded header */
    }

    .tg-modal--step .tg-step {
        padding: 20px 20px 12px;
    }

    .tg-modal--step .tg-step-actions {
        padding: 10px 20px 18px;
    }

    .tg-modal--step .tg-option-btn {
        max-width: 150px;
        padding: 18px 12px 16px;
    }

    .tg-setup-layout {
        flex-direction: column;
    }

    .tg-period-meter {
        width: 100%;
        position: static;
    }

    .tg-times-layout {
        grid-template-columns: 1fr;
    }

    /* ── Hide zoom + sep from topbar so Settings button stays reachable ── */
    .tg-zoom-ctrl,
    .tg-util-sep { display: none !important; }

    /* ── Back button: arrow only, no text ── */
    #tg-s4-back {
        font-size: 0;
        padding: 6px 10px;
    }
    #tg-s4-back::before {
        content: '\2190';
        font-size: 1.1rem;
    }

    .tg-topbar-brand { display: none; }

    /* ────────────────────────────────────────────────────────────
       SETTINGS BUTTON (in topbar utils)
       ──────────────────────────────────────────────────────────── */
    .tg-mobile-settings-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: 1.5px solid #D1D1D6;
        background: #F5F5F7;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 600;
        color: #1D1D1F;
        padding: 6px 14px;
        border-radius: 8px;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
        transition: background 0.15s, border-color 0.15s;
    }
    .tg-mobile-settings-btn[aria-expanded="true"] {
        background: #fff3ef;
        border-color: #ff9671;
        color: #C05621;
    }

    /* ────────────────────────────────────────────────────────────
       SETTINGS POPUP — clean row-per-setting list
       ──────────────────────────────────────────────────────────── */
    .tg-topbar-controls {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        background: #FFFFFF;
        border-top: 2px solid #EBEBED;
        max-height: 55vh;
        overflow-y: auto;
    }
    .tg-topbar-controls.is-mobile-open { display: flex; }

    /* Each labelled setting = its own full-width row */
    .tg-topbar-controls > .tg-ctrl-group {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 18px;
        border-bottom: 1px solid #F2F2F7;
        box-sizing: border-box;
        width: 100%;
        flex-wrap: nowrap;
    }
    .tg-topbar-controls > .tg-ctrl-group .tg-ctrl-group-lbl {
        flex-shrink: 0;
        width: 88px;
        color: #6E6E73;
    }

    /* Reshuffle + Clear — side by side row; Size hidden */
    .tg-topbar-controls > .tg-action-pair {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 12px 18px 12px;
        border-bottom: 1px solid #F2F2F7;
        width: 100%;
        box-sizing: border-box;
    }
    /* Keep individual buttons inside the pair unstyled (no extra margins) */
    .tg-topbar-controls > .tg-action-pair > button {
        margin: 0 !important;
        align-self: auto;
    }
    .tg-topbar-controls > .tg-reshuffle-btn,
    .tg-topbar-controls > .tg-clear-schedule-btn {
        display: none !important; /* shown only inside .tg-action-pair */
    }

    /* Hide: Size btn + global event btn + help tooltip + dividers + spacers */
    .tg-topbar-controls > #tg-table-size-btn,
    .tg-topbar-controls > #tg-add-ev-btn,
    .tg-topbar-controls > .tg-ev-help-btn,
    .tg-ctrl-divider,
    .tg-ctrl-spacer { display: none !important; }

    /* Hide View row from settings popup (shown in dedicated view bar instead) */
    .tg-ctrl-group--view { display: none !important; }

    /* ── View toggle bar — sits above the Global Events bar ──────────── */
    .tg-mobile-view-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        background: #F9F9FB;
        border-bottom: 1px solid #EBEBED;
        flex-shrink: 0;
    }
    .tg-mobile-view-lbl {
        font-size: 0.72rem;
        font-weight: 700;
        color: #8E8E93;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ── GLOBAL EVENTS BAR (above timetables, mobile only) ──────── */
    .tg-mobile-global-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        background: #F9F9FB;
        border-bottom: 1px solid #EBEBED;
        flex-shrink: 0;
    }
    .tg-mobile-global-count {
        font-size: 0.78rem;
        font-weight: 500;
        opacity: 0.85;
    }
    /* ? tooltip — always visible on mobile (no hover), shown below the button */
    .tg-ev-help-btn--mobile .tg-ev-tooltip {
        opacity: 0;
        pointer-events: none;
        right: auto;
        left: 0;
        top: 34px;
        width: 240px;
    }
    /* Tooltip shown/hidden entirely via JS inline styles on mobile — no CSS opacity rules needed */

    /* Chips sit naturally below the global bar — just tighten padding */
    .tg-ev-chips {
        padding: 8px 16px;
    }

    /* ────────────────────────────────────────────────────────────
       ADD GLOBAL EVENT PANEL — adjust sizing for mobile viewport
       ──────────────────────────────────────────────────────────── */
    .tg-add-ev-panel:not([hidden]) {
        padding: 20px 16px;
    }
    .tg-add-ev-panel-inner {
        max-width: 100%;
        max-height: 80vh;
        overflow-y: auto;
        padding: 44px 20px 24px;
        gap: 14px;
    }

    /* ────────────────────────────────────────────────────────────
       AUTO-FILL BANNER — compact on mobile
       ──────────────────────────────────────────────────────────── */
    .tg-fill-banner {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 16px;
    }
    .tg-fill-hint-text,
    .tg-fill-hint-icon { display: none; }

    /* ────────────────────────────────────────────────────────────
       TIMETABLE AREA — natural horizontal scroll, no squish
       ──────────────────────────────────────────────────────────── */
    .tg-viewer-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #tg-tt-zoom-inner {
        width: max-content;
        min-width: 100%;
    }
    .tg-table-scroll {
        overflow-x: visible;
        min-width: max-content;
    }
}

/* ============================================================
   Cell Editor — manual period assignment panel
   ============================================================ */

/* Overlay — fixed backdrop sitting inside the tg-overlay stacking context */
.tg-ce-overlay {
    position: fixed;
    inset: 0;
    z-index: 10020;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.tg-ce-overlay[hidden] { display: none; }

/* Transparent mode — used when previewing free-cell colour changes */
.tg-ce-overlay--lite {
    background: transparent;
    pointer-events: none;
    align-items: flex-start;
    justify-content: flex-start;
}
.tg-ce-overlay--lite .tg-ce-panel {
    pointer-events: auto;
    position: fixed;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
}

/* Panel */
.tg-ce-panel {
    background: #fff;
    border-radius: 18px;
    width: 440px;
    max-width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    padding: 0 0 24px;
}

/* Header */
.tg-ce-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 20px 14px;
    border-bottom: 1px solid #f0f0f0;
    gap: 12px;
}

.tg-ce-header-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tg-ce-slot-lbl {
    font-weight: 700;
    font-size: 15px;
    color: #1a1a2e;
}

.tg-ce-teacher-lbl {
    font-size: 13px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-ce-close-btn {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
    transition: color 0.15s;
}
.tg-ce-close-btn:hover { color: #333; }

/* Prompt text */
.tg-ce-prompt {
    margin: 18px 20px 12px;
    font-size: 14px;
    color: #444;
}

/* Two-card choice grid */
.tg-ce-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 20px 4px;
}

.tg-ce-choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 12px;
    background: #fafafa;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
}
.tg-ce-choice-card:hover:not(:disabled) {
    border-color: #e07c00;
    background: #fff8f0;
}
.tg-ce-choice-card:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tg-ce-card-icon {
    font-size: 24px;
    line-height: 1;
}

.tg-ce-card-main {
    font-weight: 600;
    font-size: 14px;
    color: #222;
}

.tg-ce-card-avail {
    font-size: 11px;
    color: #888;
}

/* Back button */
.tg-ce-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 14px 20px 8px;
    background: none;
    border: none;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.15s;
}
.tg-ce-back-btn:hover { color: #222; }
.tg-ce-change-btn {
    color: #e07c00;
    font-weight: 600;
    margin-left: 0;
}
.tg-ce-change-btn:hover { color: #b85e00; }

/* Subject list */
.tg-ce-subj-list {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
}

.tg-ce-si {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.tg-ce-si:hover {
    border-color: #e07c00;
    background: #fff8f0;
}

.tg-ce-si-name {
    font-weight: 600;
    font-size: 14px;
    color: #222;
    flex: 1;
}

.tg-ce-si-grade {
    font-size: 12px;
    color: #666;
}

.tg-ce-si-count {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #e07c00;
    border-radius: 20px;
    padding: 2px 8px;
    flex-shrink: 0;
}

.tg-ce-none {
    font-size: 13px;
    color: #888;
    padding: 8px 0;
    margin: 0;
}

/* Free form */
.tg-ce-free-form {
    padding: 4px 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tg-ce-free-lbl-label {
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

.tg-ce-free-inp {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.tg-ce-free-inp:focus { border-color: #e07c00; }

.tg-ce-free-actions {
    padding: 0 20px;
}

.tg-ce-confirm-btn {
    width: 100%;
    padding: 11px;
    background: #e07c00;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.tg-ce-confirm-btn:hover { background: #b85e00; }

/* Existing assignment card */
#tg-ce-existing {
    padding: 14px 20px 4px;
}

.tg-ce-existing-card {
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 10px;
    font-size: 14px;
    color: #222;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tg-ce-existing-meta {
    font-size: 12px;
    color: #666;
    margin-left: 6px;
}

.tg-ce-existing-row {
    display: flex;
    gap: 10px;
    padding: 10px 20px 4px;
}

/* Free cell colour picker section */
#tg-ce-color-section {
    padding: 10px 20px 4px;
    border-top: 1px solid #eee;
}
.tg-ce-color-lbl {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.tg-ce-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.tg-ce-color-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.tg-ce-color-picker-row label {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}
.tg-ce-color-picker-row input[type="color"] {
    width: 36px;
    height: 28px;
    border: 1.5px solid #ddd;
    border-radius: 6px;
    padding: 2px;
    cursor: pointer;
    background: none;
}

/* Scope radio pills – CE panel (shared by both add-scope and color-scope) */
.tg-ce-scope-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.tg-ce-scope-lbl {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 4px 10px;
    border: 1.5px solid #D1D1D6;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.tg-ce-scope-lbl:has(input:checked) {
    border-color: #ff9671;
    background: #FFF5F0;
    color: #ff9671;
}
.tg-ce-scope-lbl input[type="radio"] { display: none; }

/* Clickable empty cells */
.tg-td-empty--add {
    cursor: pointer;
    position: relative;
    background: transparent;
    transition: background 0.15s;
}
.tg-td-empty--add:hover {
    background: rgba(224, 124, 0, 0.06);
}

.tg-ce-plus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    line-height: 1;
    color: #ccc;
    transition: color 0.15s;
    pointer-events: none;
}
.tg-td-empty--add:hover .tg-ce-plus {
    color: #e07c00;
}

/* Manually pre-assigned subject cell */
.tg-td--manual {
    background: #fff3e0;
    border: 1.5px solid #e07c00 !important;
    cursor: pointer;
}
.tg-td--manual:hover {
    background: #ffe0b2;
}

/* Manually pre-assigned free/admin cell */
.tg-td--free-manual {
    background: #F0F0F5;
    cursor: pointer;
    vertical-align: top;
}
.tg-td--free-manual:hover {
    background: #e8e8ef;
}

/* Learner cell editor – quick-pick preset buttons */
.tg-lce-quick-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.tg-lce-qp-btn {
    padding: 4px 10px;
    border: 1.5px solid #D1D1D6;
    border-radius: 20px;
    background: #fafafa;
    font-size: 12px;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}
.tg-lce-qp-btn:hover {
    border-color: #e07c00;
    background: #fff8f0;
    color: #e07c00;
}

/* Free/admin period in filled timetable view */
.tg-td--free-filled {
    background: #f5f5f5 !important;
    color: #888;
}

/* ============================================================
   Cell Styling Form (sidebar)
   ============================================================ */

.tg-cs-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tg-cs-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tg-cs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tg-cs-label {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tg-cs-select {
    width: 100%;
    padding: 5px 7px;
    border: 1.5px solid #E0E0E0;
    border-radius: 7px;
    font-size: 12px;
    font-family: inherit;
    background: #fff;
    color: #222;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.tg-cs-select:focus { border-color: #ff9671; }

.tg-cs-color-inp {
    width: 100%;
    height: 32px;
    padding: 2px;
    border: 1.5px solid #E0E0E0;
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s;
}
.tg-cs-color-inp:focus { border-color: #ff9671; outline: none; }

.tg-cs-bold-lbl {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    user-select: none;
}

.tg-cs-bold-lbl input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #ff9671;
    cursor: pointer;
}

.tg-cs-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 2px;
}

.tg-cs-apply-btn {
    padding: 7px 6px;
    background: #ff9671;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.tg-cs-apply-btn:hover { background: #e07a55; }

.tg-cs-reset-btn {
    padding: 7px 6px;
    background: #F0F0F5;
    color: #555;
    border: 1.5px solid #D1D1D6;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.tg-cs-reset-btn:hover { background: #E0E0E8; border-color: #bbb; }

.tg-cs-clear-btn {
    padding: 7px 6px;
    background: #F0F0F5;
    color: #555;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.tg-cs-clear-btn:hover { background: #E0E0E8; }

.tg-sp-split-font-lbl {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 14px 8px;
    font-size: 11px;
    color: #555;
}
.tg-sp-split-font-lbl input { cursor: pointer; }
#tg-sp-sub-font-wrap { padding-bottom: 4px; }

/* ============================================================
   Cell style swatch pickers (sidebar + popup shared)
   ============================================================ */

.tg-cs-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.tg-cs-swatch {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1.5px solid rgba(0,0,0,0.14);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.1s, box-shadow 0.1s;
}
.tg-cs-swatch:hover {
    transform: scale(1.18);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.tg-cs-swatch.is-sel {
    outline: 2.5px solid #007AFF;
    outline-offset: 2px;
    border-color: transparent;
}

/* ============================================================
   Cell font cards (sidebar)
   ============================================================ */

.tg-cs-font-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-top: 4px;
}

.tg-cs-font-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 5px 7px;
    border: 1.5px solid #e0e0e0;
    border-radius: 7px;
    cursor: pointer;
    background: #fafafa;
    font-size: 10px;
    font-weight: 500;
    color: #555;
    line-height: 1.2;
    transition: border-color 0.12s, background 0.12s;
    text-align: left;
}
.tg-cs-font-card.is-sel {
    border-color: #007AFF;
    background: #EBF3FF;
    color: #007AFF;
}
.tg-cs-font-card:hover {
    border-color: #bbb;
    background: #f0f0f0;
}
.tg-cs-font-card.is-sel:hover {
    border-color: #007AFF;
    background: #dceeff;
}
.tg-cs-font-aa {
    font-size: 14px;
    font-weight: 700;
    color: #666;
    margin-top: 2px;
    line-height: 1;
}
.tg-cs-font-card.is-sel .tg-cs-font-aa { color: #007AFF; }

/* ============================================================
   Cell style floating popup
   ============================================================ */

.tg-style-popup {
    position: fixed;
    z-index: 10025;
    width: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.10);
    padding-bottom: 14px;
    font-size: 13px;
    line-height: 1.4;
    user-select: none;
}

.tg-sp-inner { width: 100%; }

.tg-sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 10px;
}

.tg-sp-title {
    font-weight: 600;
    font-size: 12px;
    color: #333;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
}

.tg-sp-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: #999;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────
   Step 3 — Subject Groupings
   ───────────────────────────────────────────────── */

/* Already-created groups bar */
.tg-sg-groups-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.tg-sg-created-group {
    background: #fff3ef;
    border: 1.5px solid #FDBA74;
    border-radius: 12px;
    padding: 10px 14px;
}

.tg-sg-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
}

.tg-sg-group-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ff9671;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tg-sg-group-subjects {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tg-sg-group-tag {
    background: #ff9671;
    color: #fff;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Two-column builder */
.tg-sg-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

/* Left — scrollable subject picker */
.tg-sg-left {
    background: #F5F5F7;
    border-radius: 14px;
    padding: 14px 14px 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Right — name + preview + button */
.tg-sg-right {
    background: #F5F5F7;
    border-radius: 14px;
    padding: 14px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

/* Section headings inside each panel */
.tg-sg-panel-hd {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6E6E73;
    margin-bottom: 6px;
}

.tg-sg-panel-hint {
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #98989D;
    margin-top: 2px;
}

.tg-sg-panel-hd--selected {
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Subject chips in the left list */
.tg-sg-subject-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    overflow-y: auto;
    max-height: 280px;
    padding-right: 2px;
}

.tg-sg-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}

.tg-sg-check-label:hover {
    border-color: #ff9671;
    background: #FFFBF9;
}

.tg-sg-check-label:has(.tg-sg-check:checked) {
    border-color: #ff9671;
    background: #fff3ef;
}

.tg-sg-check-text {
    flex: 1;
}

.tg-sg-check-label:has(.tg-sg-check:checked) .tg-sg-check-text {
    color: #ff9671;
    font-weight: 600;
}

.tg-sg-check-periods {
    font-size: 0.72rem;
    color: #98989D;
    white-space: nowrap;
    flex-shrink: 0;
}

.tg-sg-check-label:has(.tg-sg-check:checked) .tg-sg-check-periods {
    color: #e07a55;
}

.tg-sg-check {
    accent-color: #ff9671;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}

/* Name input — full-width in the right panel */
.tg-sg-name-inp {
    width: 100%;
}

/* Preview panel — selected chips */
.tg-sg-preview {
    flex: 1;
    min-height: 80px;
    background: #fff;
    border: 1.5px dashed #D1D1D6;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
}

.tg-sg-preview-empty {
    font-size: 0.8rem;
    color: #B0B0B8;
    align-self: center;
    width: 100%;
    text-align: center;
    line-height: 1.5;
}

.tg-sg-preview-chip {
    display: inline-flex;
    align-items: center;
    background: #ff9671;
    color: #fff;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.80rem;
    font-weight: 500;
    white-space: nowrap;
    animation: tg-chip-in 0.18s ease;
}

.tg-sg-preview-chip.is-mismatch {
    background: #DC2626;
}

@keyframes tg-chip-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

.tg-sg-hint {
    font-size: 0.78rem;
    color: #98989D;
    min-height: 1.1em;
    line-height: 1.4;
}

.tg-sg-hint.is-error {
    color: #DC2626;
    font-weight: 500;
}

/* Create button — full width at bottom of right panel */
.tg-sg-create-btn-full {
    width: 100%;
    justify-content: center;
}

/* Empty-state note (< 2 ungrouped items) */
.tg-sg-empty-note {
    background: #F5F5F7;
    border-radius: 12px;
    padding: 20px 20px;
    font-size: 0.88rem;
    color: #6E6E73;
    text-align: center;
    margin-bottom: 8px;
}

/* ─────────────────────────────────────────────────
   Group cells in the timetable viewer
   ───────────────────────────────────────────────── */
.tg-td--group {
    vertical-align: top !important;
    padding: 4px 12px !important;
}

.tg-td--group .tg-td-subj {
    display: block;
    font-weight: 700;
    font-size: inherit;
    white-space: normal;
    overflow: visible;
    word-break: break-word;
}

.tg-td-group-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
}

.tg-td-group-item {
    font-size: 0.7rem;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1.3;
}

.tg-td-group-teacher {
    color: #888;
    font-style: italic;
}

/* ─────────────────────────────────────────────────
   Group display mode control in topbar
   ───────────────────────────────────────────────── */
.tg-group-display-sel {
    border: 1.5px solid #D1D1D6;
    border-radius: 7px;
    padding: 3px 8px;
    font-size: 0.8rem;
    background: #fff;
    cursor: pointer;
    outline: none;
    color: #1D1D1F;
    transition: border-color 0.15s;
}

.tg-group-display-sel:focus {
    border-color: #ff9671;
}
.tg-sp-close:hover { color: #333; }

.tg-sp-section-lbl {
    padding: 0 14px 5px;
    font-size: 10px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.tg-sp-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 14px 12px;
}

.tg-sp-font-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 0 14px 12px;
}

.tg-sp-font-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 6px 8px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    background: #fafafa;
    font-size: 11px;
    font-weight: 500;
    color: #444;
    line-height: 1.2;
    text-align: left;
    transition: border-color 0.12s, background 0.12s;
}
.tg-sp-font-card.is-sel {
    border-color: #007AFF;
    background: #EBF3FF;
    color: #007AFF;
}
.tg-sp-font-card:hover {
    border-color: #bbb;
    background: #f0f0f0;
}
.tg-sp-font-card.is-sel:hover {
    border-color: #007AFF;
    background: #dceeff;
}
.tg-sp-font-aa {
    font-size: 16px;
    font-weight: 700;
    color: #666;
    margin-top: 3px;
    line-height: 1;
}
.tg-sp-font-card.is-sel .tg-sp-font-aa { color: #007AFF; }

.tg-sp-bold-lbl {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 2px 14px 10px;
    font-size: 12px;
    color: #444;
}
.tg-sp-bold-lbl input { cursor: pointer; }

.tg-sp-color-hdr-lbl {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 2px 14px 10px;
    font-size: 12px;
    color: #444;
}
.tg-sp-color-hdr-lbl input { cursor: pointer; }

/* Color wheel / custom picker row */
.tg-sp-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 12px;
}
.tg-sp-scope-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0 14px 12px;
}
.tg-sp-scope-lbl {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #3C3C43;
    cursor: pointer;
    padding: 4px 10px;
    border: 1.5px solid #D1D1D6;
    border-radius: 8px;
    transition: border-color 0.15s, background 0.15s;
}
.tg-sp-scope-lbl:has(input:checked) {
    border-color: #ff9671;
    background: #FFF5F0;
    color: #ff9671;
}
.tg-sp-scope-lbl input[type="radio"] {
    display: none;
}
.tg-sp-picker-lbl {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    flex-shrink: 0;
}
.tg-sp-color-wheel {
    -webkit-appearance: none;
    appearance: none;
    width: 36px;
    height: 28px;
    border: 1.5px solid #D1D1D6;
    border-radius: 7px;
    padding: 2px;
    cursor: pointer;
    background: none;
}
.tg-sp-color-wheel::-webkit-color-swatch-wrapper { padding: 0; border-radius: 5px; }
.tg-sp-color-wheel::-webkit-color-swatch { border: none; border-radius: 5px; }

/* Hint bar below topbar */
.tg-tt-hint {
    font-size: 11px;
    color: #888;
    background: #F7F7FA;
    border-bottom: 1px solid #EBEBF0;
    padding: 5px 16px;
    user-select: none;
}

.tg-sp-actions {
    display: flex;
    gap: 8px;
    padding: 0 14px;
}

/* ─────────────────────────────────────────────────
   Style popup — Font Size controls
   ───────────────────────────────────────────────── */
#tg-sp-size-wrap {
    padding: 0 14px;
}

.tg-sp-section-lbl--sz {
    margin-top: 8px;
    margin-bottom: 4px;
}

.tg-sp-size-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.tg-sp-size-lbl {
    font-size: 0.78rem;
    font-weight: 600;
    color: #3a3a3c;
    min-width: 52px;
}

.tg-sp-size-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid #D1D1D6;
    border-radius: 7px;
    background: #F5F5F7;
    color: #1D1D1F;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background 0.12s, border-color 0.12s;
    flex-shrink: 0;
}

.tg-sp-size-btn:hover {
    background: #E5E5EA;
    border-color: #B0B0B8;
}

.tg-sp-size-val {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 700;
    color: #1D1D1F;
    background: #F5F5F7;
    border: 1.5px solid #D1D1D6;
    border-radius: 7px;
    padding: 3px 4px;
}

.tg-sp-size-unit {
    font-size: 0.72rem;
    color: #8E8E93;
}

/* ─────────────────────────────────────────────────
   Style popup — Scope dialog (apply font size to)
   ───────────────────────────────────────────────── */
.tg-sp-scope-wrap {
    margin: 6px 14px 10px;
    padding: 10px 12px;
    background: #FFF8F0;
    border: 1.5px solid #ff9671;
    border-radius: 10px;
}

.tg-sp-scope-q {
    font-size: 0.78rem;
    font-weight: 700;
    color: #ff9671;
    margin-bottom: 8px;
}

.tg-sp-scope-btns {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tg-sp-scope-btn {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid #D1D1D6;
    border-radius: 8px;
    background: #FFFFFF;
    color: #1D1D1F;
    font-family: inherit;
    font-size: 0.80rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.12s, border-color 0.12s;
}

.tg-sp-scope-btn:hover {
    background: #F5F5F7;
    border-color: #B0B0B8;
}

.tg-sp-scope-btn--subj {
    background: #ff9671;
    border-color: #ff9671;
    color: #FFFFFF;
}

.tg-sp-scope-btn--subj:hover {
    background: #C84B0B;
    border-color: #C84B0B;
}

/* ============================================================
   Tools group — Random Colors + Zoom bundled in one block
   ============================================================ */
/* Add Global Event — matches controls-row bordered pill style */
#tg-add-ev-btn {
    background: #fff;
    color: #3a3a3c;
    border: 1.5px solid #E5E5EA;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 10px;
    letter-spacing: normal;
    box-shadow: none;
    transition: background 0.12s, color 0.12s;
}
#tg-add-ev-btn:hover {
    background: #F0F0F5;
    color: #1D1D1F;
    transform: none;
    box-shadow: none;
}
#tg-add-ev-btn:active {
    background: #E5E5EA;
    transform: none;
    box-shadow: none;
}

/* Standalone rand/reset used outside color-toggle-group */
.tg-rand-colors-btn {
    background: none;
    border: none;
    border-radius: 7px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: #3a3a3c;
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s;
}
.tg-rand-colors-btn:hover { background: #E5E5EA; }
.tg-rm-colors-btn {
    background: none;
    border: none;
    border-radius: 7px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: #c0392b;
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s;
}
.tg-rm-colors-btn:hover { background: #FDECEA; }


/* ============================================================
   PDF Export � button, overlay, format picker, preview
   ============================================================ */

/* Topbar button */
.tg-export-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #ff9671 0%, #e07a55 100%);
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    padding: 6px 14px;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(255,150,113,0.35);
    transition: filter 0.15s, box-shadow 0.15s, transform 0.1s;
}
.tg-export-pdf-btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 12px rgba(255,150,113,0.45);
    transform: translateY(-1px);
}
.tg-export-pdf-btn:active {
    filter: brightness(0.95);
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(255,150,113,0.3);
}

/* Overlay backdrop */
.tg-pdf-overlay {
    position: fixed;
    inset: 0;
    z-index: 10030;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.tg-pdf-overlay[hidden] { display: none; }

/* Panel */
.tg-pdf-panel {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.22);
    width: min(1240px, 96vw);
    max-height: 94vh;
    overflow: hidden;           /* head stays fixed; scroll body scrolls */
    display: flex;
    flex-direction: column;
}

/* Fixed header — always visible, never scrolls */
.tg-pdf-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 16px;
    border-bottom: 1px solid #EBEBED;
    flex-shrink: 0;
    background: #fff;
    border-radius: 18px 18px 0 0;
}

/* Inner scroll container — everything below the head scrolls here */
.tg-pdf-panel-scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

.tg-pdf-panel-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a2e;
}

.tg-pdf-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.tg-pdf-close:hover { background: #f0f0f0; color: #333; }

/* Phase 1 � format picker */
#tg-pdf-phase1 {
    padding: 20px 24px 24px;
}
#tg-pdf-phase2 {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0;
}
#tg-pdf-phase2 .tg-pdf-progress {
    padding: 16px 28px 0;
}

/* Sticky action bar — buttons + tabs together, sticks to top of scroll body */
.tg-pdf-phase2-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #ffffff;
    border-bottom: 1px solid #EBEBED;
    display: flex;
    flex-direction: column;
}
.tg-pdf-phase2-bar[hidden] { display: none; }

.tg-pdf-phase2-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    gap: 10px;
    border-bottom: 1px solid #F3F3F5;
}

/* Tab row inside sticky bar */
.tg-pdf-tab-row {
    display: flex;
    padding: 0 24px;
}

.tg-pdf-desc {
    font-size: 0.88rem;
    color: #666;
    margin: 0 0 20px;
}

.tg-pdf-fmt-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.tg-pdf-fmt-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 16px;
    border: 2px solid #EBEBED;
    border-radius: 14px;
    background: #FAFAFA;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
}
.tg-pdf-fmt-card:hover {
    border-color: #ff9671;
    background: #fff3ef;
}
.tg-pdf-fmt-card.is-sel {
    border-color: #ff9671;
    background: #fff3ef;
}

/* Miniature page icons */
.tg-pdf-fmt-icon {
    border: 2px solid #ccc;
    border-radius: 4px;
    background: #fff;
    position: relative;
    overflow: hidden;
}
.tg-pdf-fmt-icon::after {
    content: '';
    position: absolute;
    inset: 4px 4px 4px 4px;
    border: 1.5px dashed #d1d5db;
    border-radius: 2px;
}
.tg-pdf-fmt-icon--a4 {
    width: 72px;
    height: 51px;  /* landscape A4 proportion */
}
.tg-pdf-fmt-icon--a5 {
    width: 51px;
    height: 72px;  /* portrait A4 for two A5 stacked */
    display: flex;
    flex-direction: column;
}
.tg-pdf-fmt-icon--a5::before {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    top: 50%;
    border-top: 1.5px dashed #d1d5db;
}

.tg-pdf-fmt-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
}
.tg-pdf-fmt-desc {
    font-size: 0.76rem;
    color: #888;
}

/* Old foot styles kept for phase1 */
.tg-pdf-phase1-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Phase 2 � progress + preview */
.tg-pdf-progress {
    margin-bottom: 16px;
}
.tg-pdf-progress-bar-track {
    height: 6px;
    background: #EBEBED;
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 8px;
}
.tg-pdf-progress-bar {
    height: 100%;
    background: #ff9671;
    border-radius: 99px;
    width: 0%;
    transition: width 0.2s ease;
}
.tg-pdf-progress-lbl {
    font-size: 0.8rem;
    color: #666;
}

/* Tab bar — Teachers / Learners switcher */
.tg-pdf-tab-bar[hidden] { display: none; }

.tg-pdf-tab-row,
.tg-pdf-tab-bar {
    display: flex;
    gap: 0;
}

.tg-pdf-tab {
    padding: 11px 24px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #888;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.tg-pdf-tab:hover { color: #ff9671; }
.tg-pdf-tab.is-active {
    color: #ff9671;
    border-bottom-color: #ff9671;
}

/* Preview grid — vertical scroll list of full-width page cards */
.tg-pdf-preview-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 24px 28px 32px;
}
.tg-pdf-preview-grid[hidden] { display: none; }

/* Subscribe banner shown above the preview grid for non-paid users */
.tg-subscribe-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 24px 0;
    padding: 18px 20px;
    background: linear-gradient(145deg, #6d35b8 0%, #845ec2 55%, #a97de0 100%);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(132, 94, 194, 0.28);
}

.tg-subscribe-banner__icon {
    flex-shrink: 0;
}

.tg-subscribe-banner__icon svg {
    width: 48px;
    height: 48px;
    display: block;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.18));
}

.tg-subscribe-banner__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.tg-subscribe-banner__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.tg-subscribe-banner__msg {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.82);
    line-height: 1.55;
}

.tg-subscribe-banner__btn {
    margin-top: 6px;
    display: inline-block;
    background: linear-gradient(135deg, #845ec2 0%, #c94b8a 60%, #ff6f91 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.825rem;
    padding: 7px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: filter 0.15s, transform 0.12s;
    align-self: flex-start;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(201,75,138,0.35);
}
.tg-subscribe-banner__btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.tg-pdf-prev-sec-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 6px;
    border-bottom: 1px solid #EBEBED;
}

.tg-pdf-prev-pages {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tg-pdf-prev-empty {
    font-size: 0.88rem;
    color: #aaa;
    text-align: center;
    padding: 32px 0;
}

/* Each timetable — full-width landscape card */
.tg-pdf-prev-page {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #F5F5F7;
    border-radius: 10px;
    padding: 12px 14px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.tg-pdf-prev-lbl-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.tg-pdf-prev-lbl {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-pdf-prev-page-num {
    font-size: 0.74rem;
    color: #aaa;
    white-space: nowrap;
    flex-shrink: 0;
}

/* The timetable image — natural proportions, no stretching */
.tg-pdf-prev-img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #D4D4D8;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.09);
}

/* A5�2 portrait A4 thumbnail */
@media (max-width: 640px) {
    .tg-pdf-fmt-row {
        flex-direction: column;
    }
    .tg-pdf-panel {
        max-height: 98vh;
        border-radius: 14px;
    }
    .tg-pdf-preview-grid {
        padding: 16px 16px 24px;
    }
    .tg-pdf-phase2-actions,
    .tg-pdf-tab-row {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ── Time display in timetable headers and override-day cells ── */
.tg-th-time {
    font-size: 0.62rem;
    font-weight: 600;
    color: #1D1D1F;
    white-space: nowrap;
    line-height: 1;
}
/* Tick variant: centered on the left border of each column header */
.tg-th-time--tick {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 0;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
}
/* End-of-day tick: right edge of last column */
.tg-th-time--end {
    left: auto;
    right: 1px;
    transform: none;
}
.tg-td-ov-time {
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    color: #1D1D1F;
    letter-spacing: 0.01em;
    margin-bottom: 5px;
    white-space: nowrap;
    line-height: 1.2;
    text-align: center;
}
.tg-td-break .tg-td-ov-time {
    color: #1D1D1F;
    font-weight: 400;
    text-align: center;
    white-space: normal;
    word-break: break-all;
    font-size: 0.60rem;
}
.tg-td-event .tg-td-ov-time {
    color: #1D1D1F;
    font-weight: 400;
    text-align: center;
    white-space: normal;
    word-break: break-all;
    font-size: 0.60rem;
}

/* ── School Times step (Step 5) ── */
.tg-sch-global-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 16px 16px;
}
.tg-sch-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #374151;
}
.tg-sch-field-row label {
    min-width: 130px;
    font-weight: 500;
    color: #374151;
}
.tg-sch-field-row input[type="time"] {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    color: #1a1a2e;
    background: #fff;
    outline: none;
}
.tg-sch-field-row input[type="time"]:focus {
    border-color: #ff9671;
    box-shadow: 0 0 0 3px rgba(255,150,113,.12);
}
.tg-sch-ov-panel {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tg-sch-no-ov {
    font-size: 12px;
    color: #9ca3af;
    margin: 0;
}
.tg-sch-ov-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
}
.tg-sch-ov-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tg-sch-ov-day-label {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
}
.tg-sch-ov-detail {
    font-size: 11px;
    color: #6b7280;
}
.tg-sch-ov-form {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.tg-sch-ov-form-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
}
.tg-sch-ov-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 6px;
}

/* ── Duration field inline layout in Add Event panel ── */
.tg-add-ev-field--inline {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.tg-add-ev-field--inline .tg-add-ev-field {
    flex: 1;
    min-width: 140px;
}

/* Freemium subscribe notice inside PDF export panel */
.tg-subscribe-notice {
    margin: 12px 0 0;
    padding: 0 0 4px;
}

/* ═══════════════════════════════════════════════════════
   TEMPLATE BUILDER WIZARD — Step 1 option layout
═══════════════════════════════════════════════════════ */

.tg-input-options--stack {
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.tg-input-options--stack .tg-option-group {
    flex: 1;
    min-width: 0;
}

.tg-input-options--stack .tg-option-btn {
    max-width: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 14px;
    text-align: center;
    height: 100%;
}

.tg-input-options--stack .tg-option-icon {
    flex-shrink: 0;
}

.tg-input-options--stack .tg-opt-text {
    align-items: center;
}

.tg-opt-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.tg-opt-text .tg-option-name { font-size: 0.94rem; }
.tg-opt-text .tg-option-sub  { margin-top: 0; }

.tg-option-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tg-option-group--featured .tg-option-btn--featured {
    border: 2px solid #ff9671;
    background: #FFF5F2;
}

.tg-option-group--featured .tg-option-btn--featured:hover {
    background: #FFEEE6;
    border-color: #e07a55;
}

.tg-option-group--featured .tg-option-btn--featured .tg-option-icon {
    background: #FFEEDD;
    color: #ff9671;
}

.tg-rec-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #C25A30;
    background: #FFF3EE;
    border: 1px solid #FFC5A8;
    border-radius: 20px;
    padding: 3px 10px;
    align-self: center;
}

.tg-option-above-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: #98989D;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    padding-left: 0;
}

/* ═══════════════════════════════════════════════════════
   TEMPLATE BUILDER WIZARD — shared step styles
═══════════════════════════════════════════════════════ */

.tg-step--wiz {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.tg-step--wiz-wide {
    max-width: 100%;
}

/* Grade selection grid */
.tg-wiz-grade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}

.tg-wiz-grade-grid--sm {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 6px;
}

.tg-wiz-grade-lbl {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #F5F5F7;
    border: 1.5px solid #E5E5EA;
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: #3A3A3C;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}

.tg-wiz-grade-lbl input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #ff9671;
    flex-shrink: 0;
}

.tg-wiz-grade-lbl.is-checked {
    background: #FFF3EE;
    border-color: #ff9671;
    color: #C25A30;
}

/* Custom grade section */
.tg-wiz-custom-sec {
    border-top: 1px solid #EBEBED;
    margin-top: 14px;
    padding-top: 14px;
}

.tg-wiz-custom-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: #1D1D1F;
    margin: 0 0 2px;
}

.tg-wiz-custom-hint {
    font-size: 0.76rem;
    color: #98989D;
    margin: 0 0 10px;
}

.tg-wiz-custom-add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.tg-wiz-custom-add-row .tg-wiz-inp {
    flex: 1;
}

.tg-wiz-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tg-wiz-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #F0E8FF;
    border: 1px solid #C4A7E7;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.76rem;
    font-weight: 500;
    color: #5A2D82;
}

.tg-wiz-chip-del {
    background: none;
    border: none;
    cursor: pointer;
    color: #9D74C9;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
}

.tg-wiz-chip-del:hover { color: #7B2D8C; }

/* Radio cards (step 2) */
.tg-wiz-radio-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.tg-wiz-radio-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #F5F5F7;
    border: 1.5px solid #E5E5EA;
    border-radius: 12px;
    padding: 13px 16px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.tg-wiz-radio-card input[type="radio"] { display: none; }
.tg-wiz-radio-card strong { font-size: 0.88rem; color: #1D1D1F; }
.tg-wiz-radio-card span   { font-size: 0.76rem; color: #98989D; }

.tg-wiz-radio-card.is-sel             { background: #FFF3EE; border-color: #ff9671; }
.tg-wiz-radio-card.is-sel strong      { color: #C25A30; }

/* Generic wizard form input */
.tg-wiz-inp {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #D1D1D6;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.875rem;
    color: #1D1D1F;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tg-wiz-inp:focus {
    outline: none;
    border-color: #ff9671;
    box-shadow: 0 0 0 3px rgba(255, 150, 113, 0.15);
}

.tg-wiz-num {
    width: 80px;
}

.tg-wiz-inp-label {
    display: block;
    font-size: 0.83rem;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 6px;
}

.tg-wiz-inp-hint {
    font-weight: 400;
    color: #98989D;
    font-style: normal;
    font-size: 0.76rem;
}

.tg-wiz-hint-text {
    font-size: 0.76rem;
    color: #6E6E73;
    line-height: 1.55;
    margin-bottom: 10px;
}

/* Varies list (step 2 per-grade and step 3 per-grade lessons) */
.tg-wiz-varies-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}

.tg-wiz-varies-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tg-wiz-varies-lbl {
    font-size: 0.82rem;
    color: #3A3A3C;
    min-width: 80px;
}

/* Subjects panel (step 3) */
.tg-wiz-subj-list {
    margin-bottom: 14px;
}

.tg-wiz-empty {
    font-size: 0.82rem;
    color: #98989D;
    font-style: italic;
    text-align: center;
    padding: 10px 0;
}

.tg-wiz-subj-card {
    background: #F5F5F7;
    border: 1px solid #E5E5EA;
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 7px;
}

.tg-wiz-subj-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.tg-wiz-subj-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1D1D1F;
}

.tg-wiz-subj-meta {
    display: block;
    font-size: 0.74rem;
    color: #6E6E73;
    line-height: 1.5;
}

.tg-wiz-add-panel {
    background: #F9F9FB;
    border: 1.5px dashed #C8C8CD;
    border-radius: 14px;
    padding: 16px 18px 18px;
    margin-bottom: 6px;
}

.tg-wiz-panel-h {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1D1D1F;
    margin: 0 0 14px;
}

.tg-wiz-field {
    margin-bottom: 16px;
}

.tg-wiz-field-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.tg-wiz-quick-btns {
    display: flex;
    gap: 6px;
}

.tg-wiz-toggle-lbl {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #6E6E73;
    cursor: pointer;
    font-weight: 500;
}

/* Teacher table (step 4) */
.tg-wiz-tbl-scroll {
    overflow-x: auto;
    margin-bottom: 12px;
    border: 1px solid #E5E5EA;
    border-radius: 12px;
    max-height: 52vh;
    overflow-y: auto;
}

.tg-wt-ro {
    white-space: nowrap;
    font-size: 0.81rem;
    color: #3A3A3C;
    background: #F9F9FB;
}

.tg-wt-subj {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-wt-num {
    text-align: center;
}

/* Save row */
.tg-wiz-save-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.tg-wiz-save-hint {
    font-size: 0.76rem;
    color: #98989D;
    margin: 0;
}

/* Extra button variant */
.tg-btn--outline {
    background: #fff;
    border: 1.5px solid #D1D1D6;
    color: #3A3A3C;
}

.tg-btn--outline:hover {
    border-color: #ff9671;
    color: #ff9671;
    background: #FFF3EE;
}

/* W4 — once-off banner */
.tg-wiz-once-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #F0F7FF;
    border: 1px solid #BDD9F7;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.tg-wiz-once-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    color: #3B82F6;
}

.tg-wiz-once-banner strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    color: #1D4ED8;
    margin-bottom: 3px;
}

.tg-wiz-once-banner span {
    font-size: 0.79rem;
    color: #374151;
    line-height: 1.55;
}

/* W4 — download card */
.tg-wiz-dl-section {
    margin: 16px 0 4px;
}

.tg-wiz-dl-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #FFF8F5;
    border: 1.5px solid #FFD4BB;
    border-radius: 12px;
    padding: 14px 16px;
    flex-wrap: wrap;
}

.tg-wiz-dl-card-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.tg-wiz-dl-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1D1D1F;
    margin: 0 0 3px;
}

.tg-wiz-dl-hint {
    font-size: 0.76rem;
    color: #6E6E73;
    margin: 0;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════
   WIZARD — Mobile (max-width: 640px)
═══════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* Step 1: stack option cards vertically on small screens */
    .tg-input-options--stack {
        flex-direction: column;
        max-width: 100%;
    }

    .tg-input-options--stack .tg-option-btn {
        flex-direction: row;
        align-items: center;
        padding: 14px 14px;
        gap: 12px;
        text-align: left;
        height: auto;
    }

    .tg-input-options--stack .tg-opt-text {
        align-items: flex-start;
    }

    /* Wizard steps — full-width, comfortable padding */
    .tg-step--wiz {
        max-width: 100%;
    }

    .tg-step--wiz-wide {
        max-width: 100%;
    }

    /* Grade grid: fewer columns on small screens */
    .tg-wiz-grade-grid {
        grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
        gap: 6px;
    }

    .tg-wiz-grade-grid--sm {
        grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
        gap: 5px;
    }

    /* Radio cards — tighter padding */
    .tg-wiz-radio-card {
        padding: 11px 14px;
    }

    /* Classes varies list: stack label above input */
    .tg-wiz-varies-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .tg-wiz-varies-lbl {
        min-width: unset;
        width: 100%;
    }

    .tg-wiz-varies-row .tg-wiz-inp {
        flex: 1;
        min-width: 0;
    }

    /* Add subject panel: less padding */
    .tg-wiz-add-panel {
        padding: 14px 14px 16px;
    }

    /* Subject field header: stack on small screens */
    .tg-wiz-field-hdr {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Teacher table: shrink columns, allow horizontal scroll */
    .tg-wiz-tbl-scroll {
        border-radius: 10px;
        max-height: 38vh;
    }

    /* Teacher table inputs: compact */
    .tg-wiz-tbl-scroll .tg-ci {
        min-width: 70px;
        font-size: 0.78rem;
        padding: 5px 7px;
    }

    .tg-wiz-tbl-scroll .tg-ci--sm {
        min-width: 50px;
    }

    /* Once-off banner: tighter */
    .tg-wiz-once-banner {
        padding: 12px 14px;
        gap: 10px;
    }

    .tg-wiz-once-banner strong {
        font-size: 0.82rem;
    }

    .tg-wiz-once-banner span {
        font-size: 0.76rem;
    }

    /* Download card: stack vertically */
    .tg-wiz-dl-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 14px;
    }

    .tg-wiz-dl-card .tg-btn {
        width: 100%;
        justify-content: center;
    }

    /* Step actions: full-width buttons */
    .tg-step--wiz .tg-step-actions,
    .tg-step--wiz-wide .tg-step-actions {
        gap: 8px;
    }

    .tg-step--wiz .tg-step-actions .tg-btn,
    .tg-step--wiz-wide .tg-step-actions .tg-btn {
        flex: 1;
        justify-content: center;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════
   WIZARD STEP 3 — redesigned subjects panel
═══════════════════════════════════════════════════════ */

/* Panel header row with icon */
.tg-wiz-panel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.tg-wiz-panel-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff9671 0%, #ffb347 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.tg-wiz-panel-icon svg {
    width: 14px;
    height: 14px;
}

.tg-wiz-panel-row .tg-wiz-panel-h {
    margin: 0;
    font-size: 0.95rem;
}

/* Lessons vary pills (radio group) */
.tg-wiz-lv-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.tg-wiz-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1.5px solid #D1D1D6;
    border-radius: 20px;
    background: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    color: #3A3A3C;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
}

.tg-wiz-pill input[type="radio"] {
    display: none;
}

.tg-wiz-pill:has(input:checked),
.tg-wiz-pill.is-sel {
    background: #FFF3EE;
    border-color: #ff9671;
    color: #C25A30;
    font-weight: 600;
}

/* Varies unit label */
.tg-wiz-varies-unit {
    font-size: 0.78rem;
    color: #98989D;
    white-space: nowrap;
}

/* Add subject button — full-width */
.tg-wiz-add-btn {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

/* Subject list — redesigned cards */
.tg-wiz-subj-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #98989D;
    font-style: italic;
    padding: 14px 0 6px;
}

.tg-wiz-subj-empty svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.5;
}

.tg-wiz-subj-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    margin-bottom: 4px;
}

.tg-wiz-subj-card {
    background: #fff;
    border: 1px solid #E5E5EA;
    border-left: 3px solid #ff9671;
    border-radius: 10px;
    padding: 10px 14px;
}

.tg-wiz-subj-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    gap: 8px;
}

.tg-wiz-subj-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tg-wiz-subj-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: #C25A30;
    background: #FFF3EE;
    border: 1px solid #FFD4BB;
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
}

.tg-wiz-subj-meta {
    display: block;
    font-size: 0.76rem;
    color: #6E6E73;
    line-height: 1.5;
}

.tg-wiz-subj-lessons {
    color: #C25A30;
    font-weight: 500;
}

/* W4 step-actions: 3-button row */
.tg-step--wiz-wide .tg-step-actions {
    gap: 8px;
}

@media (max-width: 640px) {
    .tg-wiz-lv-pills {
        gap: 5px;
    }
    .tg-wiz-pill {
        font-size: 0.76rem;
        padding: 5px 10px;
    }
    .tg-wiz-panel-row {
        margin-bottom: 14px;
    }
    /* W4 actions: stack Download below back, generate stays right */
    .tg-step--wiz-wide .tg-step-actions {
        flex-wrap: wrap;
    }
    .tg-step--wiz-wide .tg-step-actions #tg-wiz-dl {
        order: 3;
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════
   WIZARD STEP 3 — lesson row layout (replaces varies-row)
═══════════════════════════════════════════════════════ */

/* Container for each mode section — uses flex not grid so display:none works cleanly */
.tg-wiz-varies-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

/* Single lesson entry row */
.tg-wiz-lesson-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #F9F9FB;
    border: 1px solid #EBEBED;
    border-radius: 8px;
    padding: 8px 12px;
}

.tg-wiz-lesson-lbl {
    font-size: 0.83rem;
    font-weight: 500;
    color: #3A3A3C;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-wiz-lesson-inp-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.tg-wiz-lesson-inp-wrap .tg-wiz-num {
    width: 64px;
    text-align: center;
    padding: 6px 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.tg-wiz-lesson-unit {
    font-size: 0.76rem;
    color: #98989D;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .tg-wiz-lesson-row {
        padding: 7px 10px;
    }
    .tg-wiz-lesson-lbl {
        font-size: 0.79rem;
    }
    .tg-wiz-lesson-inp-wrap .tg-wiz-num {
        width: 54px;
    }
}

/* ═══════════════════════════════════════════════════════
   WIZARD STEP 3 — Grades section redesign
═══════════════════════════════════════════════════════ */

/* Grade field header: tighter bottom gap */
.tg-wiz-add-panel .tg-wiz-field-hdr {
    margin-bottom: 10px;
}

/* All / None quick buttons — pill style */
.tg-wiz-quick-btns .tg-btn--sm {
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 20px;
    height: auto;
    line-height: 1.6;
}

/* Grade grid inside the add panel: tighter */
.tg-wiz-add-panel .tg-wiz-grade-grid--sm {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
    margin-bottom: 0;
}

/* Grade toggle chip — hide raw checkbox, pure visual pill */
.tg-wiz-add-panel .tg-wiz-grade-lbl {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 9px 6px 8px;
    border-radius: 10px;
    font-size: 0.79rem;
    font-weight: 600;
    text-align: center;
    background: #F2F2F7;
    border: 1.5px solid #E0E0E8;
    color: #6E6E73;
    transition: background 0.13s, border-color 0.13s, color 0.13s, box-shadow 0.13s;
}

/* Hide the raw checkbox completely */
.tg-wiz-add-panel .tg-wiz-grade-lbl input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Checked state */
.tg-wiz-add-panel .tg-wiz-grade-lbl.is-checked {
    background: #fff3ee;
    border-color: #ff9671;
    color: #C25A30;
    box-shadow: 0 0 0 3px rgba(255, 150, 113, 0.12);
}

/* Small checkmark tick badge on checked items */
.tg-wiz-add-panel .tg-wiz-grade-lbl.is-checked::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff9671;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 4l2 2 3-3' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: cover;
}

/* Hover on unchecked */
.tg-wiz-add-panel .tg-wiz-grade-lbl:not(.is-checked):hover {
    background: #EBEBF0;
    border-color: #C8C8D0;
    color: #3A3A3C;
}

@media (max-width: 640px) {
    .tg-wiz-add-panel .tg-wiz-grade-grid--sm {
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
        gap: 5px;
    }
}

/* ============================================================
   Save / Load Timetable UI
   ============================================================ */

/* "Load Saved Timetable" option card */
.tg-option-btn--saved {
    border-color: #ff9671;
    background: #fff8f5;
}
.tg-option-btn--saved:hover,
.tg-option-btn--saved:focus-visible {
    background: #fff1ea;
    border-color: #ff7a50;
}
.tg-option-btn--saved .tg-option-icon {
    color: #ff9671;
}

/* Locked / no-save-yet state */
.tg-option-btn--saved-locked {
    border-color: #D1D1D6;
    background: #F5F5F7;
    cursor: not-allowed;
    opacity: 0.6;
}
.tg-option-btn--saved-locked:hover,
.tg-option-btn--saved-locked:focus-visible {
    background: #F5F5F7;
    border-color: #D1D1D6;
}
.tg-option-btn--saved-locked .tg-option-icon {
    color: #AEAEB2;
}

/* Login hint below Step 1 option cards */
.tg-save-login-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #6e6e73;
    margin-top: 12px;
    text-align: center;
    justify-content: center;
}
.tg-save-login-hint a {
    color: #ff9671;
    text-decoration: underline;
}

/* Save Timetable ghost-accent button */
.tg-btn--save {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1.5px solid #ff9671;
    color: #ff9671;
    background: transparent;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.tg-btn--save:hover,
.tg-btn--save:focus-visible {
    background: #ff9671;
    color: #fff;
}
.tg-btn--save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Danger button */
.tg-btn--danger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1.5px solid #ff3b30;
    color: #ff3b30;
    background: transparent;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.tg-btn--danger:hover,
.tg-btn--danger:focus-visible {
    background: #ff3b30;
    color: #fff;
}

/* Small button variant */
.tg-btn--sm {
    padding: 5px 10px;
    font-size: 0.78rem;
    border-radius: 6px;
}

/* Saved timetable card on load screen */
.tg-saved-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1.5px solid #ff9671;
    border-radius: 14px;
    padding: 16px 18px;
    background: #fff8f5;
    margin: 16px 0 10px;
    position: relative;
}
.tg-saved-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff9671 0%, #ff6f91 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.tg-saved-card-icon svg {
    width: 20px;
    height: 20px;
}
.tg-saved-card-body {
    flex: 1;
    min-width: 0;
}
.tg-saved-name {
    font-size: 0.96rem;
    font-weight: 600;
    color: #1D1D1F;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tg-saved-date,
.tg-saved-rows {
    font-size: 0.78rem;
    color: #6e6e73;
    margin: 0;
}
.tg-saved-rename-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    color: #6e6e73;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.tg-saved-rename-btn:hover {
    background: #f2f2f7;
    color: #1D1D1F;
}

/* Rename inline row */
.tg-saved-rename-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    flex-wrap: wrap;
}
.tg-saved-rename-row .tg-wiz-inp {
    flex: 1;
    min-width: 120px;
}

/* Saved-screen action buttons row */
.tg-saved-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 0;
}

@media (max-width: 480px) {
    .tg-saved-card { flex-direction: column; align-items: flex-start; gap: 10px; }
    .tg-saved-actions { flex-direction: column; }
    .tg-saved-actions .tg-btn,
    .tg-saved-actions .tg-btn--danger { width: 100%; justify-content: center; }
}

/* Upload step — save prompt shown after successful parse */
.tg-upload-save-prompt {
    margin-top: 12px;
}
.tg-upload-save-offer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 14px;
    background: #fff8f5;
    border: 1.5px solid #ff9671;
    border-radius: 10px;
    font-size: 0.84rem;
    color: #3a3a3c;
}
.tg-upload-save-offer span {
    flex: 1;
    min-width: 120px;
}

@media (max-width: 480px) {
    .tg-upload-save-offer { flex-direction: column; align-items: flex-start; }
    .tg-upload-save-offer .tg-btn--save { width: 100%; justify-content: center; }
}