/* ABC Playground Worksheet Creator Forms */

/* WORKSHEET CREATOR INDEX */

.teacher-tools-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.teacher-tool-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 17px 22px;

    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;

    color: #26364a;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;

    transition: background 0.2s ease,
                border-color 0.2s ease,
                transform 0.2s ease;
}

.teacher-tool-item:hover {
    background: #eef6ff;
    border-color: #a8cbed;
    transform: translateX(3px);
    text-decoration: none;
}

.teacher-tool-item:focus-visible {
    outline: 3px solid #3182ce;
    outline-offset: 3px;
}

.tool-arrow {
    font-size: 26px;
    font-weight: 400;
    color: #7b9bb8;
    flex-shrink: 0;
}

.teacher-tool-item:hover .tool-arrow {
    color: #2563a6;
}

.creator-intro {
    font-size: 16px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 28px;
}

.search-results-inner .creator-section-title {
    font-size: 21px;
    font-weight: 700;
    color: #008db3;
    margin-top: 32px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #d9e2e5;
}

.search-results-inner .creator-section-title:first-of-type {
    margin-top: 10px;
}

.search-results-inner .teacher-tools-list {
    margin-bottom: 30px;
}





/* addition */

.creator-form {
    max-width: 850px;
    padding: 5px 0 20px;
}

.creator-intro {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 25px;
}

.creator-field {
    margin-bottom: 24px;
}

.creator-label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 9px;
    color: #333;
}

.creator-help {
    font-size: 13px;
    line-height: 1.5;
    color: #777;
    margin: 7px 0 0;
}

.creator-input,
.creator-select {
    width: 100%;
    max-width: 500px;
    padding: 11px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    font-size: 15px;
    box-sizing: border-box;
}

.creator-input:focus,
.creator-select:focus {
    border-color: #008db3;
    outline: 2px solid rgba(0,141,179,0.15);
}

.creator-section {
    padding: 20px;
    margin: 22px 0;
    border: 1px solid #e1e7eb;
    border-radius: 7px;
    background: #fafcfd;
}

.creator-section-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 18px;
    color: #008db3;
}

.creator-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
}

.creator-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    cursor: pointer;
}

.creator-option input {
    accent-color: #008db3;
}

.creator-two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.creator-two-columns .creator-field {
    margin-bottom: 0;
}

.creator-submit {
    display: inline-block;
    background: #008db3;
    color: #fff;
    padding: 13px 26px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 10px;
}

.creator-submit:hover {
    background: #007394;
}

.creator-vip-note {
    font-size: 13px;
    line-height: 1.6;
    margin-top: 10px;
    color: #666;
}

@media (max-width: 600px) {
    .creator-two-columns {
        grid-template-columns: 1fr;
    }

    .creator-section {
        padding: 15px;
    }

    .creator-submit {
        width: 100%;
    }
}


/* =========================================
   NAME TAG DESIGN PREVIEWS
========================================= */

.nt-design-preview {
    position: relative;
    height: 90px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 7px;
    box-sizing: border-box;
}

/* Student name */

.nt-preview-name {
    font-size: 20px;
    font-weight: 800;
    color: #006b8b;
    position: relative;
    z-index: 2;
}

/* Classic */

.nt-preview-classic {
    border: 4px double #008db3;
}

/* Rainbow */

.nt-preview-rainbow {
    border: 4px solid transparent;
    border-image: linear-gradient(
        90deg,
        #cf5d58,
        #e89932,
        #c99a1c,
        #75a943,
        #008db3,
        #7565a8
    ) 1;
}

/* Stars */

.nt-preview-stars {
    border: 3px solid #7565a8;
}

.nt-preview-stars .nt-decoration {
    color: #7565a8;
    font-size: 18px;
    line-height: 23px;
}

/* School pencils */

.nt-preview-school {
    border: 3px solid #75a943;
}

.nt-preview-school .nt-decoration {
    font-size: 25px;
}

/* Polka dots */

.nt-preview-dots {
    border: 3px solid #c45f8c;
}

/* Minimal */

.nt-preview-minimal {
    border-top: 3px solid #5967a8;
    border-bottom: 3px solid #5967a8;
    border-left: none;
    border-right: none;
    border-radius: 0;
}

/* Left and right decorations */

