* {
            box-sizing: border-box;
        }

        :root {
            --ink: #263238;
            --muted: #758195;
            --cream: #fff8ee;
            --mint: #e8f8f3;
            --aqua: #55b8ad;
            --aqua-dark: #20766f;
            --peach: #ffb38a;
            --peach-dark: #f26d4f;
            --yellow: #ffe7a3;
            --line: #eadfd4;
            --white: #ffffff;
        }

        body {
            margin: 0;
            min-height: 100vh;
            background:
                linear-gradient(135deg, rgba(255, 231, 163, 0.42) 0 18%, transparent 18% 100%),
                linear-gradient(45deg, transparent 0 72%, rgba(85, 184, 173, 0.16) 72% 100%),
                linear-gradient(180deg, #fff8ee 0%, #edf9f6 50%, #fff4ec 100%);
            color: var(--ink);
            font-family: Arial, Helvetica, sans-serif;
            padding: 22px 0;
        }

        .donation-page {
            width: min(1120px, calc(100% - 28px));
            margin: 0 auto;
            border: 1px solid rgba(255, 255, 255, 0.92);
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.72);
            box-shadow: 0 22px 60px rgba(124, 97, 74, 0.16);
            overflow: hidden;
        }

        .donation-title {
            margin: 0;
            padding: 24px 18px 20px;
            color: var(--ink);
            background:
                linear-gradient(90deg, rgba(255, 179, 138, 0.28), transparent 30%),
                linear-gradient(180deg, #ffffff 0%, #fff3e7 100%);
            border-bottom: 1px solid var(--line);
            text-align: center;
            font-size: clamp(24px, 4vw, 38px);
            line-height: 1.1;
            letter-spacing: 1.8px;
            text-transform: uppercase;
        }

        .form-shell {
            padding: 24px;
        }

        .donation-panel {
            padding: 24px;
            border: 1px solid var(--line);
            border-radius: 26px;
            background:
                linear-gradient(135deg, rgba(232, 248, 243, 0.8), transparent 45%),
                linear-gradient(180deg, #ffffff 0%, #fff9f1 100%);
            box-shadow: 0 16px 36px rgba(136, 104, 77, 0.09);
        }

        .panel-kicker {
            display: inline-flex;
            margin: 0 0 12px;
            padding: 7px 13px;
            border-radius: 999px;
            background: var(--mint);
            color: var(--aqua-dark);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 1.4px;
            text-transform: uppercase;
        }

        .panel-heading {
            margin: 0 0 8px;
            color: var(--ink);
            font-size: clamp(24px, 3vw, 34px);
            line-height: 1.14;
        }

        .panel-copy {
            margin: 0 0 22px;
            color: var(--muted);
            font-size: 15px;
            line-height: 1.55;
        }

        .amount-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 13px;
            margin-bottom: 18px;
        }

        .amount-btn,
        .custom-amount {
            min-height: 54px;
            border: 1px solid var(--line);
            border-radius: 18px;
            font-size: 15px;
            transition: 0.2s ease;
        }

        .amount-btn {
            background: #ffffff;
            color: var(--ink);
            cursor: pointer;
            font-weight: 900;
            box-shadow: 0 10px 18px rgba(116, 93, 74, 0.07);
        }

        .amount-btn:hover,
        .amount-btn.active {
            border-color: transparent;
            background: linear-gradient(135deg, var(--peach), var(--peach-dark));
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 14px 24px rgba(242, 109, 79, 0.22);
        }

        .custom-amount {
            width: 100%;
            padding: 0 16px;
            background: #fffdf9;
            color: var(--ink);
            font-weight: 800;
            outline: none;
        }

        .custom-amount:focus {
            border-color: var(--aqua);
            box-shadow: 0 0 0 4px rgba(85, 184, 173, 0.18);
        }

        .recurring-panel {
            display: flex;
            gap: 18px;
            align-items: center;
            justify-content: space-between;
            padding: 18px;
            margin-bottom: 18px;
            border: 1px solid rgba(85, 184, 173, 0.24);
            border-radius: 22px;
            background: linear-gradient(135deg, #e8f8f3, #fffaf2);
        }

        .recurring-panel p {
            max-width: 330px;
            margin: 0;
            color: var(--aqua-dark);
            font-size: 15px;
            font-weight: 900;
            line-height: 1.4;
        }

        .recurring-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
            justify-content: flex-end;
        }

        .pill-group {
            display: flex;
            gap: 6px;
            padding: 6px;
            border: 1px solid rgba(85, 184, 173, 0.28);
            border-radius: 999px;
            background: #ffffff;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .pill {
            min-width: 104px;
            min-height: 36px;
            padding: 7px 12px;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: var(--muted);
            cursor: pointer;
            font-weight: 900;
        }

        .pill.active {
            background: var(--aqua);
            color: #ffffff;
            box-shadow: 0 8px 16px rgba(85, 184, 173, 0.24);
        }

        .frequency {
            min-width: 142px;
            height: 48px;
            padding: 0 15px;
            border: 1px solid rgba(85, 184, 173, 0.28);
            border-radius: 999px;
            background: #ffffff;
            color: var(--ink);
            outline: none;
            font-size: 14px;
            font-weight: 900;
        }

        .amount-summary {
            display: grid;
            grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1.2fr) minmax(180px, 0.7fr);
            gap: 14px;
            align-items: stretch;
        }

        .money-row {
            display: grid;
            grid-template-columns: 52px 1fr;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 22px;
            background: #ffffff;
        }

        .currency-box,
        .amount-display {
            min-height: 68px;
            display: flex;
            align-items: center;
            border: 0;
            font-size: 22px;
        }

        .currency-box {
            justify-content: center;
            background: var(--yellow);
            color: #7a4b00;
            font-weight: 900;
        }

        .amount-display {
            padding: 0 18px;
            color: var(--ink);
            font-size: clamp(24px, 3vw, 32px);
            font-weight: 900;
        }

        .hint {
            display: none;
        }

        .summary-row,
        .bottom-bar {
            border: 1px solid var(--line);
            border-radius: 22px;
            background: #ffffff;
            box-shadow: 0 10px 22px rgba(116, 93, 74, 0.06);
        }

        .summary-row {
            display: flex;
            flex-wrap: wrap;
            overflow: hidden;
        }

        .total-label,
        .total-amount,
        .summary-frequency {
            min-height: 68px;
            display: inline-flex;
            align-items: center;
            padding: 10px 14px;
            font-size: 15px;
            font-weight: 900;
        }

        .total-label {
            background: var(--mint);
            color: var(--aqua-dark);
        }

        .total-amount {
            color: var(--peach-dark);
        }

        .summary-frequency {
            background: #fff6d8;
            color: #9a6500;
        }

        .bottom-bar {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 68px;
            color: var(--ink);
            font-size: 18px;
            font-weight: 900;
        }

        .tax-note {
            margin-top: 6px;
            padding: 4px 11px;
            border-radius: 999px;
            background: var(--mint);
            color: var(--aqua-dark);
            font-size: 10px;
            font-family: "Courier New", monospace;
            font-weight: 900;
        }

        .details-panel {
            margin-top: 20px;
            padding: 24px;
            border: 1px solid var(--line);
            border-radius: 26px;
            background: #ffffff;
            box-shadow: 0 16px 36px rgba(116, 93, 74, 0.08);
        }

        .section-heading {
            margin: 0 0 20px;
            color: var(--ink);
            font-size: 24px;
            font-weight: 900;
        }

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

        .field {
            margin: 0;
        }

        .field.address-field {
            grid-column: 1 / -1;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: #4f5d6d;
            font-size: 13px;
            font-weight: 900;
        }

        .required {
            color: var(--peach-dark);
        }

        input,
        textarea {
            width: 100%;
            min-height: 52px;
            padding: 13px 15px;
            border: 1px solid var(--line);
            border-radius: 16px;
            background: #fffdf9;
            color: var(--ink);
            font: inherit;
            font-weight: 700;
            outline: none;
            transition: 0.18s ease;
        }

        textarea {
            resize: vertical;
            min-height: 70px;
        }

        input:focus,
        textarea:focus {
            border-color: var(--aqua);
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(85, 184, 173, 0.15);
        }

        .donate-now {
            width: min(260px, 100%);
            min-height: 58px;
            margin-top: 20px;
            border: 0;
            border-radius: 18px;
            background: linear-gradient(135deg, var(--aqua), var(--peach));
            color: #ffffff;
            cursor: pointer;
            font-size: 17px;
            font-weight: 900;
            box-shadow: 0 16px 28px rgba(85, 184, 173, 0.24);
            transition: 0.2s ease;
        }

        .donate-now:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 34px rgba(242, 109, 79, 0.22);
        }

        @media (max-width: 900px) {
            .amount-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .custom-amount {
                grid-column: 1 / -1;
            }

            .recurring-panel,
            .recurring-controls {
                align-items: stretch;
                flex-direction: column;
            }

            .amount-summary {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 620px) {
            body {
                padding: 10px 0;
            }

            .donation-page {
                width: min(100% - 18px, 1120px);
                border-radius: 22px;
            }

            .form-shell,
            .donation-panel,
            .details-panel {
                padding: 16px;
            }

            .amount-grid,
            .details-grid {
                grid-template-columns: 1fr;
            }

            .pill-group {
                flex-direction: column;
                border-radius: 20px;
            }

            .pill {
                width: 100%;
            }

            .frequency,
            .donate-now {
                width: 100%;
            }

            .total-label,
            .total-amount,
            .summary-frequency {
                flex: 1 1 100%;
                justify-content: center;
                min-height: 48px;
            }
        }