.checkin-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 24px 16px;
        background: #fff;
        min-height: 100vh;
    }
    .checkin-header {
        margin-bottom: 24px;
    }
    .checkin-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: #1a1a1a;
        margin: 0;
    }
    .alert-msg {
        background: #dbeafe;
        color: #1e40af;
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 20px;
        text-align: center;
    }
    .category-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }
    .category-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.15s ease;
    }
    .category-card:hover {
        border-color: #3b82f6;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    }
    .category-card.is-group {
        cursor: pointer;
    }
    .category-link {
        display: block;
        padding: 20px 16px;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
    }
    .category-name {
        font-weight: 600;
        color: #1a1a1a;
        font-size: 1rem;
        margin-bottom: 4px;
    }
    .category-badge {
        display: inline-block;
        padding: 2px 8px;
        background: #f3f4f6;
        color: #6b7280;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 500;
    }
    .category-count {
        font-size: 2rem;
        font-weight: 700;
        color: #3b82f6;
        margin: 8px 0;
        width: 80px;
        border: none;
        background: transparent;
        text-align: center;
        -moz-appearance: textfield;
    }
    .category-count::-webkit-outer-spin-button,
    .category-count::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .category-count:focus {
        outline: none;
        background: #f0f9ff;
        border-radius: 6px;
    }
    .quantity-controls {
        display: flex;
        border-top: 1px solid #e5e7eb;
    }
    .qty-btn {
        flex: 1;
        padding: 12px;
        border: none;
        background: #f8fafc;
        font-size: 1.25rem;
        font-weight: 600;
        color: #374151;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .qty-btn:first-child {
        border-right: 1px solid #e5e7eb;
    }
    .qty-btn:hover {
        background: #e5e7eb;
    }
    .qty-btn.decrease:hover {
        background: #fee2e2;
        color: #dc2626;
    }
    .qty-btn.increase:hover {
        background: #dcfce7;
        color: #16a34a;
    }

    /* Expanded group section */
    .group-expand {
        grid-column: 1 / -1;
        background: #f8fafc;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 8px;
    }
    .group-expand-header {
        font-weight: 600;
        color: #1a1a1a;
        padding-bottom: 12px;
        margin-bottom: 12px;
        border-bottom: 1px solid #e5e7eb;
    }
    .group-expand-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .subcategory-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        overflow: hidden;
        transition: all 0.15s ease;
    }
    .subcategory-card:hover {
        border-color: #3b82f6;
    }

    /* Tablet */
    @media (min-width: 640px) {
        .checkin-container {
            padding: 32px 24px;
        }
        .checkin-title {
            font-size: 1.75rem;
        }
        .category-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        .group-expand-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    /* Desktop */
    @media (min-width: 1024px) {
        .checkin-container {
            padding: 20px 20px;
        }
        .category-grid {
            grid-template-columns: repeat(4, 1fr);
        }
        .group-expand-grid {
            grid-template-columns: repeat(4, 1fr);
        }
        .category-card:hover {
            transform: translateY(-2px);
        }
    }