<div
            class="modal-preview"
            style="
                position: relative;
                min-height: 400px;
                background: var(--color_fill_secondary);
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
            "
        >
            <!-- Modal Backdrop -->
            <div
                class="ss-c-modal--backdrop"
                style="
                    position: absolute;
                    inset: 0;
                    background: rgba(0, 0, 0, 0.5);
                    border-radius: 12px;
                "
            ></div>
            <!-- Modal Content -->
            <div
                class="ss-c-modal"
                style="
                    position: relative;
                    width: 90%;
                    max-width: 480px;
                    background: white;
                    border-radius: 12px;
                    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
                "
            >
                <div
                    class="ss-c-modal--header"
                    style="
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 20px 24px;
                        border-bottom: 1px solid var(--color_line_secondary);
                    "
                >
                    <h3 style="margin: 0; font-size: 18px">Modal Title</h3>
                    <button
                        class="ss-c-modal--close"
                        style="
                            width: 32px;
                            height: 32px;
                            border: none;
                            background: var(--color_fill_secondary);
                            border-radius: 6px;
                            cursor: pointer;
                            font-size: 16px;
                        "
                    >
                        ✕
                    </button>
                </div>
                <div class="ss-c-modal--body" style="padding: 24px">
                    <p style="margin: 0; line-height: 1.6">
                        This is the modal body content. You can add any content
                        here including forms, images, or other components.
                    </p>
                </div>
                <div
                    class="ss-c-modal--footer"
                    style="
                        display: flex;
                        justify-content: flex-end;
                        gap: 12px;
                        padding: 16px 24px;
                        border-top: 1px solid var(--color_line_secondary);
                        background: var(--color_fill_secondary);
                        border-radius: 0 0 12px 12px;
                    "
                >
                    <button
                        style="
                            padding: 10px 20px;
                            border: 1px solid var(--color_line_secondary);
                            background: white;
                            border-radius: 6px;
                            cursor: pointer;
                        "
                    >
                        Cancel
                    </button>
                    <button
                        style="
                            padding: 10px 20px;
                            border: none;
                            background: var(--color_fill_primary);
                            color: white;
                            border-radius: 6px;
                            cursor: pointer;
                        "
                    >
                        Confirm
                    </button>
                </div>
            </div>
        </div>

<div style="display: flex; flex-direction: column; gap: 20px">
            <!-- Small Modal -->
            <div
                class="ss-c-modal ss-c-modal--small"
                style="
                    max-width: 320px;
                    background: white;
                    border-radius: 12px;
                    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
                "
            >
                <div style="padding: 20px; text-align: center">
                    <div style="font-size: 48px; margin-bottom: 12px">✓</div>
                    <h4 style="margin: 0 0 8px">Success!</h4>
                    <p style="margin: 0 0 16px; font-size: 14px; opacity: 0.7">
                        Your changes have been saved.
                    </p>
                    <button
                        style="
                            padding: 10px 24px;
                            border: none;
                            background: var(--color_state_success);
                            color: white;
                            border-radius: 6px;
                            cursor: pointer;
                        "
                    >
                        OK
                    </button>
                </div>
            </div>
            <!-- Large Modal -->
            <div
                class="ss-c-modal ss-c-modal--large"
                style="
                    max-width: 700px;
                    background: white;
                    border-radius: 12px;
                    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
                "
            >
                <div
                    class="ss-c-modal--header"
                    style="
                        padding: 20px 24px;
                        border-bottom: 1px solid var(--color_line_secondary);
                    "
                >
                    <h3 style="margin: 0">Large Modal</h3>
                </div>
                <div class="ss-c-modal--body" style="padding: 24px">
                    <p>
                        This is a larger modal suitable for complex content
                        like forms, tables, or detailed information.
                    </p>
                    <div
                        style="
                            display: grid;
                            grid-template-columns: repeat(2, 1fr);
                            gap: 16px;
                            margin-top: 16px;
                        "
                    >
                        <div
                            style="
                                padding: 16px;
                                background: var(--color_fill_secondary);
                                border-radius: 8px;
                            "
                        >
                            Column 1 content
                        </div>
                        <div
                            style="
                                padding: 16px;
                                background: var(--color_fill_secondary);
                                border-radius: 8px;
                            "
                        >
                            Column 2 content
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div
            class="modal-preview"
            style="
                position: relative;
                min-height: 350px;
                background: #1a1a2e;
                border-radius: 12px;
                overflow: hidden;
            "
        >
            <div
                class="ss-c-modal ss-c-modal--fullscreen"
                style="
                    position: absolute;
                    inset: 0;
                    background: white;
                    display: flex;
                    flex-direction: column;
                "
            >
                <div
                    class="ss-c-modal--header"
                    style="
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 16px 24px;
                        border-bottom: 1px solid var(--color_line_secondary);
                    "
                >
                    <h3 style="margin: 0; font-size: 16px">
                        Fullscreen Modal
                    </h3>
                    <button
                        style="
                            padding: 8px 16px;
                            border: none;
                            background: var(--color_fill_secondary);
                            border-radius: 6px;
                            cursor: pointer;
                        "
                    >
                        Close ✕
                    </button>
                </div>
                <div
                    class="ss-c-modal--body"
                    style="flex: 1; padding: 24px; overflow-y: auto"
                >
                    <p>
                        This modal takes up the full viewport. Perfect for
                        immersive experiences, image galleries, or complex
                        workflows.
                    </p>
                    <div
                        style="
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            gap: 12px;
                            margin-top: 16px;
                        "
                    >
                        <div
                            style="
                                aspect-ratio: 1;
                                background: linear-gradient(
                                    135deg,
                                    #667eea,
                                    #764ba2
                                );
                                border-radius: 8px;
                            "
                        ></div>
                        <div
                            style="
                                aspect-ratio: 1;
                                background: linear-gradient(
                                    135deg,
                                    #f093fb,
                                    #f5576c
                                );
                                border-radius: 8px;
                            "
                        ></div>
                        <div
                            style="
                                aspect-ratio: 1;
                                background: linear-gradient(
                                    135deg,
                                    #4facfe,
                                    #00f2fe
                                );
                                border-radius: 8px;
                            "
                        ></div>
                    </div>
                </div>
            </div>
        </div>

