body {
        background-color: var(--bg-base);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        margin: 0;
        padding: 40px 20px;
        color: var(--text-main);
    }

    /* --- THE PAPER CONTAINER --- */
    .paper-container { 
        max-width: 850px; 
        margin: 0 auto 60px auto; 
        background: var(--bg-card); 
        padding: 50px 60px; 
        border-radius: 12px; 
        box-shadow: 0 10px 40px rgba(0,0,0,0.15); 
        border: 1px solid rgba(128,128,128,0.3); 
    }
    .paper-container * { box-sizing: border-box; }
    
    .brand-logo { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid var(--brand-primary); }
    .brand-logo img { max-height: 90px; max-width: 100%; object-fit: contain; }

    /* Typography */
    h1, h2, h3, h4, h5, p, label, div { line-height: 1.4; color: var(--text-main); }
    .form-title { color: var(--brand-primary); font-weight: 800; font-size: 1.8rem; text-align: center; text-transform: uppercase; margin: 0 0 25px 0; }
    .canvas-header { font-weight: 800; font-size: 1.3rem; margin-bottom: 10px; margin-top: 20px; border-bottom: 2px solid var(--text-main); padding-bottom: 5px; }
    .canvas-paragraph { color: #666; font-size: 0.95rem; line-height: 1.5; margin-bottom:10px; }
    .canvas-divider { border-top: 2px solid rgba(128,128,128,0.2); margin: 20px 0; }
    .form-label { font-size: 0.85rem; margin-bottom: 6px; display: block; font-weight: 700; text-transform: uppercase; color: #666; letter-spacing: 0.05em;}
    
    /* Inputs */
    input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], select, textarea {
        border: 1px solid var(--brand-primary) !important; 
        border-radius: 8px !important; 
        background: transparent !important; 
        color: var(--text-main) !important; 
        padding: 12px 14px !important; 
        font-size: 15px !important; 
        width: 100% !important; 
        outline: none !important;
        transition: 0.2s;
        font-family: inherit;
        box-shadow: none !important;
    }
    input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(128,128,128,0.15) !important; background: rgba(128,128,128,0.02) !important; }
    
    /* Checkboxes */
    .cb-container { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 10px; }
    .form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
    .form-check-label { font-size: 0.9rem !important; margin: 0 !important; font-weight: 600 !important; cursor: pointer; color:var(--text-main) !important; text-transform: none !important;}
    .form-check-input { width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: var(--brand-primary); cursor: pointer; flex-shrink:0; }

    .checkbox-container { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 25px; padding: 20px; background: rgba(128,128,128,0.03); border: 1px solid rgba(128,128,128,0.2); border-radius: 8px; }
    .checkbox-container input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--brand-primary); cursor: pointer; flex-shrink: 0; }
    .checkbox-container label { font-size: 14px; font-weight: 600; cursor: pointer; margin: 0; line-height: 1.5; color: var(--text-main); text-transform:none;}

    /* System Blocks */
    .legal-box { border: 1px solid rgba(128,128,128,0.2); padding: 20px; font-size: 13px; background: rgba(128,128,128,0.02); border-radius: 8px; text-align: justify; color: var(--text-main); }
    .canvas-sig-title { font-size: 16px !important; font-weight: 800 !important; margin: 0 0 5px 0 !important; color: var(--text-main) !important;}
    .canvas-sig-sub { font-size: 13px !important; color: #666 !important; margin: 0 0 10px 0 !important; }
    #signature-pad, .sig-canvas { border: 2px dashed var(--brand-primary) !important; border-radius: 8px !important; width: 100%; height: 180px; cursor: crosshair; background: rgba(128,128,128,0.02) !important; display:block;}
    
    /* Buttons */
    .btn-submit { background: var(--brand-primary); color: white; border: none; padding: 16px; font-size: 18px; font-weight: 800; border-radius: 8px; width: 100%; margin-top: 10px; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 15px rgba(0,0,0,0.1); display:inline-flex; align-items:center; justify-content:center; gap:8px;}
    .btn-submit:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
    .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
    .btn-clear { background: var(--bg-card); border: 1px solid rgba(128,128,128,0.3); padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--text-main); cursor: pointer; transition: 0.2s; display:inline-flex; align-items:center; gap:6px;}
    .btn-clear:hover { background: rgba(128,128,128,0.05); }

    /* Flexbox Grid */
    .row-grid { display: flex; flex-wrap: wrap; margin-right: -10px; margin-left: -10px; width: calc(100% + 20px); }
    .form-block { padding: 10px; position: relative; width: 100%; box-sizing:border-box;}
    .flex-100 { width: 100%; } .flex-50  { width: 50%; } .flex-33  { width: 33.3333%; } .flex-25  { width: 25%; }

    /* Mobile Responsiveness */
    @media (max-width: 600px) {
        .flex-50, .flex-33, .flex-25 { width: 100% !important; }
        .paper-container { padding: 30px 20px; }
    }

    /* Success Overlay */
    #successOverlay { display: none; text-align: center; padding: 60px 20px; }
    #successOverlay i { font-size: 80px; color: #28a745; margin-bottom: 20px; }
    #successOverlay h2 { font-weight: 800; font-size: 30px; margin-bottom: 10px; }
    #successOverlay p { font-size: 16px; color: #666; }
    
    /* Utility Hides */
    .edit-tools, .add-cb-wrapper, .cb-del-icon { display: none !important; }

        /* ---- UI 2: calm paper, big fields, school color through the shared
           mt-ui tokens (css/mt-ui.css + css/mt-public.css). ---- */
        body.mt-pub { padding: clamp(16px, 5vh, 48px) 16px 48px; }
        body.mt-pub .paper-container { max-width: 820px; border-radius: 24px; padding: clamp(24px, 5vw, 52px); box-shadow: 0 10px 40px rgba(0,0,0,0.12); border: 1px solid rgba(128,128,128,0.22); }
        body.mt-pub .brand-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid rgba(128,128,128,0.25); }
        body.mt-pub .form-title { font-family: var(--mt-display); text-transform: none; letter-spacing: -0.02em; font-size: clamp(24px, 4.5vw, 32px); margin: 0 0 22px 0; }
        body.mt-pub .form-label { font-size: 15px !important; text-transform: none !important; letter-spacing: 0 !important; margin-bottom: 8px !important; }
        body.mt-pub .paper-container input[type="text"], body.mt-pub .paper-container input[type="number"], body.mt-pub .paper-container input[type="email"],
        body.mt-pub .paper-container input[type="tel"], body.mt-pub .paper-container input[type="date"], body.mt-pub .paper-container input[type="time"],
        body.mt-pub .paper-container select, body.mt-pub .paper-container textarea {
            min-height: 50px; padding: 13px 16px !important; font-size: 16px !important; border: 1.5px solid rgba(128,128,128,0.45) !important; border-radius: 14px !important;
        }
        body.mt-pub .paper-container textarea { min-height: 110px; }
        body.mt-pub .paper-container input:focus, body.mt-pub .paper-container textarea:focus, body.mt-pub .paper-container select:focus {
            border-color: var(--brand-primary) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 18%, transparent) !important;
        }
        body.mt-pub .form-check { min-height: 40px; }
        body.mt-pub .form-check-input { width: 22px !important; height: 22px !important; }
        body.mt-pub .form-check-label { font-size: 15px !important; }
        body.mt-pub .checkbox-container, body.mt-pub .legal-box { border-radius: 14px; }
        body.mt-pub .legal-box { font-size: 14px; line-height: 1.6; text-align: left; }
        body.mt-pub #signature-pad, body.mt-pub .sig-canvas { border-radius: 14px !important; height: 200px; touch-action: none; }
        body.mt-pub .btn-submit { min-height: 56px; padding: 14px 20px; border-radius: 16px; font: 800 17px var(--mt-font); box-shadow: none; }
        body.mt-pub .btn-submit:hover { transform: none; opacity: 1; filter: brightness(1.06); box-shadow: none; }
        body.mt-pub .btn-submit:focus-visible, body.mt-pub .btn-clear:focus-visible { outline: 3px solid var(--mt-info); outline-offset: 2px; }
        body.mt-pub .btn-clear { min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
        body.mt-pub #successOverlay { padding: clamp(32px, 7vw, 64px) 20px; }
        body.mt-pub #successOverlay .mt-ic i { font-size: inherit; color: inherit; margin: 0; }
        @media (max-width: 600px) {
            body.mt-pub { padding: 12px 10px 32px; }
            body.mt-pub .paper-container { padding: 24px 18px; border-radius: 20px; }
        }
        /* Secondary text was a fixed #666 - unreadable on a dark school theme. */
        body.mt-pub .paper-container .canvas-paragraph, body.mt-pub .paper-container .canvas-sig-sub, body.mt-pub #successOverlay p { color: var(--mt-muted) !important; }
        body.mt-pub .form-label { color: var(--text-main) !important; }
        /* Liability waiver "all set": two big buttons, side by side or stacked on a phone */
        body.mt-pub #successWaiver { padding: clamp(32px, 7vw, 64px) 20px; text-align: center; }
        body.mt-pub #successWaiver .mt-ic i { font-size: inherit; color: inherit; margin: 0; }
        body.mt-pub #successWaiver p { color: var(--mt-muted) !important; }
        .mt-waiver-next { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; max-width: 560px; margin: 14px auto 0; }
        .mt-waiver-next .btn-submit { flex: 1 1 220px; width: auto; margin-top: 0; text-decoration: none; }
        .mt-waiver-next .btn-submit.mt-waiver-done { background: transparent; color: var(--text-main); border: 1.5px solid rgba(128,128,128,0.45); }

        /* Membership agreement: the same parts as the online sign-up */
        .ag-lead { margin: -8px 0 18px !important; text-align: center; font-size: 16px; color: var(--mt-muted) !important; }
        .ag-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; background: rgba(128,128,128,0.08); font-size: 15px; }
        .ag-count { margin: 0 0 12px !important; font-weight: 700; font-size: 14.5px; color: var(--mt-muted) !important; }
        .ag-clause { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid rgba(128,128,128,0.3); border-radius: 18px; }
        .ag-clause + .ag-clause { margin-top: 12px; }
        .ag-clause h3 { margin: 0; font: 700 16.5px/1.3 var(--mt-font); color: var(--text-main); }
        .ag-clause p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-main); }
        .ag-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; color: var(--brand-primary); font: 700 15px var(--mt-font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
        .ag-full { padding: 14px 16px; border-radius: 14px; background: rgba(128,128,128,0.08); font-size: 14.5px; line-height: 1.6; color: var(--text-main); }
        .ag-full[hidden] { display: none; }
        /* Locked light colors on purpose, same as the online sign-up. */
        .initial-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: #eef0f3 !important; color: #1d1d1f !important; padding: 12px 14px; border-radius: 14px; forced-color-adjust: none; }
        .initial-row label { background: transparent !important; color: #1d1d1f !important; margin: 0 !important; font-weight: 600 !important; font-size: 15px !important; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; }
        .initial-row input[type=checkbox] { width: 22px; height: 22px; margin: 0; accent-color: #007aff; cursor: pointer; }
        body.mt-pub .paper-container .initial-row input[type=text] { width: 96px !important; min-height: 44px; height: 44px; padding: 0 10px !important; background: #ffffff !important; color: #1d1d1f !important; border: 1px solid #b0b0b8 !important; border-radius: 10px !important; text-align: center; text-transform: uppercase; font-weight: 700; }
        .ag-sec { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(128,128,128,0.25); }
        .ag-sec h2 { margin: 0 0 12px; font: 700 18px/1.3 var(--mt-font); color: var(--text-main); }
        .ag-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        .ag-2 .form-label { margin-bottom: 8px; }
        @media (max-width: 600px) { .ag-2 { grid-template-columns: 1fr; } }
        .ag-hint { margin: 8px 0 0 !important; font-size: 14px; color: var(--mt-muted) !important; }
        .ag-date { margin: 12px 0 0 !important; font-size: 15px; font-weight: 600; }
        /* Member portal setup (?setup=1): the strip on top */
        .mt-setup-strip { max-width: 820px; margin: 0 auto 14px; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 16px; border-radius: 16px; background: var(--bg-card); border: 1px solid rgba(128,128,128,0.22); font-size: 15px; }
        .mt-setup-strip a { color: var(--brand-primary); font-weight: 700; text-decoration: none; }
        .mt-setup-strip span { flex: 1 1 200px; min-width: 0; }
        /* The legal wording (waiver fine print, the agreement's full text): on a clean
           light "paper" panel in every school theme, light or dark. The wording is rich
           text from the form editor with its own fonts and colors (often black Times
           text), which disappeared on a dark card. Its bold, underline and lists stay;
           its own text and background colors are made readable inside the panel only. */
        body.mt-pub .paper-container .legal-box, body.mt-pub .paper-container .ag-full {
            display: block; max-width: 760px; margin-left: auto; margin-right: auto; box-sizing: border-box;
            padding: 20px 22px !important; border: 1px solid #d9d9de !important; border-radius: 14px !important;
            background: #ffffff !important; color: #1a1a1a !important; color-scheme: light; forced-color-adjust: none;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
            font-size: 16px !important; line-height: 1.6 !important; text-align: left !important; overflow-wrap: anywhere;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }
        body.mt-pub .paper-container .ag-full[hidden] { display: none !important; }
        body.mt-pub .paper-container .legal-box *, body.mt-pub .paper-container .ag-full * {
            color: #1a1a1a !important; background-color: transparent !important; background-image: none !important;
            font-family: inherit !important; line-height: inherit !important; text-shadow: none !important; border-color: #d9d9de !important;
        }
        body.mt-pub .paper-container .legal-box p, body.mt-pub .paper-container .legal-box div, body.mt-pub .paper-container .legal-box span,
        body.mt-pub .paper-container .legal-box font, body.mt-pub .paper-container .legal-box li, body.mt-pub .paper-container .legal-box td,
        body.mt-pub .paper-container .legal-box th, body.mt-pub .paper-container .legal-box em, body.mt-pub .paper-container .legal-box i,
        body.mt-pub .paper-container .legal-box b, body.mt-pub .paper-container .legal-box strong, body.mt-pub .paper-container .legal-box u,
        body.mt-pub .paper-container .legal-box small, body.mt-pub .paper-container .legal-box a, body.mt-pub .paper-container .legal-box blockquote {
            font-size: inherit !important;
        }
        body.mt-pub .paper-container .legal-box h1, body.mt-pub .paper-container .legal-box h2 { font-size: 20px !important; line-height: 1.35 !important; margin: 16px 0 8px !important; }
        body.mt-pub .paper-container .legal-box h3, body.mt-pub .paper-container .legal-box h4,
        body.mt-pub .paper-container .legal-box h5, body.mt-pub .paper-container .legal-box h6 { font-size: 17px !important; line-height: 1.4 !important; margin: 14px 0 6px !important; }
        body.mt-pub .paper-container .legal-box p { margin: 0 0 12px !important; }
        body.mt-pub .paper-container .legal-box ul, body.mt-pub .paper-container .legal-box ol { margin: 0 0 12px !important; padding-left: 24px !important; }
        body.mt-pub .paper-container .legal-box a, body.mt-pub .paper-container .ag-full a { color: #0b57d0 !important; text-decoration: underline !important; }
        body.mt-pub .paper-container .legal-box img { max-width: 100% !important; height: auto !important; }
        body.mt-pub .paper-container .legal-box table { max-width: 100% !important; border-collapse: collapse; }
        @media (max-width: 600px) {
            body.mt-pub .paper-container .legal-box, body.mt-pub .paper-container .ag-full { padding: 16px !important; font-size: 15px !important; }
        }
        /* Text blocks and the photo wording from the form editor: their own colors
           follow the school's text color (never black on a dark card). */
        body.mt-pub .paper-container .canvas-paragraph *, body.mt-pub .paper-container .canvas-header *,
        body.mt-pub .paper-container .checkbox-container label * { color: inherit !important; background-color: transparent !important; }
        body.mt-pub .paper-container .canvas-header { color: var(--text-main) !important; }
        body.mt-pub .paper-container .canvas-paragraph a { color: var(--brand-primary) !important; text-decoration: underline; }
        /* Drop-down choices: the list's own colors (a see-through box showed light text on a white list). */
        body.mt-pub .paper-container select option { background-color: var(--bg-card); color: var(--text-main); }
        .ag-err { display: none; margin-top: 16px; padding: 13px 15px; border-radius: 14px; background: var(--mt-bad-soft); color: var(--mt-bad) !important; font: 600 15px/1.45 var(--mt-font); }