body {
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

header {
    padding: 10px;
}

.gradient-bg {
    background: linear-gradient(to bottom, #374151, #ffffff);
}

.ticket-design {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%);
    border: 2px solid #dc2626;
    border-left: 3px dashed #dc2626;
    border-right: 3px dashed #dc2626;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

    .ticket-design:: before {
        content: '';
        position: absolute;
        left: -8px;
        top: 25px;
        width: 14px;
        height: 14px;
        background: #f1f5f9;
        border-radius: 50%;
        border: 2px solid #dc2626;
    }

    .ticket-design:: after {
        content: '';
        position: absolute;
        left: -8px;
        bottom: 25px;
        width: 14px;
        height: 14px;
        background: #f1f5f9;
        border-radius: 50%;
        border: 2px solid #dc2626;
    }

    .ticket-design.right - hole:: before {
        content: '';
        position: absolute;
        right: -8px;
        top: 25px;
        width: 14px;
        height: 14px;
        background: #f1f5f9;
        border-radius: 50%;
        border: 2px solid #dc2626;
    }

    .ticket-design.right - hole:: after {
        content: '';
        position: absolute;
        right: -8px;
        bottom: 25px;
        width: 14px;
        height: 14px;
        background: #f1f5f9;
        border-radius: 50%;
        border: 2px solid #dc2626;
    }

.detachable-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear - gradient( to right, #9ca3af 0px, #9ca3af 8px, transparent 8px, transparent 16px );
    top: 50%;
    transform: translateY(-50%);
}

    .detachable-line:: before {
        content: '✂️';
        position: absolute;
        left: -25px;
        top: -10px;
        font-size: 16px;
        color: #9ca3af;
    }

.ticket-header {
    background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%);
    margin: -24px -24px 20px -24px;
    padding: 16px 24px;
    border-radius: 12px 12px 0 0;
}

.ticket-divider {
    border-top: 2px dashed #9ca3af;
    margin: 16px 0;
    position: relative;
}

    .ticket-divider:: before {
        content: '';
        position: absolute;
        left: -30px;
        top: -6px;
        width: 12px;
        height: 12px;
        background: #f1f5f9;
        border-radius: 50%;
        border: 2px solid #9ca3af;
    }

    .ticket-divider:: after {
        content: '';
        position: absolute;
        right: -30px;
        top: -6px;
        width: 12px;
        height: 12px;
        background: #f1f5f9;
        border-radius: 50%;
        border: 2px solid #9ca3af;
    }

.demo-banner {
    background: rgba(157, 38, 38, 0.9);
    color: white;
    padding: 8px;
    text-align: center;
    font-size: 14px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
}

 

@media (max-width: 768px) {
    .demo-banner {
        font-size: 12px;
        padding: 6px;
    }

    .main-content {
        margin-top: 32px;
    }
}