<div
            class="ss-c-modal"
            style="
                max-width: 450px;
                background: white;
                border-radius: 12px;
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
            "
        >
            <div class="ss-c-modal--header" style="padding: 24px 24px 0">
                <h3 style="margin: 0 0 8px">Create Account</h3>
                <p style="margin: 0; font-size: 14px; opacity: 0.7">
                    Fill in your details to get started
                </p>
            </div>
            <form class="ss-c-modal--body" style="padding: 24px">
                <div style="margin-bottom: 16px">
                    <label
                        style="
                            display: block;
                            margin-bottom: 6px;
                            font-size: 14px;
                            font-weight: 500;
                        "
                    >
                        Full Name
                    </label>
                    <input
                        type="text"
                        placeholder="John Doe"
                        style="
                            width: 100%;
                            padding: 12px;
                            border: 1px solid var(--color_line_secondary);
                            border-radius: 8px;
                            font-size: 14px;
                            box-sizing: border-box;
                        "
                    />
                </div>
                <div style="margin-bottom: 16px">
                    <label
                        style="
                            display: block;
                            margin-bottom: 6px;
                            font-size: 14px;
                            font-weight: 500;
                        "
                    >
                        Email
                    </label>
                    <input
                        type="email"
                        placeholder="john@example.com"
                        style="
                            width: 100%;
                            padding: 12px;
                            border: 1px solid var(--color_line_secondary);
                            border-radius: 8px;
                            font-size: 14px;
                            box-sizing: border-box;
                        "
                    />
                </div>
                <div style="margin-bottom: 20px">
                    <label
                        style="
                            display: block;
                            margin-bottom: 6px;
                            font-size: 14px;
                            font-weight: 500;
                        "
                    >
                        Password
                    </label>
                    <input
                        type="password"
                        placeholder="••••••••"
                        style="
                            width: 100%;
                            padding: 12px;
                            border: 1px solid var(--color_line_secondary);
                            border-radius: 8px;
                            font-size: 14px;
                            box-sizing: border-box;
                        "
                    />
                </div>
                <button
                    type="submit"
                    style="
                        width: 100%;
                        padding: 14px;
                        border: none;
                        background: var(--color_fill_primary);
                        color: white;
                        border-radius: 8px;
                        cursor: pointer;
                        font-size: 15px;
                        font-weight: 500;
                    "
                >
                    Create Account
                </button>
            </form>
            <div
                class="ss-c-modal--footer"
                style="
                    padding: 16px 24px;
                    text-align: center;
                    border-top: 1px solid var(--color_line_secondary);
                "
            >
                <p style="margin: 0; font-size: 14px; opacity: 0.7">
                    Already have an account?
                    <a href="#" style="color: var(--color_fill_primary)">
                        Sign in
                    </a>
                </p>
            </div>
        </div>