.nt-decoration {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.nt-decoration.nt-left {
    left: 8px;
}

.nt-decoration.nt-right {
    right: 8px;
}

/* Polka dot rows */

.nt-dots {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 7px;

    background-image: radial-gradient(
        circle,
        #c45f8c 3px,
        transparent 3.5px
    );

    background-size: 19px 7px;
    background-repeat: repeat-x;
}

.nt-dots-top {
    top: 7px;
}

.nt-dots-bottom {
    bottom: 7px;
}

/* Design label */

.nt-design-label {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
}

.nt-design-label input {
    margin-right: 5px;
}


.nt-wrap{padding:22px;max-width:900px}.nt-wrap p{line-height:1.6;margin:9px 0 18px}.nt-label{display:block;font-weight:700;margin:18px 0 7px}.nt-input,.nt-select,.nt-textarea{display:block;width:100%;max-width:620px;padding:12px;border:1px solid #aebdc3;border-radius:6px;font:inherit}.nt-textarea{height:220px;resize:vertical}.nt-designs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:650px}.nt-design{display:block;border:2px solid #d2dce0;border-radius:10px;padding:12px;cursor:pointer;text-align:center}.nt-design:has(input:checked){border-color:#008db3;background:#eaf8fb}.nt-design input{margin-right:5px}

.nt-colors{display:flex;gap:25px;flex-wrap:wrap}.nt-colors label{display:flex;align-items:center;gap:10px}.nt-colors input{width:55px;height:40px;cursor:pointer}.nt-button{background:#008db3;color:white;padding:14px 25px;border:0;border-radius:6px;font-weight:700;font-size:17px;cursor:pointer;margin-top:20px}.nt-button:hover{background:#00779a}.nt-help{font-size:13px;color:#666}.nt-fold{display:block;margin-top:17px}.nt-fold input{margin-right:8px}@media(max-width:650px){.nt-designs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =========================================
   LIVE CUSTOM COLOR PREVIEWS
========================================= */

.nt-designs {
    --nt-accent: #008db3;
    --nt-text: #006b8b;
}

/* Student name color */
.nt-designs .nt-preview-name {
    color: var(--nt-text);
}

/* Classic double border */
.nt-designs .nt-preview-classic {
    border-color: var(--nt-accent);
}

/* Stars */
.nt-designs .nt-preview-stars {
    border-color: var(--nt-accent);
}

.nt-designs .nt-preview-stars .nt-decoration {
    color: var(--nt-accent);
}

/* School pencils */
.nt-designs .nt-preview-school {
    border-color: var(--nt-accent);
}

/* Polka dots */
.nt-designs .nt-preview-dots {
    border-color: var(--nt-accent);
}

.nt-designs .nt-dots {
    background-image: radial-gradient(
        circle,
        var(--nt-accent) 3px,
        transparent 3.5px
    );
}

/* Minimal */
.nt-designs .nt-preview-minimal::before,
.nt-designs .nt-preview-minimal::after {
    background: var(--nt-accent);
}

/* Rainbow keeps its rainbow stripes,
   but the surrounding border changes color */
.nt-designs .nt-preview-rainbow {
    border-color: var(--nt-accent);
}

/* ==============================================
   MULTIPLE CHOICE TEST CREATOR - CONSOLIDATED
   ============================================== */

.page-layout main.subject-content {
    padding: 0;
    margin: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}
.page-layout .subject-content .content-panel { width: 100%; min-width: 0; }
.mc-creator { width: 100%; min-width: 0; padding: 25px 30px; }
.mc-creator *, .mc-creator *::before, .mc-creator *::after { box-sizing: border-box; }
.mc-creator h2 { color: #26364a; font-size: 21px; margin: 0 0 12px; }
.mc-creator > p { color: #444; line-height: 1.6; margin: 0 0 22px; }
.mc-creator h3 { color: #008db3; font-size: 18px; margin: 25px 0 14px; }
.mc-settings { background: #f8fafc; border: 1px solid #dce5ed; border-radius: 8px; padding: 20px; margin: 20px 0 28px; }
.mc-creator .converter-field { display: block; margin: 0 0 18px; }
.mc-creator .converter-field > label, .mc-question-card > label, .mc-save-option > label { display: block; width: 100%; margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #26364a; }
.mc-creator input[type="text"], .mc-creator textarea, .mc-creator select { display: block; width: 100%; min-width: 0; max-width: 100%; padding: 10px 12px; border: 1px solid #b8c6d1; border-radius: 6px; background: #fff; color: #26364a; font: inherit; line-height: 1.5; }
.mc-creator textarea { resize: vertical; min-height: 80px; }
.mc-creator input[type="text"]:focus, .mc-creator textarea:focus, .mc-creator select:focus { border-color: #008db3; outline: 2px solid rgba(0,141,179,.18); }
.mc-settings-options { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 12px; }
.mc-settings-options label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; cursor: pointer; }
.mc-settings-options input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: #008db3; }
.mc-question-card { width: 100%; margin: 18px 0; padding: 20px; background: #fff; border: 1px solid #dce5ed; border-left: 4px solid #008db3; border-radius: 8px; }
.mc-question-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 15px; }
.mc-question-header h4 { margin: 0; color: #008db3; font-size: 19px; }
.mc-question-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-question-actions button { padding: 6px 10px; border: 1px solid #dce5ed; border-radius: 5px; background: #f8fafc; color: #26364a; font: inherit; font-size: 13px; cursor: pointer; }
.mc-question-actions button:hover { background: #eaf5fb; }
.mc-question-card > label { margin-top: 15px; }
.mc-options-heading, .mc-option-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 65px; gap: 10px; align-items: center; }
.mc-options-heading { margin-top: 18px; padding-bottom: 4px; color: #555; font-size: 13px; font-weight: 700; }
.mc-options-heading span:first-child { grid-column: 2; }
.mc-options-heading span:last-child { grid-column: 3; text-align: center; }
.mc-option-row { margin: 10px 0; }
.mc-option-letter { color: #008db3; font-weight: 700; }
.mc-option-row input[type="radio"] { display: block; width: 18px; height: 18px; margin: 0; justify-self: center; accent-color: #008db3; cursor: pointer; }
.mc-add-question { display: flex; justify-content: flex-start; margin: 20px 0 28px; }
.mc-add-question-button { width: auto; padding: 11px 20px; background: #fff; color: #008db3; border: 2px solid #008db3; border-radius: 6px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.mc-add-question-button:hover { background: #eaf8fb; }
.mc-save-option { margin: 22px 0; }
.mc-creator .mc-save-option select { width: 220px; max-width: 100%; }
.mc-save-option p { margin: 8px 0 0; color: #64748b; font-size: 13px; line-height: 1.5; }
.mc-save-option p a { color: #008db3; text-decoration: underline; }
.mc-generate { margin: 25px 0 10px; }
.mc-generate-button { display: block; width: 100%; padding: 15px 24px; background: #008db3; color: #fff; border: 0; border-radius: 7px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.mc-generate-button:hover { background: #007394; }
.mc-creator button:focus-visible { outline: 3px solid #82d5e8; outline-offset: 3px; }
@media (max-width: 600px) {
    .mc-creator { padding: 15px; }
    .mc-settings, .mc-question-card { padding: 15px; }
    .mc-question-header { align-items: flex-start; }
    .mc-options-heading, .mc-option-row { grid-template-columns: 20px minmax(0, 1fr) 52px; gap: 7px; }
    .mc-add-question-button { width: 100%; }
}


/* Missing Letter Puzzle Creator - append to style-creators.css */
.page-layout main.subject-content{padding:0;margin:0;border-radius:0;overflow:visible;background:transparent}
.page-layout .subject-content .content-panel{width:100%;min-width:0}
.ml-creator{padding:25px 30px;width:100%;min-width:0;box-sizing:border-box}
.ml-creator *{box-sizing:border-box}
.ml-creator h2{font-size:21px;margin:0 0 12px;color:#26364a}
.ml-creator p{line-height:1.6;margin:0 0 20px}
.ml-settings{padding:20px;margin:22px 0 25px;background:#f8fafc;border:1px solid #dce5ed;border-radius:8px}
.ml-settings>label,.ml-save>label{display:block;font-weight:700;color:#26364a;margin:0 0 8px}
.ml-settings>input,.ml-settings>textarea,.ml-settings>select,.ml-save>select{display:block;width:100%;min-width:0;padding:11px 12px;border:1px solid #b8c6d1;border-radius:6px;background:#fff;font:inherit;margin-bottom:18px}
.ml-settings textarea{resize:vertical}
.ml-checks{display:flex;flex-wrap:wrap;gap:12px 24px}
.ml-checks label{display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.ml-checks input{accent-color:#008db3}
.ml-creator h3{font-size:18px;color:#008db3;margin:0 0 6px}
.ml-creator .ml-note{font-size:14px;color:#64748b;margin-bottom:14px}
.ml-row{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1.5fr) auto;align-items:center;gap:10px;padding:12px;margin-bottom:9px;border:1px solid #dce5ed;border-radius:7px;background:#fff}
.ml-number{font-weight:700;color:#008db3}
.ml-row input{width:100%;min-width:0;padding:10px 12px;border:1px solid #b8c6d1;border-radius:6px;font:inherit}
.ml-hint-wrap[hidden]{display:none}
.ml-row:has(.ml-hint-wrap[hidden]){grid-template-columns:28px minmax(0,1fr) auto}
.ml-remove{padding:9px 12px;background:#f8fafc;border:1px solid #dce5ed;border-radius:5px;cursor:pointer}
.ml-remove:hover{background:#ffe9e9}
.ml-add,.ml-submit{background:#008db3;color:#fff;border:0;border-radius:6px;font-weight:700;cursor:pointer;padding:12px 22px;font-size:15px}
.ml-add:hover,.ml-submit:hover{background:#007394}
.ml-add:disabled{opacity:.5;cursor:not-allowed}
.ml-save{margin:25px 0;padding:18px 20px;background:#f8fafc;border:1px solid #dce5ed;border-radius:8px}
.ml-save>select{max-width:220px;margin-bottom:8px}
.ml-save p{font-size:13px;color:#64748b;margin:0}
.ml-submit{display:block;width:100%;font-size:18px;padding:16px 22px}
@media(max-width:700px){.ml-creator{padding:15px}.ml-row{grid-template-columns:24px minmax(0,1fr) auto}.ml-hint-wrap{grid-column:2 / -1}.ml-row:has(.ml-hint-wrap[hidden]){grid-template-columns:24px minmax(0,1fr) auto}}


/* Crossword Puzzle Creator — append to /css/style-creators.css */
.cw-creator{padding:25px 30px;color:#263746;box-sizing:border-box}
.cw-creator *{box-sizing:border-box}
.cw-creator p{line-height:1.6;margin:0 0 17px}
.cw-creator label{font-weight:700;display:block;margin-bottom:7px}
.cw-creator input[type=text],.cw-creator select{border:1px solid #b9cbd2;border-radius:6px;background:#fff;padding:10px 12px;font:inherit;min-width:0;width:100%;height:43px}
.cw-creator input:focus,.cw-creator select:focus{outline:2px solid #008db3;outline-offset:1px}
.cw-field{margin:0 0 22px}.cw-field input{max-width:580px}
.cw-list-title{margin:20px 0 10px}.cw-list-title h2{font-size:21px;margin:0 0 4px}.cw-list-title p{font-size:13px;color:#627783;margin:0}
.cw-row-head,.cw-row{display:grid;grid-template-columns:30px minmax(120px,1fr) minmax(180px,2fr) 80px;gap:10px;align-items:center}
.cw-row-head{font-size:13px;font-weight:700;color:#546976;margin:14px 0 6px}.cw-row-head span:first-child{grid-column:2}
.cw-row{padding:10px 0;border-bottom:1px solid #e7eef1}.cw-num{color:#5d7480;font-weight:700;text-align:center}
.cw-remove{border:1px solid #d5a6a6;border-radius:6px;color:#a43d3d;background:#fff;padding:9px 7px;cursor:pointer}
.cw-add{margin:17px 0 22px;padding:11px 19px;border:2px solid #008db3;color:#008db3;background:#fff;border-radius:7px;font-weight:700;cursor:pointer}
.cw-add:disabled{opacity:.45;cursor:not-allowed}.cw-options{padding:14px 0;border-top:1px solid #e5ecef}.cw-options label{display:flex;gap:9px;align-items:center;font-weight:500}.cw-options input{width:17px;height:17px}
.cw-save{margin-top:8px}.cw-save select{max-width:220px}.cw-save p{margin-top:9px;font-size:13px;color:#637784}
.cw-submit{width:100%;background:#008db3;color:white;border:0;border-radius:7px;padding:15px;font-size:17px;font-weight:700;cursor:pointer}.cw-submit:hover{background:#007394}
@media(max-width:720px){.cw-creator{padding:16px}.cw-row-head{display:none}.cw-row{grid-template-columns:26px minmax(0,1fr) 76px;gap:7px}.cw-row .cw-word{grid-column:2}.cw-row .cw-clue{grid-column:2;grid-row:2}.cw-row .cw-remove{grid-column:3;grid-row:1/3}.cw-row .cw-num{grid-row:1/3}}


/* Handwriting Practice Creator — append to /css/style-creators.css */
.hw-creator{padding:20px 24px 30px;max-width:950px;margin:auto}
.hw-creator p{line-height:1.5}
.hw-field{margin:14px 0;display:flex;flex-direction:column;gap:7px}
.hw-field label{font-weight:700;color:#254553}
.hw-field input,.hw-field select,.hw-entry{width:100%;box-sizing:border-box;min-height:42px;padding:9px 11px;border:1px solid #aabec6;border-radius:5px;background:#fff;font-size:15px}
.hw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.hw-list-title{margin-top:22px;border-bottom:2px solid #008db3}
.hw-list-title h2{margin:0;font-size:20px;color:#006e90}
.hw-list-title h2 span{font-size:14px;color:#536e7b}
.hw-list-title p{margin:7px 0 10px;font-size:14px}
.hw-row{display:grid;grid-template-columns:30px minmax(0,1fr) 85px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #e1e9ed}
.hw-num{font-weight:700;color:#456}
.hw-add,.hw-remove,.hw-submit{cursor:pointer;border:0;border-radius:5px;font-weight:700}
.hw-add{margin-top:16px;padding:11px 18px;background:#e6f5f8;color:#007a9d;border:1px solid #008db3}
.hw-add:disabled{opacity:.45;cursor:not-allowed}
.hw-remove{padding:10px 8px;background:#f4e8e8;color:#9c3030}
.hw-options{margin:20px 0}
.hw-options label{display:flex;align-items:center;gap:8px}
.hw-submit{display:block;width:100%;max-width:340px;padding:14px 20px;background:#008db3;color:white;font-size:17px;margin:25px 0 0}
.hw-submit:hover{background:#007393}
@media(max-width:620px){.hw-creator{padding:15px}.hw-grid{grid-template-columns:1fr}.hw-row{grid-template-columns:22px minmax(0,1fr) 70px;gap:6px}.hw-remove{font-size:12px}}


/* Matching Worksheet Creator - append to /css/style-creators.css */
.mt-creator{max-width:920px;margin:0 auto;padding:18px 8px 28px}
.mt-creator p{line-height:1.55;margin:0 0 16px}
.mt-creator form{display:flex;flex-direction:column;gap:16px}
.mt-field{display:flex;flex-direction:column;gap:6px}
.mt-field label{font-weight:700;color:#283b49}
.mt-field input,.mt-field select,.mt-pair-row input{box-sizing:border-box;width:100%;min-height:42px;padding:9px 11px;border:1px solid #bdcbd5;border-radius:6px;background:#fff;color:#243745;font:inherit}
.mt-field input:focus,.mt-field select:focus,.mt-pair-row input:focus{outline:2px solid #48a7d0;outline-offset:1px}
.mt-field p{font-size:.91rem;margin:2px 0 0}
.mt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 18px}
.mt-pairs-heading h2{font-size:1.2rem;margin:0 0 5px}
.mt-pairs-heading h2 span{font-size:.88rem;color:#647784}
.mt-pairs-heading p{margin:0;color:#516674;font-size:.95rem}
.mt-pairs-labels{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-left:39px;padding-right:86px;font-weight:700;color:#344b5b}
#mtRows{display:flex;flex-direction:column;gap:10px}
.mt-pair-row{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) 76px;align-items:center;gap:10px}
.mt-num{font-weight:700;color:#637788}
.mt-remove{min-height:40px;padding:6px 8px;border:1px solid #d9a7a7;border-radius:6px;background:#fff;color:#a23a3a;cursor:pointer}
.mt-remove:hover{background:#fff3f3}
.mt-add,.mt-submit{align-self:flex-start;padding:12px 20px;border:0;border-radius:7px;font:inherit;font-weight:700;cursor:pointer}
.mt-add{background:#e7f5fb;color:#087da5}
.mt-add:hover{background:#d4edf8}
.mt-add:disabled{opacity:.5;cursor:not-allowed}
.mt-submit{background:#0698c9;color:#fff;font-size:1.04rem}
.mt-submit:hover{background:#087eac}
.mt-save{margin-top:3px}
@media(max-width:650px){.mt-grid{grid-template-columns:1fr}.mt-pairs-labels{display:none}.mt-pair-row{grid-template-columns:25px 1fr 76px;gap:7px}.mt-pair-row .mt-left{grid-column:2;grid-row:1}.mt-pair-row .mt-right{grid-column:2;grid-row:2}.mt-pair-row .mt-num{grid-column:1;grid-row:1}.mt-pair-row .mt-remove{grid-column:3;grid-row:1 / span 2}.mt-creator{padding:12px 3px}}


/* ABC Playground - Fill-in-the-Blank Worksheet Creator */
.fb-creator {
    max-width: 960px;
    margin: 0 auto;
    padding: 25px 30px 35px;
    box-sizing: border-box;
}
.fb-creator p{line-height:1.55}
.fb-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.fb-field>label{font-weight:700;color:#284a61}
.fb-field input,.fb-field select{box-sizing:border-box;width:100%;min-height:43px;border:1px solid #b8c9d5;border-radius:7px;padding:9px 11px;background:#fff;color:#263b4b;font:inherit}
.fb-field input:focus,.fb-field select:focus,.fb-row input:focus{outline:2px solid #3d9bc0;outline-offset:1px}
.fb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.fb-section-title{margin:24px 0 12px}
.fb-section-title h2{font-size:1.25rem;margin:0 0 6px}
.fb-section-title p{margin:0 0 10px;color:#506878}
.fb-column-labels{display:grid;grid-template-columns:35px 1.2fr .75fr 1.2fr 76px;gap:8px;padding:0 3px 8px;font-weight:700;font-size:.88rem;color:#355a71}
.fb-column-labels span:nth-child(1){grid-column:2}.fb-column-labels span:nth-child(2){grid-column:3}.fb-column-labels span:nth-child(3){grid-column:4}
.fb-row{display:grid;grid-template-columns:35px 1.2fr .75fr 1.2fr 76px;gap:8px;align-items:center;margin-bottom:10px}
.fb-num{font-weight:700;color:#355a71;text-align:center}
.fb-row input{width:100%;min-width:0;box-sizing:border-box;padding:10px 9px;min-height:43px;border:1px solid #b8c9d5;border-radius:6px;font:inherit}
.fb-remove{border:1px solid #d5a3a3;color:#8b3333;background:#fff5f5;border-radius:6px;padding:10px 5px;cursor:pointer}
.fb-add{border:1px solid #338cad;background:#eaf8fd;color:#146280;border-radius:7px;padding:11px 17px;font-weight:700;cursor:pointer;margin:5px 0 24px}
.fb-add:disabled{opacity:.45;cursor:not-allowed}
.fb-submit{display:block;width:100%;max-width:380px;background:#1688b1;color:white;border:0;border-radius:8px;padding:14px 20px;font-size:1rem;font-weight:700;cursor:pointer}
.fb-submit:hover{background:#0c6f93}
@media(max-width:720px){.fb-grid{grid-template-columns:1fr}.fb-column-labels{display:none}.fb-row{grid-template-columns:28px 1fr 1fr;gap:7px;border:1px solid #d9e5ed;padding:10px;border-radius:9px}.fb-num{grid-row:1;grid-column:1}.fb-before{grid-column:2/4}.fb-answer{grid-column:2}.fb-after{grid-column:3}.fb-remove{grid-column:2/4}}
@media (max-width: 720px) {
    .fb-creator {
        padding: 18px 12px 25px;
    }
}


/* ABC Playground - Maze Worksheet Creator */
.mz-creator{max-width:960px;margin:0 auto;padding:25px 30px 35px;box-sizing:border-box}
.mz-creator p{line-height:1.55}
.mz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.mz-field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.mz-field>label{font-weight:700;color:#284a61}
.mz-field input,.mz-field select{box-sizing:border-box;width:100%;min-height:43px;border:1px solid #b8c9d5;border-radius:7px;padding:9px 11px;background:#fff;color:#263b4b;font:inherit}
.mz-field input:focus,.mz-field select:focus{outline:2px solid #3d9bc0;outline-offset:1px}
.mz-field p{margin:5px 0 0;font-size:.93rem}
.mz-submit{display:block;width:100%;max-width:380px;background:#1688b1;color:#fff;border:0;border-radius:8px;padding:14px 20px;font-size:1rem;font-weight:700;cursor:pointer}
.mz-submit:hover{background:#0c6f93}
@media(max-width:720px){.mz-creator{padding:18px 12px 25px}.mz-grid{grid-template-columns:1fr}}



/* ABC Playground - Short Answer Quiz Creator */
.sa-creator{max-width:960px;margin:0 auto;padding:25px 30px 35px;box-sizing:border-box}
.sa-creator p{line-height:1.55}
.sa-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.sa-field>label{font-weight:700;color:#284a61}
.sa-field input,.sa-field select,.sa-field textarea{box-sizing:border-box;width:100%;min-height:43px;border:1px solid #b8c9d5;border-radius:7px;padding:9px 11px;background:#fff;color:#263b4b;font:inherit}
.sa-field textarea{resize:vertical;line-height:1.45}
.sa-field input:focus,.sa-field select:focus,.sa-field textarea:focus{outline:2px solid #3d9bc0;outline-offset:1px}
.sa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.sa-section-title{margin:24px 0 12px}
.sa-section-title h2{font-size:1.25rem;margin:0 0 6px}
.sa-section-title p{margin:0;color:#506878}
.sa-row{border:1px solid #d4e2eb;border-radius:10px;padding:17px 18px 4px;margin-bottom:14px;background:#fbfdff}
.sa-row-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;color:#284a61}
.sa-row-grid{display:grid;grid-template-columns:minmax(140px,.65fr) minmax(0,1.35fr);gap:16px}
.sa-remove{border:1px solid #d5a3a3;color:#8b3333;background:#fff5f5;border-radius:6px;padding:8px 13px;cursor:pointer}
.sa-add{border:1px solid #338cad;background:#eaf8fd;color:#146280;border-radius:7px;padding:11px 17px;font-weight:700;cursor:pointer;margin:5px 0 24px}
.sa-add:disabled{opacity:.45;cursor:not-allowed}
.sa-submit{display:block;width:100%;max-width:380px;background:#1688b1;color:#fff;border:0;border-radius:8px;padding:14px 20px;font-size:1rem;font-weight:700;cursor:pointer}
.sa-submit:hover{background:#0c6f93}
@media(max-width:720px){.sa-creator{padding:18px 12px 25px}.sa-grid,.sa-row-grid{grid-template-columns:1fr}.sa-row{padding:13px 12px 2px}}


/* true or false creator */
.tf-creator{padding:25px 30px 35px;color:#263b4b}
.tf-creator p{line-height:1.55}
.tf-creator .tf-field{margin:0 0 17px}
.tf-creator .tf-field>label{display:block;font-weight:700;margin-bottom:7px}
.tf-creator input,.tf-creator select,.tf-creator textarea{display:block;width:100%;max-width:100%;box-sizing:border-box;border:1px solid #bccbd5;border-radius:7px;padding:11px 12px;font:inherit;background:#fff;color:#263b4b}
.tf-creator textarea{resize:vertical}
.tf-creator input:focus,.tf-creator select:focus,.tf-creator textarea:focus{outline:2px solid #79c5df;outline-offset:1px}
.tf-creator .tf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.tf-creator .tf-questions-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 14px}
.tf-creator .tf-questions-heading h2{font-size:20px;margin:0}
.tf-creator #tfCount{font-size:13px;color:#667f8d;font-weight:400}
.tf-creator .tf-card{border:1px solid #d2e0e8;border-radius:10px;background:#f8fbfd;padding:17px 18px;margin-bottom:15px}
.tf-creator .tf-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.tf-creator .tf-secondary,.tf-creator .tf-remove{border:1px solid #1d8eb7;border-radius:7px;background:#fff;color:#146b8b;padding:9px 13px;cursor:pointer;font:inherit;font-weight:700}
.tf-creator .tf-remove{border-color:#d3a5a5;color:#9b3434;padding:6px 10px;font-size:13px}
.tf-creator button:disabled{opacity:.45;cursor:not-allowed}
.tf-creator .tf-submit{display:block;width:100%;border:0;border-radius:8px;background:#1688b1;color:#fff;padding:14px 20px;font:inherit;font-weight:700;cursor:pointer;margin-top:20px}
.tf-creator .tf-submit:hover{background:#116e90}
@media(max-width:700px){.tf-creator{padding:18px 12px 25px}.tf-creator .tf-grid{grid-template-columns:1fr}.tf-creator .tf-questions-heading{align-items:flex-start;flex-direction:column}}

/* True/False: keep Add Statement after the final dynamically added card */
.tf-creator #tfQuestions { display: flex; flex-direction: column; }
.tf-creator #tfAddRow { position: static; order: 0; margin: 8px 0 26px; align-self: flex-start; }
.tf-creator #tfAddRow .tf-secondary { display: inline-block; }


/* Append to /css/style-creators.css */
.cg-creator{padding:26px 30px 32px;color:#26364a}
.cg-creator p{margin:0 0 18px;line-height:1.6}
.cg-creator .cg-field{display:flex;flex-direction:column;gap:7px;margin-bottom:17px}
.cg-creator .cg-field label{font-weight:700;font-size:15px}
.cg-creator .cg-field input,.cg-creator .cg-field textarea,.cg-creator .cg-field select{width:100%;padding:11px 12px;border:1px solid #b9c7d2;border-radius:6px;font:inherit;background:#fff;color:#26364a}
.cg-creator .cg-field textarea{resize:vertical;min-height:100px}
.cg-creator .cg-field small{font-size:12px;color:#607184}
.cg-creator .cg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
.cg-creator #cgPartialRow[hidden]{display:none}
.cg-creator .cg-submit{display:block;background:#008db3;border:0;border-radius:6px;color:#fff;padding:14px 24px;font-size:17px;font-weight:700;cursor:pointer;margin-top:14px}
.cg-creator .cg-submit:hover{background:#00718f}
.cg-creator .cg-note{font-size:13px;color:#607184;margin-top:16px}
@media(max-width:700px){.cg-creator{padding:18px}.cg-creator .cg-grid{grid-template-columns:1fr}.cg-creator .cg-submit{width:100%}}



/* ABC Playground Math Word Problem Creator */
.mwp-creator{padding:25px 30px 35px;color:#263b4b}

.mwp-creator p{line-height:1.55;margin:0 0 20px}
.mwp-creator .mwp-field{margin:0 0 18px;min-width:0}
.mwp-creator .mwp-field>label{display:block;font-weight:700;margin-bottom:7px}
.mwp-creator input:not([type=checkbox]),.mwp-creator textarea,.mwp-creator select{width:100%;padding:11px 12px;box-sizing:border-box;border:1px solid #bccbd5;border-radius:7px;background:#fff;font:inherit;color:#263b4b}
.mwp-creator textarea{resize:vertical}
.mwp-creator .mwp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.mwp-creator .mwp-skills{border:1px solid #d2e0e8;border-radius:10px;padding:16px 18px;margin:6px 0 24px}
.mwp-creator .mwp-skills legend{font-weight:700;padding:0 8px}
.mwp-creator .mwp-skills legend small{font-weight:400;color:#637985}
.mwp-creator .mwp-check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mwp-creator .mwp-check{display:flex;align-items:center;gap:9px;background:#f8fbfd;border:1px solid #e0e9ee;border-radius:7px;padding:10px;cursor:pointer}
.mwp-creator .mwp-check input{width:17px;height:17px;flex:none}
.mwp-creator .mwp-disabled{opacity:.4;cursor:not-allowed}
.mwp-creator .mwp-note{font-size:13px;color:#607481;margin:14px 0 0}
.mwp-creator .mwp-field small{display:block;margin-top:5px;color:#637985}
.mwp-creator .mwp-error{background:#fff2f2;border:1px solid #e2aaaa;color:#8a2222;padding:12px;border-radius:7px}
.mwp-creator .mwp-submit{display:block;width:100%;border:0;border-radius:8px;background:#1688b1;color:white;padding:15px 20px;font:inherit;font-weight:700;cursor:pointer;margin-top:8px}
.mwp-creator .mwp-submit:hover{background:#116e90}
@media(max-width:700px){.mwp-creator{padding:18px 12px 25px}.mwp-creator .mwp-grid{grid-template-columns:1fr}.mwp-creator .mwp-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}



/* ABC Playground Bingo Creator: append to /css/style-creators.css */
.bg-creator{max-width:100%;padding:22px 8px 34px;box-sizing:border-box}
.bg-creator form{width:100%}
.bg-creator p{line-height:1.6;margin:8px 0 18px}
.bg-creator h2{font-size:21px;line-height:1.3;margin:30px 0 12px;padding-bottom:9px;border-bottom:1px solid #dbe6ec;color:#263c4b}
.bg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px;margin:18px 0 26px}
.bg-field{display:flex;flex-direction:column;gap:7px;min-width:0;margin:0 0 16px}
.bg-grid .bg-field{margin-bottom:0}
.bg-field label{font-size:14px;font-weight:650;color:#344b5b;line-height:1.4}
.bg-field input,.bg-field select,.bg-entry input,.bg-bulk textarea{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:43px;padding:10px 12px;border:1px solid #c9d7df;border-radius:7px;background:#fff;color:#273f4c;font:inherit;font-size:15px;line-height:1.35}
.bg-field input:focus,.bg-field select:focus,.bg-entry input:focus,.bg-bulk textarea:focus{outline:2px solid #8ed2e2;outline-offset:1px;border-color:#008ba8}
.bg-field small,.bg-generator-panel small{font-size:12px;line-height:1.45;color:#667d8c}
.bg-generator-panel{padding:18px 20px;margin:16px 0 23px;background:#f5fafc;border:1px solid #d9e7ee;border-radius:10px}
.bg-generator-heading{font-size:16px;font-weight:700;color:#263c4b}
.bg-generator-panel p{margin:7px 0 13px;font-size:14px}
.bg-generator-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px}
.bg-action-button,.bg-bulk button{padding:10px 15px;min-height:42px;border:1px solid #008ba8;border-radius:7px;background:white;color:#007a97;font:inherit;font-weight:650;cursor:pointer}
.bg-action-button:hover,.bg-bulk button:hover{background:#e7f5f9}
.bg-entry-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-left:35px;padding:10px 0;font-size:13px;color:#344b5b}
.bg-entry{display:grid;grid-template-columns:26px minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center;margin-bottom:10px}
.bg-index{font-size:13px;color:#60788a;text-align:right}
.bg-bulk{margin:22px 0;padding:16px 18px;border:1px solid #d5e1e7;border-radius:9px}
.bg-bulk summary{cursor:pointer;font-weight:650}
.bg-bulk textarea{margin:12px 0;min-height:110px}
.bg-submit{display:inline-block;margin-top:16px;padding:13px 23px;background:#008ba8;color:white;border:0;border-radius:7px;font-size:16px;font-weight:700;cursor:pointer}
.bg-submit:hover{background:#00738e}
.bg-entry[hidden],.bg-field[hidden]{display:none!important}
@media(max-width:700px){.bg-creator{padding:15px 2px 25px}.bg-grid{grid-template-columns:1fr;gap:14px}.bg-generator-panel{padding:14px}.bg-generator-actions{flex-direction:column}.bg-action-button{width:100%}.bg-entry{grid-template-columns:20px minmax(0,1fr) minmax(0,1fr);gap:7px}.bg-entry-header{margin-left:27px;gap:7px;font-size:12px}.bg-entry input{padding:8px;font-size:13px}}

/* Bingo Creator - Save Game field */

.bg-creator .bg-field:has(#bgSave) {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 90px;
}

.bg-creator #bgSave {
    display: block !important;
    width: 100% !important;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #aaa;
    border-radius: 6px;
    background: #fff;
    color: #222;
    font-size: 15px;
}

.bg-creator .bg-field:has(#bgSave) label {
    display: block !important;
    font-weight: 700;
    color: #333;
}

.bg-creator .bg-field:has(#bgSave) small {
    display: block !important;
    font-size: 12px;
    color: #555;
}


/* ABC Playground Sentence Scrambler Creator - append to /css/style-creators.css */
.ss-creator{padding:24px 28px 32px;max-width:100%;min-width:0;color:#263747;font-size:15px;line-height:1.5}
.ss-creator *{box-sizing:border-box}
.ss-creator>p{margin:0 0 20px;color:#526477;line-height:1.6}
.ss-creator h2{font-size:20px;color:#263747;margin:28px 0 10px;padding-bottom:9px;border-bottom:2px solid #d9eaf2;line-height:1.35}
.ss-creator form{min-width:0}
.ss-creator .ss-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px;row-gap:16px;margin:18px 0 24px;align-items:start}
.ss-creator .ss-field{display:flex;flex-direction:column;gap:7px;margin:0;min-width:0}
.ss-creator .ss-field>label{display:block;color:#34495e;font-weight:700;font-size:14px;line-height:1.35}
.ss-creator .ss-field input,.ss-creator .ss-field select,.ss-creator .ss-field textarea{display:block;width:100%;max-width:100%;min-width:0;min-height:45px;margin:0;padding:11px 12px;border:1px solid #b9c9d6;border-radius:6px;background:#fff;color:#243545;font-family:inherit;font-size:15px;font-weight:400;line-height:1.45;box-shadow:none;outline-offset:2px}
.ss-creator .ss-field input:focus,.ss-creator .ss-field select:focus,.ss-creator .ss-field textarea:focus{border-color:#008db3;outline:2px solid #cceef7}
.ss-creator .ss-field textarea{min-height:67px;resize:vertical}
.ss-creator .ss-example{margin:25px 0;padding:20px 22px;border:1px solid #b9dfe9;border-left:5px solid #008db3;border-radius:8px;background:#f2f9fc}
.ss-creator .ss-example strong{display:block;color:#17536c;font-size:18px;margin-bottom:6px}
.ss-creator .ss-example p{margin:0 0 15px;color:#425d6b}
.ss-creator .ss-example small{display:block;margin-top:11px;color:#5d7180;font-size:13px}
.ss-creator .ss-example button,.ss-creator .ss-submit{display:inline-block;max-width:100%;min-height:45px;padding:12px 20px;border:0;border-radius:6px;background:#008db3;color:#fff;font-family:inherit;font-size:15px;font-weight:700;line-height:1.35;cursor:pointer;text-align:center;transition:background .15s ease}
.ss-creator .ss-example button:hover{background:#00718f}
.ss-creator .ss-submit{margin-top:23px;background:#208b51;padding:14px 25px;font-size:16px}
.ss-creator .ss-submit:hover{background:#176d3e}
.ss-creator #ssRows{display:grid;grid-template-columns:1fr;gap:12px;margin-top:17px}
.ss-creator .ss-sentence{display:grid;grid-template-columns:108px minmax(0,1fr);gap:14px;align-items:start;padding:13px 15px;border:1px solid #dce5eb;border-radius:7px;background:#fbfdfe}
.ss-creator .ss-sentence>label{padding-top:12px;color:#3e5366;font-size:14px;font-weight:700}
.ss-creator .ss-sentence textarea{min-height:56px}
.ss-creator .ss-sentence[hidden]{display:none!important}
.ss-creator #ssError{padding:10px 12px;border-radius:6px;background:#fff3f1}
@media(max-width:800px){.ss-creator{padding:18px 16px 24px}.ss-creator .ss-grid{grid-template-columns:1fr;gap:13px}.ss-creator .ss-sentence{grid-template-columns:1fr;gap:6px}.ss-creator .ss-sentence>label{padding-top:0}}



/* ABC Playground Classroom Newsletter Creator — append to /css/style-creators.css */
.nl-wrap{max-width:1400px;margin:24px auto;padding:0 20px;font-family:'Open Sans',Arial,sans-serif;color:#273747}
.nl-wrap *{box-sizing:border-box}.nl-heading{margin:0 0 22px}.nl-heading h1{color:#008db3!important;font-size:28px;margin:0 0 8px}.nl-heading p{margin:0;color:#536477;line-height:1.55}
.nl-columns{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:24px;align-items:start}.nl-editor{min-width:0}.nl-panel{background:#fff;border:1px solid #d5e1e8;border-radius:12px;padding:22px;margin-bottom:20px;box-shadow:0 2px 8px rgba(20,50,80,.045)}.nl-panel h2,.nl-preview-top h2{color:#173c54;font-size:19px;margin:0 0 15px}.nl-panel p{font-size:14px;line-height:1.55;color:#536477;margin:0 0 15px}.nl-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.nl-fields label,.nl-section-body label,.nl-save>label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:#354c5e}.nl-wide{grid-column:1/-1}.nl-wrap input:not([type=checkbox]):not([type=hidden]),.nl-wrap select,.nl-wrap textarea{width:100%;border:1px solid #b9cbd6;background:#fff;color:#263746;border-radius:7px;padding:11px 12px;font:inherit;font-size:14px;min-width:0}.nl-wrap textarea{resize:vertical;min-height:78px;line-height:1.5}.nl-wrap input:focus,.nl-wrap select:focus,.nl-wrap textarea:focus{outline:2px solid #7ac5d8;outline-offset:1px}.nl-wrap small{font-size:11px;font-weight:400;color:#6b7e8e;line-height:1.45}.nl-muted-btn{background:#edf4f7;color:#2a6078;border:1px solid #c6dce7;border-radius:7px;padding:8px 12px;margin-top:10px;cursor:pointer;font-weight:700}.nl-section{border:1px solid #d8e3e9;border-radius:9px;margin:11px 0;overflow:hidden}.nl-check{display:flex;align-items:center;gap:10px;padding:13px 14px;background:#f2f7f9;cursor:pointer;font-size:14px}.nl-check input{width:17px;height:17px;accent-color:#008db3}.nl-section-body{display:grid;gap:12px;padding:14px}.nl-section:has(.nl-check input:not(:checked)) .nl-section-body{display:none}.nl-save{border-top:4px solid #008db3}.nl-save .nl-help{margin:12px 0;font-size:12px}.nl-primary{display:block;width:100%;padding:15px 20px;border:2px solid #225b76;background:#008db3;color:white;border-radius:8px;font-size:17px;font-weight:700;cursor:pointer}.nl-primary:hover{background:#00769a}.nl-preview-panel{position:sticky;top:16px;background:#f3f7f9;border:1px solid #d8e3e9;border-radius:12px;padding:18px;max-height:calc(100vh - 32px);overflow:auto}.nl-preview-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.nl-preview-top h2{margin:0}.nl-preview-top span{font-size:12px;color:#667889}.nl-preview-note{font-size:12px;line-height:1.5;color:#647787;margin:12px 0 0}.nl-paper{display:grid;gap:16px}.nl-preview-page{aspect-ratio:8.5/11;width:100%;background:#fff;border:1px solid #d1d9e0;box-shadow:0 4px 14px rgba(30,50,65,.1);display:flex;flex-direction:column;overflow:hidden}.nl-preview-header{background:var(--nl-accent);color:#fff;padding:5% 6% 4%}.nl-preview-header h3{font-size:clamp(14px,2vw,24px);line-height:1.2;margin:0 0 9px;color:#fff}.nl-preview-header>div{font-size:clamp(7px,.85vw,11px);display:flex;justify-content:space-between;gap:8px}.nl-preview-photo{width:88%;height:17%;margin:3% auto 0;object-fit:contain}.nl-preview-content{padding:4% 6%;flex:1;display:flex;flex-direction:column;gap:2.5%;min-height:0;overflow:hidden}.nl-preview-section h4{background:var(--nl-light);color:var(--nl-accent);font-size:clamp(10px,1.1vw,14px);padding:5px 7px;margin:0 0 5px}.nl-preview-section p{font-size:clamp(8px,.85vw,11px);white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45;margin:0;color:#354655}.nl-preview-footer{margin:auto 6% 3%;padding-top:6px;border-top:1px solid #d8e3e9;font-size:9px;color:#82919c;display:flex;justify-content:space-between}.nl-notice{padding:12px 15px;background:#eef8f3;border:1px solid #b6d9c8;border-radius:8px;color:#216445;margin-bottom:16px}
@media(max-width:950px){.nl-columns{grid-template-columns:1fr}.nl-preview-panel{position:static;max-height:none}.nl-preview-page{max-width:580px;margin:0 auto}.nl-preview-header h3{font-size:23px}.nl-preview-header>div{font-size:10px}.nl-preview-section h4{font-size:13px}.nl-preview-section p{font-size:11px}}
@media(max-width:560px){.nl-wrap{padding:0 12px}.nl-fields{grid-template-columns:1fr}.nl-panel{padding:15px}.nl-preview-panel{padding:10px}.nl-preview-header h3{font-size:17px}.nl-preview-section h4{font-size:10px}.nl-preview-section p{font-size:8px}}

/* Newsletter: standard ABC Playground creator layout and modal preview */
.nl-wrap{width:100%;max-width:none;margin:0;padding:20px;min-width:0}
.nl-columns{display:block}.nl-editor{width:100%;min-width:0}
.nl-heading{margin-bottom:18px}.nl-panel{padding:18px;margin-bottom:16px}
.nl-fields{gap:12px}.nl-preview-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:8px 0 20px}
.nl-preview-button{background:#008db3;color:#fff;border:2px solid #20556d;border-radius:7px;padding:13px 24px;font-size:16px;font-weight:700;cursor:pointer}
.nl-preview-button:hover{background:#007396}.nl-preview-actions span{font-size:13px;color:#586b78}
.nl-modal{display:none;position:fixed;inset:0;z-index:10000;align-items:center;justify-content:center;padding:20px}
.nl-modal.is-open{display:flex}.nl-modal-backdrop{position:absolute;inset:0;background:rgba(18,32,46,.78)}
.nl-modal-dialog{position:relative;display:flex;flex-direction:column;width:min(920px,100%);max-height:calc(100dvh - 40px);background:#f4f7f9;border-radius:12px;box-shadow:0 18px 65px rgba(0,0,0,.3);overflow:hidden}
.nl-modal-toolbar{display:flex;align-items:center;gap:16px;padding:13px 18px;background:white;border-bottom:1px solid #d6e0e7}
.nl-modal-toolbar h2{margin:0;font-size:19px;color:#173c54;flex:1}.nl-modal-toolbar span{font-size:12px;color:#667889}
.nl-modal-close{border:0;background:transparent;color:#30485a;font-size:32px;line-height:1;cursor:pointer;padding:0 5px}
.nl-modal-scroll{overflow-y:auto;padding:22px}.nl-modal .nl-paper{display:grid;gap:22px;justify-items:center}
.nl-modal .nl-preview-page{width:min(100%,650px);max-width:650px;min-height:0}
.nl-modal .nl-preview-header h3{font-size:24px}.nl-modal .nl-preview-header>div{font-size:10px}
.nl-modal .nl-preview-section h4{font-size:13px}.nl-modal .nl-preview-section p{font-size:11px}
.nl-modal-open{overflow:hidden}
@media(max-width:650px){.nl-wrap{padding:14px}.nl-modal{padding:8px}.nl-modal-dialog{max-height:calc(100dvh - 16px)}.nl-modal-scroll{padding:10px}.nl-modal .nl-preview-header h3{font-size:17px}.nl-modal .nl-preview-section h4{font-size:10px}.nl-modal .nl-preview-section p{font-size:8px}}

/* Append AFTER the previous newsletter CSS in /css/style-creators.css.
   These rules override the original common preview styling with seven designs. */
.nl-modal .nl-preview-page{width:min(100%,650px);max-width:650px;position:relative;box-sizing:border-box;background:#fff;aspect-ratio:8.5/11;display:flex;flex-direction:column;overflow:hidden;color:#263746;font-family:Arial,sans-serif}
.nl-modal .nl-preview-header{padding:5% 6% 3%;flex-shrink:0}
.nl-modal .nl-preview-header h3{font-size:clamp(16px,3.3vw,28px);line-height:1.12;margin:5px 0 9px;overflow-wrap:anywhere}
.nl-modal .nl-preview-meta{font-size:clamp(7px,1.2vw,10px);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.nl-modal .nl-preview-content{flex:1;min-height:0;overflow:hidden;box-sizing:border-box;padding:4% 5%;gap:3%;align-content:start}
.nl-modal .nl-preview-section{min-width:0;overflow:hidden;box-sizing:border-box}
.nl-modal .nl-preview-section h4{font-size:clamp(9px,1.7vw,13px);line-height:1.25;margin:0 0 7px;padding:0}
.nl-modal .nl-preview-section p{font-size:clamp(7px,1.45vw,10.5px);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.nl-modal .nl-preview-footer{flex-shrink:0;font-size:9px;margin:0 5% 3%;padding-top:7px}
.nl-modal .nl-preview-photo{display:block;max-width:90%;height:14%;object-fit:contain;margin:3% auto 0}
/* Colorful: multicolor top stripe, rounded cards, playful two-column grid */
.nl-theme-colorful .nl-preview-header{background:#edf9fc;color:#125875;text-align:center;padding-top:0}
.nl-theme-colorful .nl-preview-header h3{color:#008cb5;font-weight:900}
.nl-theme-colorful .nl-rainbow{height:10px;margin:0 -7% 4%;background:linear-gradient(90deg,#1a9bc2 0 20%,#ed845d 20% 40%,#83b36c 40% 60%,#a37fc6 60% 80%,#f3b75a 80%)}
.nl-theme-colorful .nl-colorful-kicker{color:#e37c4e;font-weight:800;font-size:10px;letter-spacing:1.5px}
.nl-theme-colorful .nl-preview-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:3%}
.nl-theme-colorful .nl-preview-section{border:1px solid #e0e8eb;border-radius:10px;background:#fbfcfe}
.nl-theme-colorful .nl-preview-section h4{background:#1496bd;color:white;padding:8px 10px;margin:0 0 7px}
.nl-theme-colorful .nl-preview-section:nth-child(5n+2) h4{background:#ed845d}
.nl-theme-colorful .nl-preview-section:nth-child(5n+3) h4{background:#83a96b}
.nl-theme-colorful .nl-preview-section:nth-child(5n+4) h4{background:#9977bd}
.nl-theme-colorful .nl-preview-section:nth-child(5n+5) h4{background:#e2a638}
.nl-theme-colorful .nl-preview-section p{padding:0 10px 10px}
/* Clean: editorial masthead, fine rules, open white-space, two columns */
.nl-theme-clean .nl-preview-header{background:#fff;color:#20354a;padding-top:6%}
.nl-theme-clean .nl-clean-kicker{font-size:10px;letter-spacing:3px;font-weight:800;color:#4d8292}
.nl-theme-clean .nl-preview-header h3{font-size:clamp(18px,3.6vw,30px);font-weight:700;color:#20354a;margin:10px 0 12px}
.nl-theme-clean .nl-preview-meta{border-top:2px solid #20354a;padding-top:10px;color:#47596b}
.nl-theme-clean .nl-preview-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:4% 6%;padding-top:3%}
.nl-theme-clean .nl-preview-section{border-bottom:1px solid #d6e0e6;padding:0 0 10px}
.nl-theme-clean .nl-preview-section h4{background:transparent;color:#20354a;font-weight:800;letter-spacing:.7px;text-transform:uppercase;border-bottom:1px solid #d6e0e6;padding:0 0 8px}
.nl-theme-clean .nl-preview-section p{color:#344a59}
/* Schoolhouse: chalkboard masthead, notebook ruling, red margin line */
.nl-theme-schoolhouse{background:repeating-linear-gradient(to bottom,#fffdf6 0,#fffdf6 26px,#d8e5ee 27px,#fffdf6 28px)!important}
.nl-theme-schoolhouse:before{content:'';position:absolute;top:19%;bottom:5%;left:10%;width:1px;background:#e6a6a6;pointer-events:none}
.nl-theme-schoolhouse .nl-preview-header{background:#255a47;border:8px solid #b28d62;box-shadow:inset 0 0 0 2px #86a897;color:white;text-align:center;padding:4%}
.nl-theme-schoolhouse .nl-chalk-kicker{font-size:10px;letter-spacing:2px;color:#e7e5c7;font-weight:700}
.nl-theme-schoolhouse .nl-preview-header h3{color:#fff;font-weight:700;letter-spacing:.5px}
.nl-theme-schoolhouse .nl-preview-content{display:flex;flex-direction:column;gap:2.5%;padding-left:13%;padding-right:6%}
.nl-theme-schoolhouse .nl-preview-section{background:rgba(255,253,246,.78);border-left:3px solid #c65346;padding:5px 9px;flex:1}
.nl-theme-schoolhouse .nl-preview-section h4{background:transparent;color:#255a47;font-size:clamp(10px,1.8vw,14px);font-weight:800;padding:0}
.nl-theme-schoolhouse .nl-preview-section p{line-height:1.65}
/* Seasonal: a single-column collection of decorative blocks; each season distinct */
.nl-theme-seasonal{--season-main:#a45227;--season-soft:#fff1db;--season-extra:#d68d4c}
.nl-season-winter{--season-main:#286399;--season-soft:#e6f3fc;--season-extra:#83b7d9}
.nl-season-spring{--season-main:#32895c;--season-soft:#eff9e9;--season-extra:#f1b2c7}
.nl-season-summer{--season-main:#d7801f;--season-soft:#fff7d9;--season-extra:#43a9c4}
.nl-theme-seasonal .nl-preview-header{background:var(--season-soft);text-align:center;color:var(--season-main);border-bottom:6px dotted var(--season-extra)}
.nl-theme-seasonal .nl-preview-header h3{color:var(--season-main)}
.nl-theme-seasonal .nl-season-kicker{font-size:clamp(11px,1.8vw,15px);font-weight:800;letter-spacing:1.5px}
.nl-theme-seasonal .nl-preview-content{display:flex;flex-direction:column;gap:2.5%}
.nl-theme-seasonal .nl-preview-section{background:var(--season-soft);border-left:5px solid var(--season-main);border-radius:5px;padding:10px 13px;flex:1}
.nl-theme-seasonal .nl-preview-section h4{background:transparent;color:var(--season-main);padding:0}
@media(max-width:560px){.nl-modal .nl-preview-section p{font-size:7px}.nl-modal .nl-preview-section h4{font-size:9px}.nl-modal .nl-preview-header h3{font-size:16px}.nl-theme-colorful .nl-preview-section h4{padding:4px 5px}.nl-theme-colorful .nl-preview-section p{padding:0 5px 5px}}

/* Newsletter preview modal: generate action */
.nl-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 20px;
  background: #f6f9fc;
  border-bottom: 1px solid #dce5eb;
}
.nl-modal-actions .nl-modal-generate {
  width: auto;
  min-height: 42px;
  padding: 10px 20px;
  cursor: pointer;
}
@media (max-width: 600px) {
  .nl-modal-actions .nl-modal-generate { width: 100%; }
}