* {
            box-sizing: border-box;
        }

        body {

            margin: 0;

            min-height: 100vh;

            padding: 40px 20px;

            display: flex;

            align-items: center;

            justify-content: center;

            background:
                linear-gradient(
                    135deg,
                    #f8f7f4,
                    #ece7df
                );

            font-family: 'Inter', sans-serif;

            color: #1d1d1d;
        }

        .wrapper {

            width: 100%;

            max-width: 950px;
        }

        .container {

            background: rgba(255,255,255,0.92);

            backdrop-filter: blur(12px);

            border: 1px solid rgba(255,255,255,0.5);

            border-radius: 28px;

            overflow: hidden;

            box-shadow:
                0 20px 60px rgba(0,0,0,0.08);
        }

        .header {

            padding: 42px 42px 28px;

            border-bottom: 1px solid #ececec;
        }

        .badge {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding: 8px 14px;

            border-radius: 999px;

            background: #f5f5f5;

            font-size: 13px;

            font-weight: 600;

            color: #555;

            margin-bottom: 20px;
        }

        h1 {

            margin: 0 0 12px;

            font-size: 38px;

            line-height: 1.1;

            letter-spacing: -1px;
        }

        .subtitle {

            margin: 0;

            color: #666;

            font-size: 16px;

            line-height: 1.7;
        }

        .terms-wrapper {

            padding: 32px 42px;
        }

        .terms-box {

            height: 420px;

            overflow-y: auto;

            padding: 30px;

            border-radius: 22px;

            border: 1px solid #e7e7e7;

            background:
                linear-gradient(
                    to bottom,
                    #ffffff,
                    #fafafa
                );

            box-shadow:
                inset 0 1px 2px rgba(0,0,0,0.03);
        }

        .terms-box::-webkit-scrollbar {
            width: 10px;
        }

        .terms-box::-webkit-scrollbar-thumb {

            background: #cfcfcf;

            border-radius: 999px;
        }

        .terms-box h2 {

            margin-top: 0;

            font-size: 24px;
        }

        .terms-box h3 {

            margin-top: 30px;

            margin-bottom: 10px;

            font-size: 18px;
        }

        .terms-box p,
        .terms-box li {

            color: #555;

            line-height: 1.8;

            font-size: 15px;
        }

        .terms-box ul {

            padding-left: 22px;
        }

        .options {

            margin-top: 28px;

            display: flex;

            flex-direction: column;

            gap: 18px;
        }

        .checkbox-card {

            display: flex;

            align-items: flex-start;

            gap: 14px;

            padding: 18px 20px;

            border-radius: 18px;

            border: 1px solid #e8e8e8;

            background: #fafafa;

            transition: 0.2s ease;
        }

        .checkbox-card:hover {

            background: #f4f4f4;
        }

        .checkbox-card input {

            width: 20px;

            height: 20px;

            margin-top: 2px;

            accent-color: #111;
        }

        .checkbox-title {

            font-weight: 600;

            margin-bottom: 6px;
        }

        .checkbox-desc {

            color: #666;

            font-size: 14px;

            line-height: 1.6;
        }

        .actions {

            margin-top: 34px;

            display: flex;

            gap: 14px;

            flex-wrap: wrap;
        }

        button {

            border: none;

            cursor: pointer;

            padding: 15px 26px;

            border-radius: 14px;

            font-size: 15px;

            font-weight: 600;

            transition: 0.2s ease;
        }

        .accept-btn {

            background: #111;

            color: white;

            box-shadow:
                0 10px 25px rgba(0,0,0,0.12);
        }

        .accept-btn:hover {

            transform: translateY(-2px);

            opacity: 0.96;
        }

        .reject-btn {

            background: white;

            color: #222;

            border: 1px solid #dcdcdc;
        }

        .reject-btn:hover {

            background: #f5f5f5;
        }

        .footer-note {

            margin-top: 22px;

            color: #888;

            font-size: 13px;

            line-height: 1.7;
        }

        @media (max-width: 768px) {

            body {
                padding: 20px;
            }

            .header,
            .terms-wrapper {
                padding: 26px;
            }

            h1 {
                font-size: 30px;
            }

            .terms-box {
                height: 360px;
                padding: 22px;
            }

            .actions {
                flex-direction: column;
            }

            button {
                width: 100%;
            }
        }